jQuery UI przykład - select (do wyboru)
Użyj myszki, aby wybrać pojedynczy element lub grupę elementów.
Więcej informacji na temat selektywnego oddziaływania można znaleźć w dokumentacji API może wybrać widżety (selekcyjnego widżet) .
Domyślną funkcją
Włączenie funkcji wybieralnych lub grupy elementów na elemencie DOM. Wybierz pozycję przeciągając myszką. Trzymając wciśnięty klawisz Ctrl, aby wybrać wiele nieciągłych wpisy.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Wybór jQuery UI (do wyboru) - Domyślna funkcja </ 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-wybierając {background: # FECA40;} #selectable .ui wybrany {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 = "wyboru"> <Li class = "ui-widget-content"> Pozycja 1 </ li> <Li class = "ui-widget-content"> Punkt 2 </ li> <Li class = "ui-widget-content"> Pozycja 3 </ li> <Li class = "ui-widget-content"> Punkt 4 </ li> <Li class = "ui-widget-content"> Punkt 5 </ li> <Li class = "ui-widget-content"> Pozycja 6 </ li> <Li class = "ui-widget-content"> Punkt 7 </ li> </ Ol> </ Body> </ Html>
Jest on wyświetlany w postaci siatki
Niech wyboru wpisu jest pokazany w postaci siatki, tak że za pomocą CSS o tych samych wymiarach i wyświetlacza pływającej.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Wybór jQuery UI (do wyboru) - wyświetla siatkę </ 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-wybierając {background: # FECA40;} #selectable .ui wybrany {background: # F39814; color: white;} #selectable {list-style-type: none; margin: 0; padding: 0; Szerokość: 450 pikseli;} #selectable li {margin: 3px; padding: 1px; pływaka: left; width: 100px; height: 80px; font-size: 4em; text-align: center;} </ Style> <Script> $ (Function () { $ ( "#selectable") .selectable (); }); </ Script> </ Head> <Body> <Ol id = "wyboru"> <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>
serializacji
Napisz funkcję, która stop
gdy zdarzenie wyzwalające zebrać wybraną wartość indeksu pozycji. Wartości te przedstawiono jako informacji zwrotnej albo w postaci łańcucha transferu danych.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Wybór jQuery UI (do wyboru) - w odcinkach </ 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-wybierając {background: # FECA40;} #selectable .ui wybrany {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 () { Wynik var = $ ( "# select-wynik") .empty (); $ ( ".ui-Selected", this) .each (function () { indeks var = $ ( "#selectable li") .Index (this); result.append ( "#" + (indeks + 1)); }); } }); }); </ Script> </ Head> <Body> <P id = "feedback"> <Span> Wybrałeś: </ span> <span id = "select-wynik"> Nie </ span>. </ P> <Ol id = "wyboru"> <Li class = "ui-widget-content"> Pozycja 1 </ li> <Li class = "ui-widget-content"> Punkt 2 </ li> <Li class = "ui-widget-content"> Pozycja 3 </ li> <Li class = "ui-widget-content"> Punkt 4 </ li> <Li class = "ui-widget-content"> Punkt 5 </ li> <Li class = "ui-widget-content"> Pozycja 6 </ li> </ Ol> </ Body> </ Html>