jQuery UI exemplo - select (selecionável)
Use o mouse para selecionar um único elemento ou grupo de elementos.
Para mais detalhes sobre a interação selecionável, consulte a documentação da API pode selecionar widgets (o selecionável o Widget) .
A função padrão
Permitindo funções selecionáveis ou em um grupo de elementos em um elemento DOM. Selecione a entrada, arrastando o mouse. Mantenha pressionada a tecla Ctrl para selecionar várias entradas não contíguas.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI selecção (selecionável) - 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">
<Style>
#feedback {font-size: 1.4em;}
#selectable-selecionando .ui {background: # FECA40;}
#selectable-selecionados .ui {background: # F39814; color: white;}
#selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
li #selectable {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
</ Style>
<Script>
$ (Function () {
$ ( "#selectable") .selectable ();
});
</ Script>
</ Head>
<Body>
<Ol id = "selecionável">
<LI class = "ui-widget-content"> Item 1 </ li>
<LI class = "ui-widget-content"> Item 2 </ li>
<LI class = "ui-widget-content"> Item 3 </ li>
<LI class = "ui-widget-content"> Item 4 </ li>
<LI class = "ui-widget-content"> Item 5 </ li>
<LI class = "ui-widget-content"> Item 6 </ li>
<LI class = "ui-widget-content"> Item 7 </ li>
</ Ol>
</ Body>
</ Html>
Ele é exibido como uma grade
Deixe entrada seleccionável é mostrado como uma grade, de modo que eles usam CSS com as mesmas dimensões e a tela flutuante.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> seleção jQuery UI (selecionável) - exibir uma grade </ 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>
#feedback {font-size: 1.4em;}
#selectable-selecionando .ui {background: # FECA40;}
#selectable-selecionados .ui {background: # F39814; color: white;}
#selectable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
li #selectable {margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4EM; text-align: center;}
</ Style>
<Script>
$ (Function () {
$ ( "#selectable") .selectable ();
});
</ Script>
</ Head>
<Body>
<Ol id = "selecionável">
<Li class = "ui-estado-padrão"> 1 </ li>
<Li class = "ui-estado-padrão"> 2 </ li>
<Li class = "ui-estado-padrão"> 3 </ li>
<Li class = "ui-estado-padrão"> 4 </ li>
<Li class = "ui-estado-padrão"> 5 </ li>
<Li class = "ui-estado-padrão"> 6 </ li>
<Li class = "ui-estado-padrão"> 7 </ li>
<Li class = "ui-estado-padrão"> 8 </ li>
<Li class = "ui-estado-padrão"> 9 </ li>
<Li class = "ui-estado-padrão"> 10 </ li>
<Li class = "ui-estado-padrão"> 11 </ li>
<Li class = "ui-estado-padrão"> 12 </ li>
</ Ol>
</ Body>
</ Html>
serialização
Escrever uma função que stop quando um evento de disparo para recolher o valor itens índice selecionado. Estes valores são apresentados como realimentação, ou sob a forma de uma cadeia de transferência de dados.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> seleção jQuery UI (selecionável) - serializado </ 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>
#feedback {font-size: 1.4em;}
#selectable-selecionando .ui {background: # FECA40;}
#selectable-selecionados .ui {background: # F39814; color: white;}
#selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
li #selectable {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
</ Style>
<Script>
$ (Function () {
$ ( "#selectable") .selectable ({
parar: function () {
var result = $ ( "# selecione-result") .empty ();
$ ( "Selected .ui-", this) .each (function () {
índice var = $ ( "li #selectable") .index (this);
result.append ( "#" + (índice + 1));
});
}
});
});
</ Script>
</ Head>
<Body>
<P id = "retorno">
<Span> Você selecionou: </ span> <span id = "select-resultado"> Não </ span>.
</ P>
<Ol id = "selecionável">
<LI class = "ui-widget-content"> Item 1 </ li>
<LI class = "ui-widget-content"> Item 2 </ li>
<LI class = "ui-widget-content"> Item 3 </ li>
<LI class = "ui-widget-content"> Item 4 </ li>
<LI class = "ui-widget-content"> Item 5 </ li>
<LI class = "ui-widget-content"> Item 6 </ li>
</ Ol>
</ Body>
</ Html>