JqueryUI - Button
jQueryUI fornisce il metodo button () per trasformare gli elementi HTML (come pulsanti, input e ancore) in pulsanti temabili, con gestione automatica dei movimenti del mouse su di essi, il tutto gestito in modo trasparente dall'interfaccia utente di jQuery.
Per raggruppare i pulsanti di opzione , Button fornisce anche un widget aggiuntivo, chiamato Buttonset . Buttonset viene utilizzato selezionando un elemento contenitore (che contiene i pulsanti di opzione ) e chiamando .buttonset () .
Sintassi
Il button() può essere utilizzato in due forme:
$ (selettore, contesto) .button (opzioni) Metodo
Il metodo button (opzioni) dichiara che un elemento HTML deve essere trattato come pulsante. Il parametro options è un oggetto che specifica il comportamento e l'aspetto del pulsante.
Sintassi
$(selector, context).button (options);Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:
$(selector, context).button({option1: value1, option2: value2..... });La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:
| Sr.No. | Opzione e descrizione |
|---|---|
| 1 | Disabilitato Questa opzione disattiva il pulsante è impostato su true . Per impostazione predefinita, il suo valore èfalse. Option - disabled Questa opzione disattiva il pulsante è impostato su true . Per impostazione predefinita, il suo valore èfalse. Syntax |
| 2 | icone Questa opzione specifica che una o due icone devono essere visualizzate nel pulsante: icone primarie a sinistra, icone secondarie a destra. L'icona principale è identificata dalla proprietà primaria dell'oggetto e l' icona secondaria è identificata dalla proprietà secondaria. Per impostazione predefinita, il suo valore èprimary: null, secondary: null. Option - icons Questa opzione specifica che una o due icone devono essere visualizzate nel pulsante: icone primarie a sinistra, icone secondarie a destra. L'icona principale è identificata dalla proprietà primaria dell'oggetto e l' icona secondaria è identificata dalla proprietà secondaria. Per impostazione predefinita, il suo valore èprimary: null, secondary: null. Syntax |
| 3 | etichetta Questa opzione specifica il testo da visualizzare sul pulsante che sostituisce l'etichetta naturale. Se omesso, viene visualizzata l'etichetta naturale per l'elemento. Nel caso di pulsanti di opzione e caselle di controllo, l'etichetta naturale è l'elemento <label> associato al controllo. Per impostazione predefinita, il suo valore ènull. Option - label Questa opzione specifica il testo da visualizzare sul pulsante che sostituisce l'etichetta naturale. Se omesso, viene visualizzata l'etichetta naturale per l'elemento. Nel caso di pulsanti di opzione e caselle di controllo, l'etichetta naturale è l'elemento <label> associato al controllo. Per impostazione predefinita, il suo valore ènull. Syntax |
| 4 | testo Questa opzione specifica se il testo deve essere visualizzato sul pulsante. Se specificato come falso , il testo viene soppresso se (e solo se) l'opzione delle icone specifica almeno un'icona. Per impostazione predefinita, il suo valore ètrue. Option - text Questa opzione specifica se il testo deve essere visualizzato sul pulsante. Se specificato come falso , il testo viene soppresso se (e solo se) l'opzione delle icone specifica almeno un'icona. Per impostazione predefinita, il suo valore ètrue. Syntax |
Funzionalità predefinita
L'esempio seguente mostra un semplice esempio di funzionalità del widget pulsante, senza passare parametri al file button() metodo.
<!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>Salviamo il codice sopra in un file HTML buttonexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:
Questo esempio dimostra il markup che può essere utilizzato per i pulsanti: un elemento button, un input di tipo submit e un anchor.
Uso di icone, testo e disabilitato
L'esempio seguente mostra l'utilizzo di due opzioni icons, text e disabled nella funzione pulsante di 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>Salviamo il codice sopra in un file HTML buttonexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:
Qui puoi vedere un pulsante con solo un'icona, un pulsante con due icone e un pulsante disabilitato.
$ (selector, context) .button ("action", params) Metodo
Il metodo button ("action", params) può eseguire un'azione sui pulsanti, come disabilitare il pulsante. L'azione è specificata come una stringa nel primo argomento (ad esempio, "disabilita" per disabilitare il pulsante). Controlla le azioni che possono essere trasmesse, nella tabella seguente.
Sintassi
$(selector, context).button ("action", params);La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:
| Sr.No. | Azione e descrizione |
|---|---|
| 1 | distruggere Questa azione rimuove completamente la funzionalità del pulsante di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Action - destroy Questa azione rimuove completamente la funzionalità del pulsante di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Syntax |
| 2 | disattivare Questa azione disabilita la funzionalità del pulsante di un elemento. Questo metodo non accetta argomenti. Action - disable Questa azione disabilita la funzionalità del pulsante di un elemento. Questo metodo non accetta argomenti. Syntax |
| 3 | abilitare Questa azione abilita la funzionalità del pulsante di un elemento. Questo metodo non accetta argomenti. Action - enable Questa azione abilita la funzionalità del pulsante di un elemento. Questo metodo non accetta argomenti. Syntax |
| 4 | opzione (optionName) Questa azione recupera il valore dell'opzione specificata in optionName . Dove optionName è una stringa. Action - option( optionName ) Questa azione recupera il valore dell'opzione specificata in optionName . Dove optionName è una stringa. Syntax |
| 5 | opzione Questa azione recupera un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni del pulsante corrente. Action - option Questa azione recupera un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni del pulsante corrente. Syntax |
| 6 | opzione (optionName, value) Questa azione imposta il valore dell'opzione button associata all'opzione optionName specificato . Action - option( optionName, value ) Questa azione imposta il valore dell'opzione button associata all'opzione optionName specificato . Dove optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione. Syntax |
| 7 | opzione (opzioni) Questa azione imposta una o più opzioni per il pulsante. Dove opzioni è la mappa delle coppie opzione-valore da impostare. Action - option( options ) Questa azione imposta una o più opzioni per il pulsante. Dove opzioni è la mappa delle coppie opzione-valore da impostare. Syntax |
| 8 | ricaricare Questa azione aggiorna la visualizzazione del pulsante. Ciò è utile quando i pulsanti sono gestiti dal programma e il display non corrisponde necessariamente allo stato interno. Questo metodo non accetta argomenti. Action - refresh Questa azione aggiorna la visualizzazione del pulsante. Ciò è utile quando i pulsanti sono gestiti dal programma e il display non corrisponde necessariamente allo stato interno. Questo metodo non accetta argomenti. Syntax |
| 9 | aggeggio Questa azione restituisce un oggetto jQuery contenente l'elemento button. Questo metodo non accetta argomenti. Action - widget Questa azione restituisce un oggetto jQuery contenente l'elemento button. Questo metodo non accetta argomenti. Syntax |
Esempio
Vediamo ora un esempio usando le azioni della tabella sopra. Il seguente esempio dimostra l'uso dei metodi destroy () e 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>Salviamo il codice sopra in un file HTML buttonexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:
Gestione degli eventi sui pulsanti
Oltre al metodo button (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati per un particolare evento. Questi metodi di eventi sono elencati di seguito:
| Sr.No. | Metodo e descrizione dell'evento |
|---|---|
| 1 | create (evento, ui) Questo evento viene attivato quando viene creato il pulsante. Dove event è di tipo Event e ui è di tipo Object . Event - create(event, ui) Questo evento viene attivato quando viene creato l'elemento pulsante. Dove event è di tipo Event e ui è di tipo Object . Syntax |
Esempio
L'esempio seguente mostra l'utilizzo del metodo dell'evento per la funzionalità del widget pulsante. Questo esempio dimostra l'uso di event 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>Salviamo il codice sopra in un file HTML buttonexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output: