Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
reorganized/renamed selectable demos
- Loading branch information
Maggie Costello Wachs
committed
Jan 16, 2009
1 parent
3a65a63
commit c00881c
Showing
4 changed files
with
111 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>jQuery UI Selectable - Display as grid</title> | ||
| <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
| <script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.selectable.js"></script> | ||
| <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
|
|
||
| <style type="text/css"> | ||
| #feedback { font-size: 1.4em; } | ||
| #selectable .ui-selecting { background: #FECA40; } | ||
| #selectable .ui-selected { background: #F39814; color: white; } | ||
| #selectable { list-style-type: none; margin: 0; padding: 0; } | ||
| #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } | ||
| </style> | ||
| <script type="text/javascript"> | ||
| $(function() { | ||
| $("#selectable").selectable(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="demo"> | ||
|
|
||
| <ol id="selectable"> | ||
| <li class="ui-state-default">1</li> | ||
| <li class="ui-state-default">2</li> | ||
| <li class="ui-state-default">3</li> | ||
| <li class="ui-state-default">4</li> | ||
| <li class="ui-state-default">5</li> | ||
| <li class="ui-state-default">6</li> | ||
| <li class="ui-state-default">7</li> | ||
| <li class="ui-state-default">8</li> | ||
| <li class="ui-state-default">9</li> | ||
| <li class="ui-state-default">10</li> | ||
| <li class="ui-state-default">11</li> | ||
| <li class="ui-state-default">12</li> | ||
| </ol> | ||
|
|
||
| </div><!-- End demo --> | ||
|
|
||
| <div class="demo-description"> | ||
|
|
||
| <p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p> | ||
|
|
||
| </div><!-- End demo-description --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>jQuery UI Selectable - Serialize</title> | ||
| <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
| <script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.selectable.js"></script> | ||
| <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
|
|
||
| <style type="text/css"> | ||
| #feedback { font-size: 1.4em; } | ||
| #selectable .ui-selecting { background: #FECA40; } | ||
| #selectable .ui-selected { background: #F39814; color: white; } | ||
| #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } | ||
| #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } | ||
| </style> | ||
| <script type="text/javascript"> | ||
| $(function() { | ||
| $("#selectable").selectable({ | ||
| stop: function(){ | ||
| var result = $("#select-result").empty(); | ||
| $(".ui-selected", this).each(function(){ | ||
| var index = $("#selectable li").index(this); | ||
| result.append(" #" + (index + 1)); | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="demo"> | ||
|
|
||
| <p id="feedback"> | ||
| You've selected: <span id="select-result">none</span>. | ||
| </p> | ||
|
|
||
| <ol id="selectable"> | ||
| <li class="ui-widget-content">Item 1</li> | ||
| <li class="ui-widget-content">Item 2</li> | ||
| <li class="ui-widget-content">Item 3</li> | ||
| <li class="ui-widget-content">Item 4</li> | ||
| <li class="ui-widget-content">Item 5</li> | ||
| <li class="ui-widget-content">Item 6</li> | ||
| </ol> | ||
|
|
||
| </div><!-- End demo --> | ||
|
|
||
| <div class="demo-description"> | ||
|
|
||
| <p>Write a function that fires on the <strong>stop</strong> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p> | ||
|
|
||
| </div><!-- End demo-description --> | ||
| </body> | ||
| </html> |