jQuery UI esempio - l'ordinamento (ordinabili)
Usa il mouse per regolare gli elementi della lista o di griglia in ordine.
Per maggiori dettagli su l'interazione ordinabili, consultare la documentazione API widget ordinabili (ordinabile il Widget) .
La funzione di default
Ordinabili funzione è attivata su qualsiasi DOM elemento. Fare clic e trascinare il mouse per l'elenco degli elementi di una nuova posizione, gli altri elementi verranno regolati automaticamente. Per impostazione predefinita, ordinabile ogni voce condivisa draggable attributo.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di smistamento (ordinabili) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
Li #sortable {margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
# Ordinabili Li arco {position: absolute; margin-left: 1.3em-;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "ordinabile">
<Li class = "ui-stato-default"> <span class = "ui ui-icon-icon-arrowthick-2-ns"> </ span> Articolo 1 </ li>
<Li class = "ui-stato-default"> <span class = "ui ui-icon-icon-arrowthick-2-ns"> </ span> Articolo 2 </ li>
<Li class = "ui-stato-default"> <span class = "ui ui-icon-icon-arrowthick-2-ns"> </ span> Articolo 3 </ li>
<Li class = "ui-stato-default"> <span class = "ui ui-icon-icon-arrowthick-2-ns"> </ span> Articolo 4 </ li>
<Li class = "ui-stato-default"> <span class = "ui ui-icon-icon-arrowthick-2-ns"> </ span> Articolo 5 </ li>
<Li class = "ui-stato-default"> <span class = "ui ui-icon-icon-arrowthick-2-ns"> </ span> Articolo 6 </ li>
<Li class = "ui-stato-default"> <span class = "ui ui-icon-icon-arrowthick-2-ns"> </ span> Articolo 7 </ li>
</ Ul>
</ Corpo>
</ Html>
Elenco connessioni
Per passare attraverso un selettore connectWith possibilità di mettere un elenco degli elementi nella lista ordinata ad un altro, e viceversa. Il modo più semplice è con un elenco di tutti i gruppi rilevanti di una classe CSS, e poi passare la classe alla funzione ordinabili (ad esempio, connectWith: '.myclass' ).
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di smistamento (ordinabili) - Lista di collegamento </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;}
# Sortable1 Li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2"). Ordinabili ({
connectWith: ".connectedSortable"
}) DisableSelection ().;
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable1" class = "connectedSortable">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li class = "ui-stato-default"> Articolo 2 </ li>
<Li class = "ui-stato-default"> Articolo 3 </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
<Li class = "ui-stato-default"> Articolo 5 </ li>
</ Ul>
<Ul id = "sortable2" class = "connectedSortable">
<li class="ui-state-highlight"> Articolo 1 </ li>
<Li class = "ui-stato-highlight"> Articolo 2 </ li>
<Li class = "ui-stato-highlight"> Articolo 3 </ li>
<Li class = "ui-stato-highlight"> Articolo 4 </ li>
<Li class = "ui-stato-highlight"> Articolo 5 </ li>
</ Ul>
</ Corpo>
</ Html>
Collegamento Lista scheda
Inserendo la parte superiore delle voci di elenco alla scheda appropriata per mettere un elenco degli elementi nella lista ordinata ad un altro, e viceversa.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di smistamento (ordinabili) - elenco connessione scheda </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1 Li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") ordinabili () DisableSelection ()..;
var $ schede = $ ( "#tabs") .tabs ();
var $ tab_items = $ ( "ul: prima li", $ schede). droppable ({
accettare: ". connectedSortable li",
hoverClass: "ui-stato-hover",
cadere: la funzione (evento, ui) {
var $ oggetto = $ (this);
var $ list = $ ($ item.find ( "a") .attr ( "href"))
. Find ( ". ConnectedSortable");
ui.draggable.hide ( "lento", function () {
$ Tabs.tabs ( "opzione", "attivo", $ tab_items.index ($ item));
$ (This) .appendTo ($ lista) .Show ( "slow");
});
}
});
});
</ Script>
</ Head>
<Body>
<div id = "schede">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
</ Ul>
<Div Id = "tabs-1">
<Ul id = "sortable1" class = "connectedSortable ui-helper-reset">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li class = "ui-stato-default"> Articolo 2 </ li>
<Li class = "ui-stato-default"> Articolo 3 </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
<Li class = "ui-stato-default"> Articolo 5 </ li>
</ Ul>
</ Div>
<Div id = "schede-2">
<Ul id = "sortable2" class = "connectedSortable ui-helper-reset">
<Li class = "ui-stato-highlight"> Articolo 1 </ li>
<Li class = "ui-stato-highlight"> Articolo 2 </ li>
<Li Class = "ui-state-highlight"> Articolo 3 </ li>
<Li Class = "ui-state-highlight"> Articolo 4 </ li>
<Li class = "ui-stato-highlight"> Articolo 5 </ li>
</ Ul>
</ Div>
</ Div>
</ Corpo>
</ Html>
partenza ritardata
Ritardata dal ritardo tempo e la distanza per evitare sorta accidentale. Con delay millisecondi opzione deve essere impostata prima dell'inizio del trascinamento del genere. Con distance pixel opzione deve essere impostata prima dell'inizio del trascinamento del genere.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> JQuery UI ordinamento (ordinabili) - ritardato avvio </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px; zoom: 1;}
# Sortable1 Li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
Ritardo: 300
});
$ ( "# Sortable2"). Ordinabili ({
distanza: 15
});
$ ( "Li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 class = "doc"> 300ms ritardo di tempo: </ h3>
<Ul Id = "sortable1">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li class = "ui-stato-default"> Articolo 2 </ li>
<Li class = "ui-stato-default"> Articolo 3 </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
</ Ul>
<H3 Class = "docs"> distanza ritardo 15px: </ h3>
<Ul id = "sortable2">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li class = "ui-stato-default"> Articolo 2 </ li>
<Li class = "ui-stato-default"> Articolo 3 </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
</ Ul>
</ Corpo>
</ Html>
Esso viene visualizzato come una griglia
Let voci ordinabili vengono visualizzate come una griglia, in modo che usano CSS con le stesse dimensioni e il display flottante.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> JQuery UI ordinamento (ordinabili) - visualizzare una griglia </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Ordinabile {list-style-type: none; margin: 0; padding: 0; width: 450px;}
#sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "ordinabile">
<Li class = "ui-stato-default"> 1 </ li>
<Li class = "ui-stato-default"> 2 </ li>
<Li class = "ui-stato-default"> 3 </ li>
<Li class = "ui-stato-default"> 4 </ li>
<Li class = "ui-stato-default"> 5 </ li>
<Li class = "ui-stato-default"> 6 </ li>
<Li class = "ui-stato-default"> 7 </ li>
<Li class = "ui-stato-default"> 8 </ li>
<Li class = "ui-stato-default"> 9 </ li>
<Li class = "ui-stato-default"> 10 </ li>
<Li class = "ui-stato-default"> 11 </ li>
<Li class = "ui-stato-default"> 12 </ li>
</ Ul>
</ Corpo>
</ Html>
Posizionare un segnaposto
Quando si trascina una voce ordinabile in una nuova posizione, le altre voci potranno fare spazio per la voce. placeholder possibilità di passare una classe per definire il vuoto stile visivo. Booleano valori forcePlaceholderSize opzione per impostare le dimensioni del segnaposto.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> JQuery UI ordinamento (ordinabili) - collocato segnaposto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
# Ordinabili li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em;}
html> body #sortable li {height: 1.5em; line-height: 1.2em;}
.ui-stato-highlight {height: 1.5em; line-height: 1.2em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
segnaposto: "ui-stato-highlight"
});
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "ordinabile">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li class = "ui-stato-default"> Articolo 2 </ li>
<Li class = "ui-stato-default"> Articolo 3 </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
<Li class = "ui-stato-default"> Articolo 5 </ li>
<Li class = "ui-stato-default"> Articolo 6 </ li>
<Li class = "ui-stato-default"> Articolo 7 </ li>
</ Ul>
</ Corpo>
</ Html>
Processing lista vuota
da Opzione è impostata false , per evitare che un elenco di tutte le voci sono posti in una lista vuota a parte. Per impostazione predefinita, le voci ordinabili possono essere inseriti in una lista vuota.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di smistamento (ordinabili) - la manipolazione lista vuota </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2, # sortable3 {list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: # eee; padding: 5px; width: 143px;}
# Sortable1 Li, # sortable2 Li, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "Ul.droptrue"). Ordinabile ({
connectWith: "ul"
});
$ ( "Ul.dropfalse"). Ordinabili ({
connectWith: "ul",
dropOnEmpty: false
});
$ ( "# Sortable1, # sortable2, # sortable3") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable1" class = "droptrue">
<Li Class = "ui-state-default"> può essere posizionato .. </ li>
<li class="ui-state-default"> .. un vuoto elenco </ li>
<Li class = "ui-stato-default"> Articolo 3 </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
<Li class = "ui-stato-default"> Articolo 5 </ li>
</ Ul>
<Ul Id = "sortable2" class = "dropfalse">
<Li class = "ui-stato-highlight"> non può essere collocato .. </ li>
<Li class = "ui-stato-highlight"> .. una lista vuota </ li>
<Li class = "ui-stato-highlight"> Articolo 3 </ li>
<Li Class = "ui-state-highlight"> Articolo 4 </ li>
<Li class = "ui-stato-highlight"> Articolo 5 </ li>
</ Ul>
<Ul id = "sortable3" class = "droptrue">
</ Ul>
style="clear:both"> <br
</ Corpo>
</ Html>
Includere / escludere l'ingresso
Designato dalle items passare un jQuery opzioni di selezione quali elementi possono essere ordinati. Questa opzione è al di fuori del progetto non può essere ordinato, ma non sono validi entrata obiettivo ordinabile.
Se si vuole evitare che un particolare tipo di ingresso, la possibilità di cancel passano un selettore jQuery. ingresso Annullato è ancora voci valide altro tipo di obiettivo.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di smistamento (ordinabili) - Calcola / esclusione voce </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; zoom: 1;}
# Sortable1 Li, # sortable2 li {margin: 0 5px 5px 5px; padding: 3px; width: 90%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
articoli: "Li: non (.ui-stato-disabili)"
});
$ ( "# Sortable2") .sortable ({
annullare: ".ui-stato-disabile"
});
$ ( "# Sortable1 Li, # sortable2 li") DisableSelection ().;
});
</ Script>
</ Head>
<Body>
<h3 class = "doc"> specificare quali elementi sono ordinabili: </ h3>
<Ul id = "sortable1">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li class = "ui-stato-default ui-stato-disabile"> (non sono ordinabili o una destinazione di rilascio) </ li>
<Li class = "ui-stato-default ui-stato-disabile"> (non sono ordinabili o una destinazione di rilascio) </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
</ Ul>
<H3 class = "doc"> Per annullare (ma come una destinazione di rilascio): </ h3>
<Ul id = "sortable2">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li Class = "ui-state-default ui-state-disabled"> (io non sono ordinabile) </ li>
<Li class = "ui-stato-default ui-stato-disabile"> (non sono ordinabile) </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
</ Ul>
</ Corpo>
</ Html>
componenti Portal (portlet)
Abilita componenti del portale (div stile) come ordinabili, e utilizzare connectWith opzione per consentire l'ordinamento tra le colonne.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> jQuery UI di ordinamento (ordinabili) - componenti di portale (portlet) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
. Portlet-ginocchiera {
position: absolute;
top: 50%;
a destra: 0;
margin-top: -8px;
}
.portlet-contenuti {
padding: 0.4em;
}
.portlet-segnaposto {
border: 1px nero punteggiato;
margin: 0 1em 1em 0;
Altezza: 50px;
}
</ Style>
<Script>
$ (Function () {
$ ( ".column") .sortable ({
connectWith: ".column",
Maniglia: ". portlet-header",
annullare: ".portlet-Toggle",
segnaposto: "portlet-segnaposto ui-angolo-tutto"
});
$ ( ".portlet")
. AddClass ( "ui-ui-widget di widget di contenuto ui-helper-clearfix ui-angolo-all")
.find ( ".portlet-header")
. AddClass ( "ui-widget di intestazione-ui-angolo-all")
.prepend ( "<span class = 'ui ui-icon-icon-minusthick portlet-ginocchiera'> </ span>");
$ ( ". Portlet-Toggle"). Fare clic (function () {
var icon = $ (this);
icon.toggleClass ( "ui-icon-minusthick ui-icon-plusthick");
icon.closest ( ".portlet") .find ( ".portlet-content") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "colonna">
<Div class = "portlet">
<Div Class = "portlet-header"> sottoscrivere </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "portlet">
<Div class = "portlet-header"> news </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "colonna">
<Div class = "portlet">
<Div class = "portlet-header"> carrello </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div Class = "column">
<Div class = "portlet">
<Div class = "portlet-header"> collegamento </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "portlet">
<Div class = "portlet-header"> immagine </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
</ Corpo>
</ Html>