jQuery UI-Instanz - Schaltfläche (Button)
Bei entsprechender Verwendung schweben (Hover) und Aktivierung (aktiv) Stile können Taste werden Themen die Standard-Formularelemente (wie Schaltflächen, Eingabefelder, Anker) Funktion zu verbessern.
Für weitere Informationen über Button - Komponenten finden Sie in der API - Dokumentation Knopfelement (die Schaltfläche das Widget) .
Die Standardfunktion
Beispiele für Marker können für Tasten verwendet werden: ein Knopfelement, eine Art von Eingabeelementen und einen Anker zu unterbreiten.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Schaltfläche (Button) - Die Standardfunktion </ 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 = einreichen], a, Button")
.Taste ()
.click (function (event) {
Event.preventDefault ();
});
});
</ Script>
</ Head>
<Body>
<Button> Element einer Taste </ button>
<Input type = "submit" value = "Einen Button">
<a href="#"> einen Anker </a>
</ Body>
</ Html>
Checkbox
Mit Hilfe der Schaltfläche Kontrollkästchen ist eine umschaltbare Schaltfläche Stil. Kennzeichnungselemente mit der Box als die Schaltfläche Text zugeordnet ist.
In diesem Fall wird durch den Aufruf auf einen öffentlichen Container .buttonset() , als drei Display - Taste Stile Feld unter Beweis gestellt.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Schaltfläche (Button) - Checkbox </ 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") .Taste ();
$ ( "#format") .buttonset ();
});
</ Script>
<Style>
#format {margin-top: 2em;}
</ Style>
</ Head>
<Body>
<Input type = "checkbox" id = "überprüfen"> <label for = "check"> Schalter </ 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 = "PRÜFUNG3Haben"> <label for = "PRÜFUNG3Haben"> U </ label>
</ Div>
</ Body>
</ Html>
Symbol
Einige mit verschiedenen Kombinationen von Text und Symbol-Tasten
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Schaltfläche (Button) - Symbol </ 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: first") .Taste ({
Symbole: {
Primär: "ui-icon-locked"
},
Text: false
}). Next (). Button ({
Symbole: {
Primär: "ui-icon-locked"
}
}). Next (). Button ({
Symbole: {
Primär: "ui-icon-Gang",
sekundär: "ui-icon-Dreieck-1-s"
}
}). Next (). Button ({
Symbole: {
Primär: "ui-icon-Gang",
sekundär: "ui-icon-Dreieck-1-s"
},
Text: false
});
});
</ Script>
</ Head>
<Body>
<Button> Symbolschaltfläche mit nur </ button>
<Button> Symbol-Taste auf der linken Seite </ button>
<Button> Taste mit zwei Symbole </ button>
<Button> mit zwei Tasten mit Text-Symbol ohne </ button>
</ Body>
</ Html>
Radio
Drei Radiobuttons in einer Schaltfläche.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Schaltfläche (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"> Wählen Sie 1 </ label>
<Input type = "radio" id = "radio2" name = "radio" checked = "checked"> <label for = "radio2"> wählen 2 </ label>
<Input type = "radio" id = "radio3" name = "radio"> <label for = "radio3"> Wählen Sie 3 </ label>
</ Div>
</ Form>
</ Body>
</ Html>
Split-Taste
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Schaltfläche (Button) - Split-Taste </ 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-Menü {position: absolute; width: 100px;}
</ Style>
<Script>
$ (Function () {
$ ( "#rerun")
.Taste ()
.click (function () {
alert ( "Ausführen der letzten Aktion");
})
.next ()
.Taste ({
Text: false,
Symbole: {
Primär: "ui-icon-Dreieck-1-s"
}
})
.click (function () {
var menu = $ (this) .parent (). next (). show (). Position ({
my: "links oben",
an: "links unten",
von: diese
});
$ (Dokument) .one ( "Klick", function () {
menu.hide ();
});
return false;
})
.parent ()
.buttonset ()
.next ()
.Hide ()
.menu ();
});
</ Script>
</ Head>
<Body>
<Div>
<Div>
<Button id = "Rerun"> Führen Sie die letzte Aktion </ button>
<Button id = "select"> wählen Sie eine Aktion </ button>
</ Div>
<Ul>
<Li> <a href="#"> offen ... </a> </ li>
<Li> <a href="#"> speichern </a> </ li>
<Li> <a href="#"> löschen </a> </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
Toolbar
Ein Multimedia-Player-Symbolleiste. Look-basierte Marker: Einige Knopfelement, Shuffle-Taste ist eine Checkbox für die Art der Eingabe, Repeat-Optionen sind drei Arten von Funkeingabe.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Schaltfläche (Button) - Toolbar </ 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") .Taste ({
Text: false,
Symbole: {
Primär: "ui-icon-seek-Start"
}
});
$ ( "#rewind") .Taste ({
Text: false,
Symbole: {
Primär: "ui-icon-seek-prev"
}
});
$ ( "#play") .Taste ({
Text: false,
Symbole: {
Primär: "ui-icon-play"
}
})
.click (function () {
var Optionen;
if ($ (this) .text () === "spielen") {
options = {
label: "Pause",
Symbole: {
Primär: "ui-icon-Pause"
}
};
} Else {
options = {
Label: "Play",
Symbole: {
Primär: "ui-icon-play"
}
};
}
$ (Diese) .Taste ( "Option", Optionen);
});
$ ( "#stop") .Taste ({
Text: false,
Symbole: {
Primär: "ui-icon-stop"
}
})
.click (function () {
$ ( "#play") .Taste ( "Option", {
Label: "Play",
Symbole: {
Primär: "ui-icon-play"
}
});
});
$ ( "#forward") .Taste ({
Text: false,
Symbole: {
Primär: "ui-icon-seek-next"
}
});
$ ( "# End") .Taste ({
Text: false,
Symbole: {
Primär: "ui-icon-seek-end"
}
});
$ ( "#shuffle") .Taste ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Div id = "Symbolleiste" class = "ui-Widget-Header ui-Ecke-all">
<Button id = "Anfang"> Anfang </ button>
<Button id = "zurückspulen"> rewind </ button>
<Button id = "spielen"> Wiedergabe </ button>
<Button id = "stop"> Stop </ button>
<Button id = "vorwärts"> Schneller Vorlauf </ button>
<Button id = "end"> Ende </ button>
<Input type = "checkbox" id = "shuffle"> <label for = "shuffle"> Shuffle </ label>
<Span id = "repeat">
<Input type = "radio" id = "repeat0" name = "repeat" checked = "checked"> <label for = "repeat0"> Keine Wiederholung </ label>
<Input type = "radio" id = "REPEAT1" name = "repeat"> <label for = "REPEAT1"> Sobald </ label>
<Input type = "radio" id = "repeatall" name = "repeat"> <label for = "repeatall"> Alle </ label>
</ Span>
</ Div>
</ Body>
</ Html>