jQuery UI instance - Button (Bouton)
Avec une utilisation appropriée hover (hover) et activation styles (actifs) peuvent être bouton thème pour améliorer les éléments de formulaire standard (tels que des boutons, des boîtes d'entrée, ancre) fonction.
Pour plus de détails sur les composants de bouton, consultez la documentation de l' API élément de bouton (le bouton du Widget) .
La fonction par défaut
Des exemples de marqueurs peuvent être utilisés pour les boutons: un élément de bouton, un type d'éléments d'entrée et de présenter un point d'ancrage.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> bouton jQuery UI (Button) - La fonction par défaut </ 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 = soumettre], un bouton")
.button ()
.cliquez (function (event) {
event.preventDefault ();
});
});
</ Script>
</ Head>
<Body>
<Bouton> élément d'un bouton </ button>
<Input type = "submit" value = "Soumettre un bouton">
<a href="#"> un </a> d'ancrage
</ Body>
</ Html>
Checkbox
Par le biais de la boîte bouton de contrôle est un style de bouton à bascule. Éléments d'étiquetage associés à la boîte que le texte du bouton.
Dans ce cas , en faisant appel à un conteneur publique .buttonset() , comme le montre trois boutons d' affichage des styles boîte.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> bouton jQuery UI (Button) - case à cocher </ 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 = "vérifier"> <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>
icône
Certains avec diverses combinaisons de touches de texte et des icônes
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> bouton jQuery UI (Button) - icône </ 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: d'abord") .button ({
icônes: {
primaire: "ui-icon-verrouillé"
},
texte: false
}). Suivant (). Button ({
icônes: {
primaire: "ui-icon-verrouillé"
}
}). Suivant (). Button ({
icônes: {
primaire: "ui-icon-gear",
secondaire: "ui-icon-triangle-1-s"
}
}). Suivant (). Button ({
icônes: {
primaire: "ui-icon-gear",
secondaire: "ui-icon-triangle-1-s"
},
texte: false
});
});
</ Script>
</ Head>
<Body>
<Bouton> bouton icône avec seulement </ button>
<Bouton> icône bouton sur la gauche </ button>
<Bouton> bouton avec deux icônes </ button>
<Bouton> avec deux boutons avec du texte icône sans </ button>
</ Body>
</ Html>
radio
Trois boutons radio dans un bouton.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> bouton UI jQuery (Button) - 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"> Sélectionnez 1 </ label>
<Input type = "radio" id = "radio2" name = "radio" checked = "checked"> <label for = "radio2"> sélectionner 2 </ label>
<Input type = "radio" id = "radio3" name = "radio"> <label for = "radio3"> Sélectionnez 3 </ label>
</ Div>
</ Form>
</ Body>
</ Html>
bouton de Split
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> bouton jQuery UI (Bouton) - Bouton de Split </ 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; largeur: 100px;}
</ Style>
<Script>
$ (Function () {
$ ( "#rerun")
.button ()
.cliquez (function () {
alert ( "Exécution de la dernière action");
})
.next ()
.button ({
texte: false,
icônes: {
primaire: "ui-icon-triangle-1-s"
}
})
.cliquez (function () {
menu var = $ (this) .parent (). next (). show () la position. ({
ma: "en haut à gauche»,
à: "en bas à gauche",
de: ceci
});
$ (Document) .one ( "click", function () {
menu.hide ();
});
return false;
})
.parent ()
.buttonset ()
.next ()
.hide ()
.menu ();
});
</ Script>
</ Head>
<Body>
<Div>
<Div>
<Bouton id = "rerun"> Exécuter dernière action </ button>
<Bouton id = "select"> sélectionner une action </ button>
</ Div>
<Ul>
<Li> <a href="#"> ouvert ... </a> </ li>
<Li> <a href="#"> enregistrer </a> </ li>
<Li> <a href="#"> supprimer </a> </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
barre d'outils
Une barre d'outils de lecteur multimédia. Regardez basé-marqueurs: Certains élément de bouton, le bouton Shuffle est une case à cocher pour le type d'entrée, les options de répétition sont trois types d'entrée radio.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> bouton UI jQuery (Button) - Barre d'outils </ 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;
}
/ * Support: IE7 * /
* + Html #toolbar {
display: inline;
}
</ Style>
<Script>
$ (Function () {
$ ( "#beginning") .button ({
texte: false,
icônes: {
primaire: "ui-icon-cache-start"
}
});
$ ( "#rewind") .button ({
texte: false,
icônes: {
primaire: "ui-icon-cache-prev"
}
});
$ ( "#play") .button ({
texte: false,
icônes: {
primaire: "ui-icon-play"
}
})
.cliquez (function () {
var options;
if ($ (this) .text () === "play") {
options = {
label: "pause",
icônes: {
primaire: "ui-icon-pause"
}
};
} Else {
options = {
label: "jouer",
icônes: {
primaire: "ui-icon-play"
}
};
}
$ (Ce) .button ( "option", options);
});
$ ( "#stop") .button ({
texte: false,
icônes: {
primaire: "ui-icon-stop"
}
})
.cliquez (function () {
$ ( "#play") .button ( "Option", {
label: "jouer",
icônes: {
primaire: "ui-icon-play"
}
});
});
$ ( "#forward") .button ({
texte: false,
icônes: {
primaire: "ui-icon-cache-next"
}
});
$ ( "#end") .button ({
texte: false,
icônes: {
primaire: "ui-icon-cache-end"
}
});
$ ( "#shuffle") .button ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Div id = "toolbar" class = "ui-widget-tête ui-coin-all">
<Bouton id = "début"> commençant </ button>
<Bouton id = "rewind"> rembobinage </ button>
<Bouton id = "jouer"> Lecture </ button>
<Bouton id = "stop"> Arrêter </ button>
<Bouton id = "avant"> Avance rapide </ button>
<Bouton id = "end"> end </ button>
<Input type = "checkbox" id = "shuffle"> <label for = "shuffle"> Lecture aléatoire </ label>
<Span id = "répéter">
<Input type = "radio" id = "repeat0" name = "répéter" checked = "checked"> <label for = "repeat0"> No Repeat </ label>
<Input type = "radio" id = nom de "REPEAT1" = "répéter"> <label for = "REPEAT1"> Une fois </ label>
<Input type = "radio" id = "repeatall" name = "répéter"> <label for = "repeatall"> Tous </ label>
</ Span>
</ Div>
</ Body>
</ Html>