Suggested Videos
Part 94 - jquery droppable widget
Part 95 - Customizing droppable widget
Part 96 - jQuery Resizable Widget
(追記) (追記ここまで)
In this video we will discuss jQuery selectable widget
(追記) (追記ここまで)
jQuery selectable widget allows us to select elements, individually or in a group using the mouse. Let us understand this with an example.
The user should be able to select the days he or she is available
jquery selectable example
Here is the example code used in the demo
jQuery tutorial for beginners
Part 94 - jquery droppable widget
Part 95 - Customizing droppable widget
Part 96 - jQuery Resizable Widget
(追記) (追記ここまで)
In this video we will discuss jQuery selectable widget
(追記) (追記ここまで)
jQuery selectable widget allows us to select elements, individually or in a group using the mouse. Let us understand this with an example.
The user should be able to select the days he or she is available
jquery selectable example
Here is the example code used in the demo
<%@PageLanguage="C#"AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"Inherits="Demo.WebForm1"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="jquery-1.11.2.js"></script>
<scriptsrc="jquery-ui.js"></script>
<linkhref="jquery-ui.css"rel="stylesheet"/>
<scripttype="text/javascript">
$(document).ready(function () {
$('#selectable').selectable({
stop: function () {
var result = '';
$('.ui-selected').each(function () {
result += $(this).text() + '<br/>';
});
$('#result').html(result);
}
});
});
</script>
<style>
li{
display:inline-block;
padding:20px;
border:1pxsolidblack;
cursor:pointer
}
.ui-selected{
background-color:green;
color:white
}
.ui-selecting{
background-color:grey;
color:white
}
</style>
</head>
<bodystyle="font-family:
Arial">
<formid="form1"runat="server">
<ulid="selectable">
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>Sun</li>
</ul>
You selected : <divid="result"></div>
</form>
</body>
</html>
jQuery tutorial for beginners
No comments:
Post a Comment
It would be great if you can help share these free resources
[フレーム]