| selectable
widget |
|
|
|
| using
this if we select, that items display in element dynamically |
|
|
|
|
|
| jQuery
selectable widget allows us to select elements, individually or in a group
using the mouse. Let us understand this with an example. |
|
|
|
| Here is
the example code used in the demo |
|
|
|
| HTML |
|
| <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> |
|
|
|
| CSS |
|
| li{ |
|
| display:inline-block; |
|
| padding:20px; |
|
| border:1px solid black; |
|
| cursor:pointer |
hover, change to poiinter |
| } |
|
| .ui-selected{ |
if cursor comes outside after
long press |
| background-color:green; |
this class comes from developer
tools magnifying |
| color:white |
to select use drag |
| } |
|
| .ui-selecting{ |
if mouse in and cursor long
press |
| background-color:grey; |
while selecting |
| color:white |
|
| } |
|
|
|
| jQuery |
|
| $(document).ready(function
() { |
|
| $('#selectable').selectable({ |
|
| stop: function () { |
after selected stop raised |
| var result = ''; |
|
| $('.ui-selected').each(function
() { |
if we selected each function
execute |
| result += $(this).text() +
'<br/>'; |
which thing we selected, example
li item , that convert to text and assign to result and loop and using plus
add |
| }); |
|
| |
|
| $('#result').html(result); |
store that result into result id
using html |
| } |
|
| }); |
|
| }); |
|
|
|
|
|
|
|
| jquery
selectable widget |
|
|
|
| we will
discuss jQuery selectable filter option with an example. Along the way we
will also discuss destory method. This is continuation to Part 97. Please
watch Part 97 from jQuery Tutorial before proceeding. |
|
|
|
| Here is
what we want to be able to do |
|
| When
"Exclude Weekends" checkbox is checked, we should not be able to
select weekends (Sat and Sun) |
|
| When
"Exclude Weekends" checkbox is not checked, we should be able to
select all days including weekends (Sat and Sun) |
|
|
|
| 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 () { |
|
| var selectableList =
$('#selectable'); |
|
| |
|
| selectableList.selectable({ |
|
| stop: getSelectedItems |
|
| }); |
|
| |
|
| function getSelectedItems() { |
|
| var selectedItems = ''; |
|
|
$('.ui-selected').each(function () { |
|
| selectedItems +=
$(this).text() + '<br/>'; |
|
| }); |
|
| |
|
|
$('#result').html(selectedItems); |
|
| } |
|
| |
|
| function
createSelectableList(filterValue) { |
|
|
selectableList.selectable('destroy').selectable({ |
we destroyed the selectable
feature using destroy with selectable
on selectable list and recreate the selectable method |
| stop: getSelectedItems, |
whenever select the selectable
list, we stopped the selectable items,implement function getselecteditems |
| filter: filterValue |
from selected items filte the
values |
| }); |
|
| $('#selectable
li').removeClass('ui-selected'); |
remove the css |
| $('#result').empty(); |
empty the result value |
| |
|
| var weekends =
$('li[data-value="weekend"]'); |
|
| if (filterValue == '*') { |
to give visual difference, and
from selcte dand non selected |
|
weekends.removeClass('excluded'); |
star means includes all |
| } |
|
| else { |
|
|
weekends.addClass('excluded'); |
if checked add class |
| } |
|
| } |
|
| |
|
| |
|
| $('#cbExclude').click(function ()
{ |
whenerve this button is checkd |
| if ($(this).is(':checked')) { |
we cheked one button, if that
checked |
|
createSelectableList('li[data-value="weekday"]'); |
do a function with this valuie |
| } |
|
| else { |
|
|
createSelectableList('*'); |
|
| } |
|
| }); |
|
| }); |
|
| </script> |
|
| <style> |
|
| li { |
|
| display: inline-block; |
|
| border: 1px solid black; |
|
| padding: 20px; |
|
| cursor: pointer; |
|
| } |
|
|
|
| .ui-selecting { |
|
| background-color: grey; |
|
| color: white; |
|
| } |
|
|
|
| .ui-selected { |
|
| background-color: green; |
|
| color: white; |
|
| } |
|
|
|
| .excluded { |
|
| background-color: red; |
|
| color:white; |
|
| cursor:default |
|
| } |
|
| </style> |
|
| </head> |
|
| <body
style="font-family: Arial"> |
|
| <form id="form1"
runat="server"> |
|
| Exclude Weekends : |
|
| <input id="cbExclude"
type="checkbox"/> |
|
| <ul id="selectable"> |
|
| <li
data-value="weekday">Mon</li> |
to distinguish between week days
and weekends use attribute |
| <li
data-value="weekday">Tue</li> |
|
| <li
data-value="weekday">Wed</li> |
|
| <li
data-value="weekday">Thu</li> |
|
| <li
data-value="weekday">Fri</li> |
|
| <li
data-value="weekend">Sat</li> |
|
| <li
data-value="weekend">Sun</li> |
|
| </ul> |
|
| You selected : |
|
| <div
id="result"></div> |
|
| </form> |
|
| </body> |
|
</html>
| selectable |
| each |
| text |
| html |
| selectable |
| stop |
| html |
| filter |
| removeclass |
| empty |
| addclass |
| :checked |
| data-value |
| data-value |
| HOW TO
WRITE THE TEXT FROM SELECTABLE |
| play
with selectable |
|
|
|
|
No comments:
Post a Comment