jQuery UI esempio - Button (Pulsante)
Con adeguato hover uso (hover) e l'attivazione di stili (attivi) possono essere a tema tasto per aumentare gli elementi del modulo standard (quali pulsanti, caselle di input, ancora) la funzione.
Per ulteriori dettagli sui componenti Button, consultare la documentazione API membro pulsante (il pulsante il Widget) .
La funzione di default
Esempi di marcatori possono essere usati per i pulsanti: un elemento tasto, un tipo di elementi di ingresso e di presentare un ancoraggio.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI pulsante (Button) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 = presentare], una, pulsante")
apri un ()
.Click (function (evento) {
event.preventDefault ();
});
});
</ Script>
</ Head>
<Body>
<Button> elemento di un pulsante </ button>
<Input type = "submit" value = "Invia un pulsante">
<a href="#"> un'ancora </a>
</ Corpo>
</ Html>
casella di controllo
Tramite la casella di controllo Button è uno stile di pulsante di commutazione. Elementi etichetta associata con la scatola come il testo del pulsante.
In questo caso chiamando su un contenitore pubblico .buttonset() , come dimostrato tre casella di visualizzazione stili di pulsanti.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> pulsante jQuery UI (Button) - casella di controllo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Verifica") apri un ();
$ ( "#format") .buttonset ();
});
</ Script>
<Style>
#format {margin-top: 2em;}
</ Style>
</ Head>
<Body>
<Input type = "checkbox" id = "check"> <label for = "check"> interruttore </ 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>
</ Corpo>
</ Html>
icona
Alcune con varie combinazioni di tasti di testo e icona
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI pulsante (Button) - icona </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: prima") apri un ({
Icone: {
primaria: "ui-icon-locked"
},
Testo: false
}). Avanti (). Pulsante ({
Icone: {
primaria: "ui-icon-locked"
}
}). Avanti (). Pulsante ({
Icone: {
primaria: "ui-icon-gear",
secondaria: "ui-icon-triangolo-1-s"
}
}). Avanti (). Pulsante ({
Icone: {
primaria: "ui-icon-gear",
secondaria: "ui-icon-triangolo-1-s"
},
Testo: false
});
});
</ Script>
</ Head>
<Body>
<Button> pulsante con l'icona con un solo tasto </>
<Button> pulsante con l'icona a sinistra </ button>
<Button> pulsante con due icone </ button>
<Button> con due pulsanti con l'icona di testo senza <tasto />
</ Corpo>
</ Html>
radio
Tre pulsanti di opzione in un pulsante.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI pulsante (Button) - Radio </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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"> Selezionare 1 </ label>
<Input type = "radio" id = "Radio2" name = "radio" controllata = "controllata"> <label for = "Radio2"> selezionare 2 </ label>
<Input type = "radio" id = "Radio3" name = "radio"> <label for = "Radio3"> Selezionare 3 </ label>
</ Div>
</ Form>
</ Corpo>
</ Html>
pulsante Dividi
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI pulsante (Button) - Button Split </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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")
apri un ()
.Click (function () {
alert ( "Esecuzione l'ultima azione");
})
.Next ()
apri un ({
Testo: false,
Icone: {
primaria: "ui-icon-triangolo-1-s"
}
})
.Click (function () {
menù var = posizione $ (this) .parent (). successivo (). show (). ({
il mio: "in alto a sinistra",
in: "in basso a sinistra",
di: questo
});
$ (Document) .one ( "click", function () {
menu.hide ();
});
return false;
})
.parent ()
.buttonset ()
.Next ()
.nascosto ()
.menu ();
});
</ Script>
</ Head>
<Body>
<Div>
<Div>
<Button id = "replica"> Esegui ultima azione <tasto />
<Button id = "selezionare"> selezionare un'azione </ button>
</ Div>
<Ul>
<Li> <a href="#"> aperta ... </a> </ li>
<Li> <a href="#"> salvare </a> </ li>
<Li> <a href="#"> eliminare </a> </ li>
</ Ul>
</ Div>
</ Corpo>
</ Html>
Barra degli strumenti
Una barra degli strumenti lettore multimediale. marcatori Look-based: qualche elemento, pulsante Shuffle è una casella di controllo per il tipo di ingresso, opzioni di ripetizione sono tre tipi di ingresso radio.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI pulsante (Button) - Barra degli strumenti </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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;
}
/ * Supporto: IE7 * /
* + #toolbar Html {
display: inline;
}
</ Style>
<Script>
$ (Function () {
$ ( "#beginning") Apri un ({
Testo: false,
Icone: {
primaria: "ui-icon-cercare-start"
}
});
$ ( "#rewind") Apri un ({
Testo: false,
Icone: {
primaria: "ui-icon-cercare prev"
}
});
$ ( "#play") Apri un ({
Testo: false,
Icone: {
primaria: "ui-icon-play"
}
})
.Click (function () {
var options;
if ($ (this) .text () === "play") {
options = {
Etichetta: "mettere in pausa",
Icone: {
primaria: "ui-icon-pause"
}
};
} Else {
options = {
Etichetta: "play",
Icone: {
primaria: "ui-icon-play"
}
};
}
$ (This) apri un ( "opzione", opzioni);
});
$ ( "#stop") Apri un ({
Testo: false,
Icone: {
primaria: "ui-icon-stop"
}
})
.Click (function () {
$ ( "#play") Apri un ( "Option", {
Etichetta: "play",
Icone: {
primaria: "ui-icon-play"
}
});
});
$ ( "#forward") Apri un ({
Testo: false,
Icone: {
primaria: "ui-icon-cercare-next"
}
});
$ ( "#end") Apri un ({
Testo: false,
Icone: {
primaria: "ui-icon-cercare-end"
}
});
$ ( "#shuffle") Apri un ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Div id = "barra degli strumenti" class = "ui-widget di intestazione-ui-angolo-all">
<Button id = "inizio"> inizio </ button>
<Button id = "rewind"> rewind </ button>
<Button id = "giocare"> Gioca </ button>
<Button id = "stop"> stop </ button>
<Button id = "avanti"> Avanti veloce </ button>
<Button id = "fine"> fine <button />
<Input type = "checkbox" id = "shuffle"> <label for = "shuffle"> Shuffle </ label>
<Span id = "repeat">
<Input type = "radio" id = "repeat0" name = "ripetere" controllato = "controllata"> <label for = "repeat0"> No Repeat </ label>
<Input type = "radio" id = nome "repeat1" = "repeat"> <label for = "repeat1"> Una volta </ label>
<Input type = "radio" id = "repeatall" name = "repeat"> <label for = "repeatall"> Tutti </ label>
</ Span>
</ Div>
</ Corpo>
</ Html>