Shortable ini akan bermanfaat untuk mengatur struktur navigasi website, dengan tambahan menggunakan plugin cookie urutan yang di atur oleh user dapat tersimpan kedalam daftar cookie sehingga jika di refresh halaman urutan yang telah ditentukan oleh pengunjung website kita tidak akan belubah/ kembali seperti semua.
Untuk menjalankan nya silakan sisipkan code dibawah ini didalam tag <meta>
CSS
li {
border:1px solid #DADADA;
background-color:#EFEFEF;
padding:3px 5px;
margin-bottom:3px;
margin-top:3px;
width:100px;
list-style-type:circle;
font-family:Arial, Helvetica, sans-serif;
color:#666666;
font-size:0.8em;
}
li:hover {
background-color:#FFF;
cursor:move;
}
<script src=”jquery-1.2.6.min.js” type=”text/javascript”></script>
<script src=”jquery-ui-1.5.1.packed.js” type=”text/javascript”></script>
<script src=”jquery.cookie.js” type=”text/javascript”></script>
JAVASCRIPT
/////////////////////////////////////////////////////////////////
///// EDIT THE FOLLOWING VARIABLE VALUES //////////////////////
/////////////////////////////////////////////////////////////////
// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;
/////////////////////////////////////////////////////////////////
///// YOU PROBABLY WON'T NEED TO EDIT BELOW ///////////////////
/////////////////////////////////////////////////////////////////
// function that writes the list order to a cookie
function getOrder() {
// save custom order to cookie
$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}
// function that restores the list order from a cookie
function restoreOrder() {
var list = $(setSelector);
if (list == null) return
// fetch the cookie value (saved order)
var cookie = $.cookie(setCookieName);
if (!cookie) return;
// make array from saved order
var IDs = cookie.split(",");
// fetch current order
var items = list.sortable("toArray");
// make array from current order
var rebuild = new Array();
for ( var v=0, len=items.length; v<len; v++ ){
rebuild[items[v]] = items[v];
}
for (var i = 0, n = IDs.length; i < n; i++) {
// item id from saved order
var itemID = IDs[i];
if (itemID in rebuild) {
// select item id from current order
var item = rebuild[itemID];
// select the item according to current order
var child = $("ul.ui-sortable").children("#" + item);
// select the item according to the saved order
var savedOrd = $("ul.ui-sortable").children("#" + itemID);
// remove all the items
child.remove();
// add the items in turn according to saved order
// we need to filter here since the "ui-sortable"
// class is applied to all ul elements and we
// only want the very first! You can modify this
// to support multiple lists - not tested!
$("ul.ui-sortable").filter(":first").append(savedOrd);
}
}
}
// code executed when the document loads
$(function() {
// here, we allow the user to sort the items
$(setSelector).sortable({
axis: "y",
cursor: "move",
update: function() { getOrder(); }
});
// here, we reload the saved order
restoreOrder();
});
Setiap kali urutan berubaha makan fungsi yang di eksekusi adalah “getOrder()” dan setelah elemen dimuat baru meng-eksekusi “restoreOrder()”.fungsi “getOrder()” akan bertugas sebagai penulis urutan elemen yang akan disimpan kedalam cookie dan “restoreOrder()” akan bertugas untuk mengambil urutan yang disimpan pada cookie dan mengembalikkannya.
Tag HTML masukkan didalam <body>
HTML
<ul id="list1">
<li id="item-1">List Item 1</li>
<li id="item-2">List Item 2</li>
<li id="item-3">List Item 3</li>
<li id="item-4">List Item 4</li>
<li id="item-5">List Item 5</li>
<li id="item-6">List Item 6</li>
</ul>
No Comments on "Membuat Shortable Menggunakan jQuery UI"