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 ... </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>