OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html lang="en"> | |
3 <head> | |
4 <meta charset="UTF-8" /> | |
5 <title>jQuery UI Selectable - Default functionality</title> | |
6 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css"
rel="stylesheet" /> | |
7 <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> | |
8 <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"><
/script> | |
9 | |
10 <style type="text/css"> | |
11 #feedback { font-size: 1.4em; } | |
12 #selectable .ui-selecting { background: #FECA40; } | |
13 #selectable .ui-selected { background: #F39814; color: white; } | |
14 #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%;
} | |
15 #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; } | |
16 </style> | |
17 <script type="text/javascript"> | |
18 $(function() { | |
19 $("#selectable").selectable({ | |
20 stop: function() { | |
21 var infodiv = $("#infodiv").empty(); | |
22 $(".ui-selected", this).each(function() { | |
23 var that_id = this.id; | |
24 infodiv.append(' #' + that_id); | |
25 }); | |
26 } | |
27 }); | |
28 $("button").button(); | |
29 $("button").click(function() { | |
30 var list_disabled = $("#selectable").selectable("option", "disable
d"); | |
31 $("#infodiv").find('p').html('Disabled: ' + !list_disabled); | |
32 $("#selectable").selectable("option", "disabled", !list_disabled); | |
33 }); | |
34 }); | |
35 </script> | |
36 </head> | |
37 <body> | |
38 <div class="demo"> | |
39 | |
40 <ol id="selectable"> | |
41 <li id="item1" class="ui-widget-content">Item 1</li> | |
42 <li id="item2" class="ui-widget-content">Item 2</li> | |
43 <li id="item3" class="ui-widget-content">Item 3</li> | |
44 <li id="item4" class="ui-widget-content">Item 4</li> | |
45 <li id="item5" class="ui-widget-content">Item 5</li> | |
46 <li id="item6" class="ui-widget-content">Item 6</li> | |
47 <li id="item7" class="ui-widget-content">Item 7</li> | |
48 </ol> | |
49 | |
50 </div><!-- End demo --> | |
51 | |
52 <div class="demo-description"> | |
53 | |
54 <p>Enable a DOM element (or group of elements) to be selectable. Draw a box wi
th your cursor to select items. Hold down the Ctrl key to make multiple non-adja
cent selections. </p> | |
55 | |
56 <button type="button" id="somebutton">Click to lock</button> | |
57 | |
58 <div id="infodiv"> | |
59 <p>no info</p> | |
60 </div> | |
61 | |
62 | |
63 </div><!-- End demo-description --> | |
64 </body> | |
65 </html> | |
OLD | NEW |