Najlepszy samouczek jQuery UI instancji - Button (Przycisk) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,pole wyboru,ikona,radio,przycisk Splicie,Toolbar,
Z właściwego stosowania zawisu (Umieszczenie) i aktywacji (aktywne) style można przycisku tematycznych w celu zwiększenia standardowe elementy postaci (takich jak guziki, pól wpisu, kotwica) funkcji.
Aby uzyskać więcej informacji na temat składników przycisków można znaleźć w dokumentacji API element przycisku (widżet) .
Przykłady markerów może być używany do przycisków: element przycisku, rodzaj elementów wejściowych i złożyć kotwicę.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Przycisk jQuery UI (przycisk) - 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 () { $ ( "Input [type = submit], a, przycisk") .button () .Kliknij (function (event) { event.preventDefault (); }); }); </ Script> </ Head> <Body> <Button> element przycisku </ button> <Input type = "submit" value = "Zatwierdź przyciskiem"> <a href="#"> się </a> kotwicy </ Body> </ Html>
Za pomocą przycisku pole wyboru jest styl Przycisk przełączający. Elementy oznakowania związane z pudełka, co tekst przycisku.
W tym przypadku, wzywając publicznego kontenera .buttonset()
, na co wskazują trzy style wyświetlania okna przycisk.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Przycisk jQuery UI (przycisk) - pole </ 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 () { $ ( "#check") .button (); $ ( "#format") .buttonset (); }); </ Script> <Style> #format {margin-top: 2em;} </ Style> </ Head> <Body> <Input type = "checkbox" id = "check"> <label for = "check"> switch </ label> <Div id = "Format"> <Input type = "checkbox" id = "Check1"> <label for = "Check1"> B </ label> <Input type = "checkbox" id = "check2"> <label for = "check2"> I </ label> <Input type = "checkbox" id = "check3"> <label for = "check3"> U </ label> </ Div> </ Body> </ Html>
Niektóre z różnymi kombinacjami przycisków tekstowych oraz ikony
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Przycisk jQuery UI (przycisk) - 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 () { $ ( "Button: najpierw") .button ({ Ikony: { Podstawowym "ui-icon-locked" } Tekst: false }). Następnie (). Przycisk ({ Ikony: { Podstawowym "ui-icon-locked" } }). Następnie (). Przycisk ({ Ikony: { Podstawowym "ui-icon-gear" wtórne: "ui-icon-trójkąt-1-s" } }). Następnie (). Przycisk ({ Ikony: { Podstawowym "ui-icon-gear" wtórne: "ui-icon-trójkąt-1-s" } Tekst: false }); }); </ Script> </ Head> <Body> <Przycisk> ikona przycisku tylko przycisku </> <Przycisk> ikona przycisku po lewej </ button> <Button> Przycisk z dwoma ikonami </ button> <Button> dwa przyciski z ikoną tekst bez przycisku </> </ Body> </ Html>
Trzy przyciski radiowe do przycisku.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Przycisk UI jQuery (przycisk) - Radio </ 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 () { $ ( "#radio") .buttonset (); }); </ Script> </ Head> <Body> <Form> <Div id = "radio"> <Input type = "radio" id = "radio1" name = "radio"> <label for = "Radio1"> Wybierz 1 </ label> <Input type = sprawdzone "radio" id = "radio2" name = "radio" = "zaznaczone"> <label for = "radio2"> wybierz opcję 2 </ label> <Input type = "radio" id = "radio3" name = "radio"> <label for = "radio3"> Wybierz 3 </ label> </ Div> </ Form> </ Body> </ Html>
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Przycisk jQuery UI (przycisk) - Split Przycisk </ 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> .ui-menu {position: absolute; width: 100px;} </ Style> <Script> $ (Function () { $ ( "#rerun") .button () .Kliknij (function () { alert ( "Running ostatnią akcję"); }) .next () .button ({ Tekst: false, Ikony: { Podstawowym "ui-icon-trójkąt-1-s" } }) .Kliknij (function () { Menu var = $ (this) .parent (). next (). show (). Pozycja ({ moim: "lewy górny" pod adresem: "lewy dolny" o: to }); $ (Document) .one ( "click", function () { menu.hide (); }); return false; }) .parent () .buttonset () .next () .hide () .menu (); }); </ Script> </ Head> <Body> <Div> <Div> <Button id = "powtórka"> Uruchom ostatnia akcja </ button> <Button id = "select"> wybierz akcję </ button> </ Div> <Ul> <Li> <a href="#"> otwarta pl. </a> </ li> <Li> <a href="#"> zapisać </a> </ li> <Li> <a href="#"> usuwać </a> </ li> </ Ul> </ Div> </ Body> </ Html>
Pasek narzędzi odtwarzacz multimedialny. Spójrz na bazie znaczników: Niektóre elementem, przycisk Shuffle to pole wyboru typu wejścia, opcje powtarzania są trzy rodzaje wejść radiowej.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Przycisk UI jQuery (przycisk) - pasek narzędzi </ 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> #toolbar { padding: 4px; display: inline-block; } / * Wsparcie: IE7 * / * + Html #toolbar { display: inline; } </ Style> <Script> $ (Function () { $ ( "#beginning") .button ({ Tekst: false, Ikony: { Podstawowym "ui-ikona chowanego-start" } }); $ ( "#rewind") .button ({ Tekst: false, Ikony: { Podstawowym "ui-ikona chowanego-prev" } }); $ ( "#play") .button ({ Tekst: false, Ikony: { Podstawowym "ui-icon-play" } }) .Kliknij (function () { var options; if ($ (this) .text () === "play") { options = { Etykieta: "pause" Ikony: { Podstawowym "ui-icon-pause" } }; } Else { options = { Etykieta: "play", Ikony: { Podstawowym "ui-icon-play" } }; } $ (This) .button ( "Opcja", opcje); }); $ ( "#stop") .button ({ Tekst: false, Ikony: { Podstawowym "ui-icon-stop" } }) .Kliknij (function () { $ ( "#play") .button ( "Opcja", { Etykieta: "play", Ikony: { Podstawowym "ui-icon-play" } }); }); $ ( "#forward") .button ({ Tekst: false, Ikony: { Podstawowym "ui-ikona chowanego-next" } }); $ ( "#end") .button ({ Tekst: false, Ikony: { Podstawowym "ui-ikona chowanego-end" } }); $ ( "#shuffle") .button (); $ ( "#repeat") .buttonset (); }); </ Script> </ Head> <Body> <Div id = "toolbar" class = "widget-ui ui-header-corner-all"> <Button id = "początek"> początek </ button> <Button id = "do tyłu"> zwijanie </ button> <Button id = "play"> Odtwórz </ button> <Button id = "stop"> Zatrzymaj </ button> <Button id = "do przodu"> Przewijanie do przodu </ button> <Button id = "end"> koniec przycisk </> <Input type = "checkbox" id = "Shuffle"> <label for = "Shuffle"> Shuffle </ label> <Span id = "repeat"> <Input type = "radio" id = "repeat0" name = "repeat" zaznaczone = "zaznaczone"> <label = "repeat0"> No Repeat </ label> <Input type = "radio" id = "Powtarzanie 1" name = "repeat"> <label = "Powtarzanie 1"> Po </ label> <Input type = "radio" id = "repeatall" name = "repeat"> <label = "repeatall"> Wszystkie </ label> </ Span> </ Div> </ Body> </ Html>