HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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) .
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 = "https://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>
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 = "https://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>
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 = "https://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>