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
Here is the example code used in the demo
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
Here is the example code used in the demo
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" />
<script type="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:1px solid black;
cursor:pointer
}
.ui-selected{
background-color:green;
color:white
}
.ui-selecting{
background-color:grey;
color:white
}
</style>
</head>
<body style="font-family:
Arial">
<form id="form1" runat="server">
<ul id="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 : <div id="result"></div>
</form>
</body>
</html>
No comments:
Post a Comment
It would be great if you can help share these free resources