JqueryUI - Button
jQueryUI udostępnia metodę button () do przekształcania elementów HTML (takich jak przyciski, dane wejściowe i kotwice) w przyciski tematyczne, z automatycznym zarządzaniem ruchami myszy na nich, wszystkimi zarządzanymi w przejrzysty sposób przez interfejs użytkownika jQuery.
W celu grupowania przycisków opcji, Button udostępnia również dodatkowy widżet o nazwie Zestaw przycisków . Buttonset jest używany przez wybranie elementu kontenera (który zawiera przyciski opcji) i wywołanie .buttonset () .
Składnia
Plik button() metoda może być stosowana w dwóch formach -
$ (selektor, kontekst) .button (opcje) Metoda
$ (selektor, kontekst) .button ("akcja", parametry) Metoda
$ (selektor, kontekst) .button (opcje) Metoda
Metoda button (opcje) deklaruje, że element HTML powinien być traktowany jako przycisk. Te opcje parametr jest obiektem, który określa zachowanie i wygląd przycisku.
Składnia
$(selector, context).button (options);
Możesz podać jedną lub więcej opcji naraz, używając obiektu JavaScript. Jeśli ma zostać podanych więcej niż jedna opcja, oddziel je przecinkiem w następujący sposób -
$(selector, context).button({option1: value1, option2: value2..... });
W poniższej tabeli wymieniono różne opcje , których można użyć z tą metodą -
Sr.No. | Opcja i opis |
---|---|
1 | wyłączone Ta opcja wyłącza przycisk ustawiony na true . Domyślnie jego wartość tofalse. Option - disabled Ta opcja wyłącza przycisk ustawiony na true . Domyślnie jego wartość tofalse. Syntax
|
2 | ikony Ta opcja określa, że na przycisku ma być wyświetlana jedna lub dwie ikony : ikony podstawowe po lewej, ikony drugorzędne po prawej. Ikona główna jest identyfikowana przez właściwość podstawową obiektu, a ikona pomocnicza jest identyfikowana przez właściwość drugorzędną. Domyślnie jego wartość toprimary: null, secondary: null. Option - icons Ta opcja określa, że na przycisku ma być wyświetlana jedna lub dwie ikony : ikony podstawowe po lewej, ikony drugorzędne po prawej. Ikona główna jest identyfikowana przez właściwość podstawową obiektu, a ikona pomocnicza jest identyfikowana przez właściwość drugorzędną. Domyślnie jego wartość toprimary: null, secondary: null. Syntax
|
3 | etykieta Ta opcja określa tekst wyświetlany na przycisku, który zastępuje naturalną etykietę. W przypadku pominięcia wyświetlana jest naturalna etykieta elementu. W przypadku przycisków opcji i pól wyboru naturalną etykietą jest element <label> skojarzony z kontrolką. Domyślnie jego wartość tonull. Option - label Ta opcja określa tekst wyświetlany na przycisku, który zastępuje naturalną etykietę. W przypadku pominięcia wyświetlana jest naturalna etykieta elementu. W przypadku przycisków opcji i pól wyboru naturalną etykietą jest element <label> skojarzony z kontrolką. Domyślnie jego wartość tonull. Syntax
|
4 | tekst Ta opcja określa, czy na przycisku ma być wyświetlany tekst. Jeśli określono jako fałsz , tekst jest pomijany, jeśli (i tylko wtedy) opcja ikon określa przynajmniej jedną ikonę. Domyślnie jego wartość totrue. Option - text Ta opcja określa, czy na przycisku ma być wyświetlany tekst. Jeśli określono jako fałsz , tekst jest pomijany, jeśli (i tylko wtedy) opcja ikon określa przynajmniej jedną ikonę. Domyślnie jego wartość totrue. Syntax
|
Domyślna funkcjonalność
Poniższy przykład ilustruje prosty przykład funkcji widgetu przycisku, nie przekazując żadnych parametrów do button() metoda.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-1, #button-2, #button-3, #button-4" ).button();
$( "#button-5" ).buttonset();
});
</script>
</head>
<body>
<button id = "button-1">A button element</button>
<input id = "button-2" type = "submit" value = "A submit button">
<a id = "button-3" href = "">An anchor</a>
<input type = "checkbox" id = "button-4" >
<label for = "button-4">Toggle</label>
<br><br>
<div id = "button-5">
<input type = "checkbox" id = "check1">
<label for = "check1">Left</label>
<input type = "checkbox" id = "check2">
<label for = "check2">Middle</label>
<input type = "checkbox" id = "check3">
<label for = "check3">Right</label>
</div>
</body>
</html>
Zapiszmy powyższy kod w pliku HTML buttonexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -
Ten przykład ilustruje znaczniki, których można użyć dla przycisków: element przycisku, dane wejściowe typu submit i kotwica.
Korzystanie z ikon, tekstu i wyłączone
Poniższy przykład ilustruje użycie dwóch opcji icons, text i disabled w funkcji przycisku JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-6" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
$( "#button-7" ).button({
disabled:true
});
$( "#button-8" ).button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
});
});
</script>
</head>
<body>
<button id = "button-6">
Button with icon only
</button>
<button id = "button-7">
Button Disabled
</button>
<button id = "button-8">
Button with two icons
</button>
</body>
</html>
Zapiszmy powyższy kod w pliku HTML buttonexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -
Tutaj możesz zobaczyć przycisk z samą ikoną, przycisk z dwiema ikonami i wyłączony przycisk.
$ (selektor, kontekst) .button ("akcja", parametry) Metoda
Metoda button („akcja”, params) może wykonywać akcję na przyciskach, na przykład wyłączać przycisk. Akcja jest określana jako ciąg znaków w pierwszym argumencie (np. „Disable”, aby wyłączyć przycisk). Zapoznaj się z czynnościami, które można wykonać, w poniższej tabeli.
Składnia
$(selector, context).button ("action", params);
W poniższej tabeli wymieniono różne akcje , których można użyć z tą metodą -
Sr.No. | Działanie i opis |
---|---|
1 | zniszczyć Ta akcja całkowicie usuwa funkcjonalność przycisku elementu. Elementy wracają do stanu sprzed uruchomienia. Ta metoda nie przyjmuje żadnych argumentów. Action - destroy Ta akcja całkowicie usuwa funkcjonalność przycisku elementu. Elementy wracają do stanu sprzed uruchomienia. Ta metoda nie przyjmuje żadnych argumentów. Syntax
|
2 | wyłączyć Ta akcja wyłącza funkcjonalność przycisku elementu. Ta metoda nie przyjmuje żadnych argumentów. Action - disable Ta akcja wyłącza funkcjonalność przycisku elementu. Ta metoda nie przyjmuje żadnych argumentów. Syntax
|
3 | włączyć Ta akcja włącza funkcjonalność przycisku elementu. Ta metoda nie przyjmuje żadnych argumentów. Action - enable Ta akcja włącza funkcjonalność przycisku elementu. Ta metoda nie przyjmuje żadnych argumentów. Syntax
|
4 | opcja (optionName) Ta akcja pobiera wartość opcji określonej w optionName . Gdzie nazwa_opcji jest ciągiem . Action - option( optionName ) Ta akcja pobiera wartość opcji określonej w optionName . Gdzie nazwa_opcji jest ciągiem . Syntax
|
5 | opcja Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące skrót aktualnych opcji przycisku. Action - option Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące skrót aktualnych opcji przycisku. Syntax
|
6 | opcja (nazwa_opcji, wartość) Ta akcja ustawia wartość opcji przycisku skojarzonej z określoną opcją nazwa_opcji . Action - option( optionName, value ) Ta akcja ustawia wartość opcji przycisku skojarzonej z określoną opcją nazwa_opcji . Gdzie nazwa_opcji to nazwa opcji do ustawienia, a wartość to wartość do ustawienia dla opcji. Syntax
|
7 | opcja (opcje) Ta akcja ustawia jedną lub więcej opcji dla przycisku. Gdzie opcje jest mapą par opcja-wartość do ustawienia. Action - option( options ) Ta akcja ustawia jedną lub więcej opcji dla przycisku. Gdzie opcje jest mapą par opcja-wartość do ustawienia. Syntax
|
8 | odświeżać Ta czynność odświeża wyświetlanie przycisku. Jest to przydatne, gdy przyciski są obsługiwane przez program, a wyświetlacz niekoniecznie odpowiada stanowi wewnętrznemu. Ta metoda nie przyjmuje żadnych argumentów. Action - refresh Ta czynność odświeża wyświetlanie przycisku. Jest to przydatne, gdy przyciski są obsługiwane przez program, a wyświetlacz niekoniecznie odpowiada stanowi wewnętrznemu. Ta metoda nie przyjmuje żadnych argumentów. Syntax
|
9 | widget Ta akcja zwraca obiekt jQuery zawierający element przycisku. Ta metoda nie przyjmuje żadnych argumentów. Action - widget Ta akcja zwraca obiekt jQuery zawierający element przycisku. Ta metoda nie przyjmuje żadnych argumentów. Syntax
|
Przykład
Zobaczmy teraz przykład wykorzystujący akcje z powyższej tabeli. Poniższy przykład demonstruje użycie metod destru () i disable () .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-9" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#button-9" ).button('destroy');
$( "#button-10" ).button({
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#button-10" ).button('disable');
$( "#button-11" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
});
});
</script>
</head>
<body>
<button id = "button-9">
I'm destroyed
</button>
<button id = "button-10">
I'm disabled
</button>
<button id = "button-11">
play
</button>
</body>
</html>
Zapiszmy powyższy kod w pliku HTML buttonexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe -
Zarządzanie zdarzeniami na przyciskach
Oprócz metody button (opcje), którą widzieliśmy w poprzednich sekcjach, JqueryUI udostępnia metody zdarzeń, które są wyzwalane dla określonego zdarzenia. Te metody zdarzeń są wymienione poniżej -
Sr.No. | Metoda i opis wydarzenia |
---|---|
1 | create (event, ui) To zdarzenie jest wyzwalane po utworzeniu przycisku. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - create(event, ui) To zdarzenie jest wyzwalane po utworzeniu elementu przycisku. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax
|
Przykład
Poniższy przykład ilustruje użycie metody zdarzenia dla funkcji widgetu przycisku. Ten przykład demonstruje użycie zdarzenia create .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
<script>
$(function() {
$( "#button-12" ).button({
create: function() {
$("p#result").html ($("p#result")
.html () + "<b>created</b><br>");
}
});
});
</script>
</head>
<body>
<button id = "button-12">
A button element
</button>
<p class = "resultarea" id = result></p>
</body>
</html>
Zapiszmy powyższy kod w pliku HTML buttonexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -