Введение:Расширения списка сортировки сценарий
Привет всем,
Я искал в течение нескольких дней способа продлить прилагаемый код JavaScript, так что он будет работать, как мне это нужно, чтобы и попросил на разных веб-сайтах кодирования, но никто, кажется, не знает ответа, поэтому в последнем случае я пришел сюда в надежде, что кто-то сможет мне помочь.
О скрипте:
Когда бежал, ниже скрипт позволит вам сортировать (перетаскивание) группы элементов из списка и порядка этих элементов будет сохранен в кук позволяя вам обновить страницу, оставив порядок сортировки неповрежденным.
Проблема
Проблема с присоединенным сценария является то, что он работает только для 1 списка и добавление дополнительного списка на странице не будет работать. (элементы в другом списке не могут быть отсортированы или сохранены в любом случае).
Запрос:
Я хотел бы иметь возможность расширить сценарий так, что он будет сортировать более 1 список и сохранить порядок для всех списка для печенья (будь то один печенье для все или отдельные куки для каждого списка, эта часть не имеет значения) и сделать все как можно проще. Я должен отметить, что мне не нужно смешивать элементы между списками, мне просто нужно сортировать элементы в каждом списке независимо, а затем сохранять/восстановить порядок каждого списка в файле cookie.
Заключительное Заявление:
Наконец, я просто хочу сказать, что я достаточно новое для мира программирования JavaScript, поэтому дополнительная помощь вы можете предоставить, тем лучше, но это само собой разумеется, что любые и все ответы будут будем очень благодарны.
Спасибо, Dave
JavaScript:
// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;
// 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;>
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();
});
Пример Html Page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>
<body>
<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>
</body>
</html>
Спасибо за ответ на это гораздо больше, чем мне было дано от других сайтов и быть честным сценарий не мой. Я только что нашел его несколько дней назад на этом сайте. http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/ и попытался выяснить, как заставить его работать так, как я хотел. Я обязательно добавлю ваши предложения, если у меня возникнут проблемы. Надеюсь, что будет нормально задавать дополнительные вопросы. Еще раз спасибо. –
Обновление: я выполнил ваши инструкции (включая изменение идентификаторов для классов для элементов li и изменил код, чтобы использовать переменную списка вместо $ («ul.ui-sortable»), и она работала безупречно. Большое спасибо за ваша помощь, и если бы я мог отправить вам немного денег за вашу помощь, но я не могу, что я сделаю, однако, добавьте свой сайт (http://bigmooworld.com/) в раздел внешних ссылок на нашем сайте на главной странице, если вы Например, прямо сейчас мы получаем около 35 000 уникальных просмотров в месяц, поэтому в конце концов это может быть лучше денег. –
Ссылка, если вы хотите, но моя домашняя страница в настоящее время является оболочкой для какой-либо будущей идеи веб-сайта, о которой я еще не думал В настоящее время это просто счастливое изображение лягушки. Вы можете ссылаться на http://bigmooworld.com/mblog, который является страницей блога, на которую я никогда не отправляю сообщения, хотя я не могу гарантировать, что это SFWness. Или совсем нет, хорошая воля - это оплата достаточно для меня. – MooGoo