jQuery UI Beispiel - select (wählbar)
Mit der Maus kann ein einzelnes Element oder eine Gruppe von Elementen auszuwählen.
Für weitere Details über die wählbaren Interaktion finden Sie in der API - Dokumentation Widgets auswählen können (die Wählbare das Widget) .
Die Standardfunktion
Aktivieren der wählbaren Funktionen oder auf eine Gruppe von Elementen auf einem DOM-Element. Wählen Sie den Eintrag durch Ziehen der Maus. Halten Sie die Strg-Taste gedrückt, um mehrere nicht zusammenhängende Einträge auszuwählen.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Auswahl (wählbar) - Die Standardfunktion </ 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-Auswahl {background: # FECA40;} #selectable .ui ausgewählten {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 = "wählbar"> <Li class = "ui-Widget-content"> Artikel 1 </ li> <Li class = "ui-Widget-content"> Artikel 2 </ li> <Li class = "ui-Widget-content"> Artikel 3 </ li> <Li class = "ui-Widget-content"> Artikel 4 </ li> <Li class = "ui-Widget-content"> Artikel 5 </ li> <Li class = "ui-Widget-content"> Artikel 6 </ li> <Li class = "ui-Widget-content"> Artikel 7 </ li> </ Ol> </ Body> </ Html>
Es wird als ein Raster angezeigt
Lassen auswählbaren Eintrag als Raster dargestellt ist, so dass sie CSS mit den gleichen Abmessungen und der schwimmenden Anzeige verwenden.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Auswahl (auswählbar) - Anzeige ein Raster </ 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-Auswahl {background: # FECA40;} #selectable .ui ausgewählten {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 = "wählbar"> <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>
Serialisierung
Schreiben Sie eine Funktion , die stop
, wenn ein Triggerereignis die ausgewählten Elemente Indexwert zu sammeln. Diese Werte werden als Rückkopplung oder in Form einer Reihe von Datenübertragung dargestellt.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Auswahl (wählbar) - serialisiert </ 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-Auswahl {background: # FECA40;} #selectable .ui ausgewählten {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 ({ Stopp: function () { var result = $ ( "# select-Ergebnis") .empty (); $ ( ".ui-Selected", this) .each (function () { var index = $ ( "#selectable li") .index (this); result.append ( "#" + (Index + 1)); }); } }); }); </ Script> </ Head> <Body> <P id = "Feedback"> <Span> Sie haben gewählt: </ span> <span id = "select-Ergebnis"> Nein </ span>. </ P> <Ol id = "wählbar"> <Li class = "ui-Widget-content"> Artikel 1 </ li> <Li class = "ui-Widget-content"> Artikel 2 </ li> <Li class = "ui-Widget-content"> Artikel 3 </ li> <Li class = "ui-Widget-content"> Artikel 4 </ li> <Li class = "ui-Widget-content"> Artikel 5 </ li> <Li class = "ui-Widget-content"> Artikel 6 </ li> </ Ol> </ Body> </ Html>