jQuery UI exemplo - Button (Botão)
Com foco apropriado uso (pairar) e ativação (ativos) estilos podem ser botão temático para reforçar os elementos de formulário padrão (como botões, caixas de entrada, âncora) função.
Para mais detalhes sobre os componentes de botão, consulte a documentação da API membro (o botão do Widget) .
A função padrão
Exemplos de marcadores pode ser usado para botões: um elemento de botão, um tipo de elementos de entrada e de apresentar uma âncora.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> botão jQuery UI (Button) - A função padrão </ 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 = submeter], a, botão") .button () .click (function (event) { event.preventDefault (); }); }); </ Script> </ Head> <Body> <Button> elemento de um botão </ button> <Input type = "submit" value = "Enviar um botão"> <a href="#"> uma âncora </a> </ Body> </ Html>
Caixa de seleção
Por meio da caixa de seleção botão é um estilo de botão de alternância. elementos do rótulo associado à caixa como o texto do botão.
Neste caso, invocando um recipiente pública .buttonset()
, como demonstrado três tela caixa de estilos de botão.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> botão jQuery UI (Button) - caixa de seleção </ 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 = "cheque"> interruptor </ label> <Div id = "formato"> <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>
ícone
Alguns com várias combinações de texto e botões de ícone
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> botão jQuery UI (Button) - ícone </ 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: em primeiro lugar") .button ({ Ícones: { primária: "ui-icon-bloqueado" }, texto: false }). Next (). Botão ({ Ícones: { primária: "ui-icon-bloqueado" } }). Next (). Botão ({ Ícones: { primária: "ui-icon-gear", secundário: "ui-icon-triângulo-1-s" } }). Next (). Botão ({ Ícones: { primária: "ui-icon-gear", secundário: "ui-icon-triângulo-1-s" }, texto: false }); }); </ Script> </ Head> <Body> <Button> botão de ícone com apenas </ button> <Button> botão ícone à esquerda </ button> <Button> botão com dois ícones </ button> <Button> com dois botões com o ícone de texto sem </ button> </ Body> </ Html>
rádio
Três botões de rádio em um botão.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> botão jQuery UI (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"> Selecione 1 </ label> <Input type = "radio" id = "Radio2" name = "radio" checked = "checked"> <label for = "Radio2"> selecione 2 </ label> <Input type = "radio" id = "Radio3" name = "radio"> <label for = "Radio3"> Selecionar 3 </ label> </ Div> </ Form> </ Body> </ Html>
botão de divisão
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> botão jQuery UI (Button) - Botão 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; width: 100px;} </ Style> <Script> $ (Function () { $ ( "#rerun") .button () .click (function () { alert ( "Executando a última acção"); }) .next () .button ({ texto: false, Ícones: { primária: "ui-icon-triângulo-1-s" } }) .click (function () { menu de var = $ (this) .parent (). next (). show (). posição ({ meu: "superior esquerdo", em: "baixo à esquerda", de: este }); $ (Documento) .one ( "click", function () { menu.hide (); }); return false; }) .parent () .buttonset () .next () .hide () .menu (); }); </ Script> </ Head> <Body> <Div> <Div> <Button id = "reprise"> Executar última ação </ button> <Button id = "select"> selecione uma ação </ button> </ Div> <Ul> <Li> <a href="#"> aberto pt. </a> </ li> <Li> <a href="#"> salvar </a> </ li> <Li> <a href="#"> excluir </a> </ li> </ Ul> </ Div> </ Body> </ Html>
Toolbar
A barra de ferramentas do leitor multimédia. marcadores olhar à base de: Algum elemento, botão Shuffle é uma caixa de seleção para o tipo de entrada, opções de Repetição três tipos de entrada de rádio.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> botão jQuery UI (Button) - Barra de Ferramentas </ 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; } / * Apoio: IE7 * / * + #toolbar Html { display: inline; } </ Style> <Script> $ (Function () { $ ( "#beginning") .button ({ texto: false, Ícones: { primária: "ui-icon-procuram-start" } }); $ ( "#rewind") .button ({ texto: false, Ícones: { primária: "ui-icon-procuram-prev" } }); $ ( "#play") .button ({ texto: false, Ícones: { primária: "ui-icon-play" } }) .click (function () { opções var; if ($ (this) .text () === "play") { options = { label: "pausa", Ícones: { primária: "ui-icon-pause" } }; } Else { options = { label: "play", Ícones: { primária: "ui-icon-play" } }; } $ (Este) .button ( "Opção", opções); }); $ ( "#PARAR") .button ({ texto: false, Ícones: { primária: "ui-icon-stop" } }) .click (function () { $ ( "#play") .button ( "Opção", { label: "play", Ícones: { primária: "ui-icon-play" } }); }); $ ( "#forward") .button ({ texto: false, Ícones: { primária: "ui-icon-procurar a próxima" } }); $ ( "# End") .button ({ texto: false, Ícones: { primária: "ui-icon-procuram-end" } }); $ ( "#shuffle") .button (); $ ( "#repeat") .buttonset (); }); </ Script> </ Head> <Body> <Div id = "barra de ferramentas" class = "ui-widget-header ui-canto-all"> <Button id = "início"> início </ button> <Button id = "rebobinar"> retrocesso </ button> <Button id = "jogar"> Jogar </ button> <Button id = "parar"> Parar </ button> <Button id = "forward"> Fast forward </ button> <Button id = "end"> end </ button> <Input type = "checkbox" id = "shuffle"> <label for = "shuffle"> Mistura </ label> <Span id = "repetir"> <Input type = "radio" id = "repeat0" name = "repetir" checked = "checked"> <label for = "repeat0"> No Repeat </ label> <Input type = "radio" id = "REPEAT1" name = "repetir"> <label for = "REPEAT1"> Uma vez </ label> <Input type = "radio" id = "repeatall" name = "repetir"> <label for = "repeatall"> Todos </ label> </ Span> </ Div> </ Body> </ Html>