jQuery UI instancji - Button (Przycisk)
Z właściwego stosowania zawisu (Umieszczenie) i aktywacji (aktywne) style można przycisku tematycznych w celu zwiększenia standardowe elementy postaci (takich jak guziki, pól wpisu, kotwica) funkcji.
Aby uzyskać więcej informacji na temat składników przycisków można znaleźć w dokumentacji API element przycisku (widżet) .
Domyślną funkcją
Przykłady markerów może być używany do przycisków: element przycisku, rodzaj elementów wejściowych i złożyć kotwicę.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Przycisk jQuery UI (przycisk) - Domyślna funkcja </ 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 = submit], a, przycisk")
.button ()
.Kliknij (function (event) {
event.preventDefault ();
});
});
</ Script>
</ Head>
<Body>
<Button> element przycisku </ button>
<Input type = "submit" value = "Zatwierdź przyciskiem">
<a href="#"> się </a> kotwicy
</ Body>
</ Html>
pole wyboru
Za pomocą przycisku pole wyboru jest styl Przycisk przełączający. Elementy oznakowania związane z pudełka, co tekst przycisku.
W tym przypadku, wzywając publicznego kontenera .buttonset() , na co wskazują trzy style wyświetlania okna przycisk.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Przycisk jQuery UI (przycisk) - pole </ 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 = "check"> <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>
ikona
Niektóre z różnymi kombinacjami przycisków tekstowych oraz ikony
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Przycisk jQuery UI (przycisk) - ikona </ 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: najpierw") .button ({
Ikony: {
Podstawowym "ui-icon-locked"
}
Tekst: false
}). Następnie (). Przycisk ({
Ikony: {
Podstawowym "ui-icon-locked"
}
}). Następnie (). Przycisk ({
Ikony: {
Podstawowym "ui-icon-gear"
wtórne: "ui-icon-trójkąt-1-s"
}
}). Następnie (). Przycisk ({
Ikony: {
Podstawowym "ui-icon-gear"
wtórne: "ui-icon-trójkąt-1-s"
}
Tekst: false
});
});
</ Script>
</ Head>
<Body>
<Przycisk> ikona przycisku tylko przycisku </>
<Przycisk> ikona przycisku po lewej </ button>
<Button> Przycisk z dwoma ikonami </ button>
<Button> dwa przyciski z ikoną tekst bez przycisku </>
</ Body>
</ Html>
radio
Trzy przyciski radiowe do przycisku.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Przycisk UI jQuery (przycisk) - 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"> Wybierz 1 </ label>
<Input type = sprawdzone "radio" id = "radio2" name = "radio" = "zaznaczone"> <label for = "radio2"> wybierz opcję 2 </ label>
<Input type = "radio" id = "radio3" name = "radio"> <label for = "radio3"> Wybierz 3 </ label>
</ Div>
</ Form>
</ Body>
</ Html>
przycisk Splicie
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Przycisk jQuery UI (przycisk) - Split Przycisk </ 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; width: 100px;}
</ Style>
<Script>
$ (Function () {
$ ( "#rerun")
.button ()
.Kliknij (function () {
alert ( "Running ostatnią akcję");
})
.next ()
.button ({
Tekst: false,
Ikony: {
Podstawowym "ui-icon-trójkąt-1-s"
}
})
.Kliknij (function () {
Menu var = $ (this) .parent (). next (). show (). Pozycja ({
moim: "lewy górny"
pod adresem: "lewy dolny"
o: to
});
$ (Document) .one ( "click", function () {
menu.hide ();
});
return false;
})
.parent ()
.buttonset ()
.next ()
.hide ()
.menu ();
});
</ Script>
</ Head>
<Body>
<Div>
<Div>
<Button id = "powtórka"> Uruchom ostatnia akcja </ button>
<Button id = "select"> wybierz akcję </ button>
</ Div>
<Ul>
<Li> <a href="#"> otwarta ... </a> </ li>
<Li> <a href="#"> zapisać </a> </ li>
<Li> <a href="#"> usuwać </a> </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
Toolbar
Pasek narzędzi odtwarzacz multimedialny. Spójrz na bazie znaczników: Niektóre elementem, przycisk Shuffle to pole wyboru typu wejścia, opcje powtarzania są trzy rodzaje wejść radiowej.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Przycisk UI jQuery (przycisk) - pasek narzędzi </ 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;
}
/ * Wsparcie: IE7 * /
* + Html #toolbar {
display: inline;
}
</ Style>
<Script>
$ (Function () {
$ ( "#beginning") .button ({
Tekst: false,
Ikony: {
Podstawowym "ui-ikona chowanego-start"
}
});
$ ( "#rewind") .button ({
Tekst: false,
Ikony: {
Podstawowym "ui-ikona chowanego-prev"
}
});
$ ( "#play") .button ({
Tekst: false,
Ikony: {
Podstawowym "ui-icon-play"
}
})
.Kliknij (function () {
var options;
if ($ (this) .text () === "play") {
options = {
Etykieta: "pause"
Ikony: {
Podstawowym "ui-icon-pause"
}
};
} Else {
options = {
Etykieta: "play",
Ikony: {
Podstawowym "ui-icon-play"
}
};
}
$ (This) .button ( "Opcja", opcje);
});
$ ( "#stop") .button ({
Tekst: false,
Ikony: {
Podstawowym "ui-icon-stop"
}
})
.Kliknij (function () {
$ ( "#play") .button ( "Opcja", {
Etykieta: "play",
Ikony: {
Podstawowym "ui-icon-play"
}
});
});
$ ( "#forward") .button ({
Tekst: false,
Ikony: {
Podstawowym "ui-ikona chowanego-next"
}
});
$ ( "#end") .button ({
Tekst: false,
Ikony: {
Podstawowym "ui-ikona chowanego-end"
}
});
$ ( "#shuffle") .button ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Div id = "toolbar" class = "widget-ui ui-header-corner-all">
<Button id = "początek"> początek </ button>
<Button id = "do tyłu"> zwijanie </ button>
<Button id = "play"> Odtwórz </ button>
<Button id = "stop"> Zatrzymaj </ button>
<Button id = "do przodu"> Przewijanie do przodu </ button>
<Button id = "end"> koniec przycisk </>
<Input type = "checkbox" id = "Shuffle"> <label for = "Shuffle"> Shuffle </ label>
<Span id = "repeat">
<Input type = "radio" id = "repeat0" name = "repeat" zaznaczone = "zaznaczone"> <label = "repeat0"> No Repeat </ label>
<Input type = "radio" id = "Powtarzanie 1" name = "repeat"> <label = "Powtarzanie 1"> Po </ label>
<Input type = "radio" id = "repeatall" name = "repeat"> <label = "repeatall"> Wszystkie </ label>
</ Span>
</ Div>
</ Body>
</ Html>