| 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 |