Najlepszy samouczek jQuery UI przykład - Menu (Menu) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,ikona,
Interakcja z myszy i klawiatury mogą być używane do poruszania się po menu Skórki.
Więcej informacji na temat elementów menu można znaleźć w dokumentacji API elementów menu (menu widget) .
W domyślnej konfiguracji, wyłącz zagnieżdżona wpisy menu i menu. Składa się on z listy konwertowane i dodawane tematów i obsługuje myszy i klawiatury interakcji. Użyj klawiszy strzałek, aby poruszać się po menu.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Menu (Menu) - 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"> <Script> $ (Function () { $ ( "#menu") .menu (); }); </ Script> <Style> .ui-menu {width: 150px;} </ Style> </ Head> <Body> <Ul id = "menu"> <Li class = "ui-state-wyłączony"> <a href="#"> Aberdeen </a> </ li> <Li> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Adamsville </a> </ li> <Li> <a href="#"> Addyston </a> </ li> <Li> <a href="#"> Delphi </a> <Ul> <Li class = "ui-state-wyłączony"> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> </ li> </ Ul> </ Li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> <Ul> <Li> <a href="#"> Delphi </a> <Ul> <Li> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> </ li> </ Ul> </ Li> <Li> <a href="#"> Delphi </a> <Ul> <Li> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> </ li> </ Ul> </ Li> <Li> <a href="#"> Perch </a> </ li> </ Ul> </ Li> <Li class = "ui-state-wyłączony"> <a href="#"> Amesville </a> </ li> </ Ul> </ Body> </ Html>
Menu z domyślnej konfiguracji, która pokazuje, jak korzystać z menu z ikonami.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> menu jQuery UI (Menu) - ikona </ 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"> <Script> $ (Function () { $ ( "#menu") .menu (); }); </ Script> <Style> .ui-menu {width: 150px;} </ Style> </ Head> <Body> <Ul id = "menu"> <Li> <a href="#"> <span class = "icon-ui ui-icon-disk"> </ span> zapisz </a> </ li> <Li> <a href="#"> <span class = "icon-ui ui-icon-zoomin"> </ span> Zwiększyć </a> </ li> <Li> <a href="#"> <span class = "icon-ui ui-icon-zoomout"> </ span> udoskonalić </a> </ li> <Li class = "ui-state-wyłączony"> <a href="#"> <span class = "icon-ui ui-icon-print"> </ span> Drukuj pl. </a> </ li > <Li> <a href="#"> grać </a> <Ul> <Li> <a href="#"> <span class = "icon-ui ui-ikona chowanego-start"> </ span> na </a> </ li> <Li> <a href="#"> <span class = "icon-ui ui-icon-stop"> </ span> Zatrzymaj </a> </ li> <Li> <a href="#"> <span class = "icon-ui ui-icon-play"> </ span> Play </a> </ li> <Li> <a href="#"> <span class = "icon-ui ui-ikona chowanego-end"> </ span> obok </a> </ li> </ Ul> </ Li> </ Ul> </ Body> </ Html>