0
소개 :확장 목록 정렬 스크립트
안녕하세요 여러분,
나는 그것이 내가 그것을 필요로하고 요구 한대로 작동 할 수 있도록 첨부 된 자바 스크립트 코드를 확장하는 방법에 대한 일을 찾고있다 다양한 코딩 웹 사이트에서 아무도 대답을 알지 못하는 것 같습니다. 그래서 마지막 기회에서 나는 누군가가 나를 도울 수 있기를 희망하며 여기에 왔습니다. 스크립트 소개
:
가 실행되면, 아래의 스크립트는 목록과 해당 항목의 순서에서 항목의 그룹을 (끌어 놓기로) 정렬을 수는 쿠키에 저장됩니다 정렬 순서를 변경하지 않고 페이지를 새로 고칠 수 있습니다.
문제점
첨부 된 스크립트의 문제는 단지 1 개 목록 작동하고 페이지에 추가 목록을 추가하는 것은 작동하지 않을 것입니다. (다른 목록의 항목은 정렬되거나 저장 될 수 없습니다).
요청 :
는 내가 1 개 이상의 목록을 정렬 할 수 있도록 스크립트를 확장하고 쿠키에 목록의 모든 순서를 저장할 수 있도록하고 싶습니다는 (것이 하나 개의 쿠키 수 이 부분이 중요하지 않은 각 목록에 대한 모든 쿠키 또는 개별 쿠키) 가능한 한 간단하게 만들기 목록간에 항목을 혼합 할 필요가 없다는 점에 유의해야합니다. 각 목록의 항목을 독립적으로 정렬 한 다음 저장해야합니다./쿠키의 각 목록의 순서를 복원하십시오.
폐회 선언 :
마지막으로 그냥 더 도움이 더 나은 제공 할 수 있도록 내가 자바 스크립트 프로그래밍의 세계에 비교적 새로운 오전 말하고 싶지만 그 어떤 모든 응답을 말할 것도 것이다 대단히 감사하겠습니다.
감사합니다, 데이브
자바 스크립트 :
// 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로 페이지 :
<!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>
감사를 이미 정의
list변수는 내가 다른 사이트에서 주어졌다하고 스크립트가 정직보다 훨씬 더 많이 사용 내 꺼야. 며칠 전이 사이트에서 방금 발견했습니다. http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/ 그리고 원하는대로 작동하도록하는 방법을 알아 내려고 노력했습니다. 내가 어떤 문제에 빠지면 나는 당신의 제안을 확실히 추가 할 것이다. 나는 더 이상의 질문을하는 것이 좋을 것이라고 희망한다. 다시 한번 감사드립니다. –업데이트 : li 요소의 클래스로 ID를 변경하는 등 사용자의 지침을 따르고 $ ("ul.ui-sortable") 대신 목록 변수를 사용하도록 코드를 변경 했으므로 완벽하게 작동했습니다. 귀하의 도움과 만약 내가 할 수 있다면 당신의 도움을 위해 돈을 보내 줄 수 있지만, 나는 할 수 없다. 그러나 당신이 원한다면 FrontPage의 우리 사이트 외부 링크 섹션에 귀하의 사이트 (http://bigmooworld.com/)를 추가하는 것입니다. 지금은 매월 3 만 5 천 건의 순식간에 히트 수를 얻을 수 있기 때문에 결국 돈보다 낫다. –
원하면 원하면 링크해라. 그러나 내 홈페이지는 현재 내가 아직 생각하지 못한 미래의 웹 사이트 아이디어를위한 껍질에 불과하다. 지금은 그냥 행복한 개구리 이미지입니다. 내가 결코 게시하지 않는 블로그 페이지 인 http://bigmooworld.com/mblog에 링크 할 수는 있지만, SFWness가 보장되지는 않습니다. 아니면 전혀 지불하지 않아도됩니다. 나에겐 충분하다. – MooGoo