jQuery UI example - select (Selectable)
Use the mouse to select a single element or group of elements.
For more details about the selectable interaction, see the API documentation can select widgets (the Selectable the Widget) .
The default function
Enabling selectable functions or on a group of elements on a DOM element. Select the entry by dragging the mouse. Hold down the Ctrl key to select multiple non-contiguous entries.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI selection (Selectable) - The default function </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> #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> $ (Function () { $ ( "#selectable") .selectable (); }); </ Script> </ Head> <Body> <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> <Li class = "ui-widget-content"> Item 7 </ li> </ Ol> </ Body> </ Html>
It is displayed as a grid
Let selectable entry is shown as a grid, so that they use CSS with the same dimensions and the floating display.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI selection (Selectable) - display a grid </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> #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: 450px;} #selectable li {margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center;} </ Style> <Script> $ (Function () { $ ( "#selectable") .selectable (); }); </ Script> </ Head> <Body> <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> </ Body> </ Html>
Serialization
Write a function that stop
when a trigger event to collect the selected items index value. These values are presented as feedback, or in the form of a string of data transfer.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI selection (Selectable) - serialized </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> #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> $ (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> <P id = "feedback"> <Span> You have selected: </ span> <span id = "select-result"> No </ 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> </ Body> </ Html>