保存新的清单顺序

时间：2012-03-10 01:05:45

标签： jquery html5 jquery-mobile

我尝试将listview的新订单保存到Cookie中，以便用户可以按照自己的意愿对列表进行排序。下次打开我的页面列表时，它们与离开页面时的顺序相同。这可能吗？

我使用jQuery Mobile并以这种方式对列表进行排序：

    $(document).ready(function() {
    $('li').taphold(function() {
      // the clicked LI
      var clicked = $(this);

      // all the LIs above the clicked one
      var previousAll = clicked.prevAll();

      // only proceed if it's not already on top (no previous siblings)
      if(previousAll.length > 0) {
        // top LI
        var top = $(previousAll[previousAll.length - 1]);

        // immediately previous LI
        var previous = $(previousAll[0]);

        // how far up do we need to move the clicked LI?
        var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

        // how far down do we need to move the previous siblings?
        var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

        // let's move stuff
        clicked.css('position', 'relative');
        previousAll.css('position', 'relative');
        clicked.animate({'top': -moveUp});
        previousAll.animate({'top': moveDown}, {complete: function() {
          // rearrange the DOM and restore positioning when we're done moving
          clicked.parent().prepend(clicked);
          clicked.css({'position': 'static', 'top': 0});
          previousAll.css({'position': 'static', 'top': 0}); 
        }});
      }
    });
  });

当用户点击并按住列表项时，该项目移动到列表顶部。

+我的网页也必须能够离线使用。

的更新： 的

如何获取新列表的链接？ 现在我喜欢这个：

JS 

$('#home').live('pageinit', function(event) {
    // Check if we have saved the list order
    getListOrder();

    $('li').taphold(function() {
        // the clicked LI
        var clicked = $(this);

        // all the LIs above the clicked one
        var previousAll = clicked.prevAll();

        // only proceed if it's not already on top (no previous siblings)
        if (previousAll.length > 0) {
            // top LI
            var top = $(previousAll[previousAll.length - 1]);

            // immediately previous LI
            var previous = $(previousAll[0]);

            // how far up do we need to move the clicked LI?
            var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

            // how far down do we need to move the previous siblings?
            var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

            // let's move stuff
            clicked.css('position', 'relative');
            previousAll.css('position', 'relative');
            clicked.animate({
                'top': -moveUp
            });
            previousAll.animate({
                'top': moveDown
            }, {
                complete: function() {
                    // rearrange the DOM and restore positioning when we're done moving
                    clicked.parent().prepend(clicked);
                    clicked.css({
                        'position': 'static',
                        'top': 0
                    });
                    previousAll.css({
                        'position': 'static',
                        'top': 0
                    });
                    saveListOrder();
                }
            });
        }
    });

    $('#resetLO').click(function() {
        resetListOrder();
    });

    $('#clearLS').click(function() {
        clearLocalStorage();
    });
});

function saveListOrder() {
    var $items = $('#theList li');

    $items.each(function(i) {
        //alert('Order:' +$(this).attr('rel')+' I: '+i); // This is your rel value
        // save the index and the value
        localStorage.setItem(i, $(this).attr('rel'));
    });
}

function getListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var item;

    // check for localStorage
    if(localStorage.getItem(0) == null) {
        return; // use default list order
    }        

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        item = localStorage.getItem(i);

        // create new list order
        list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');
    });
    list.listview('refresh');    
}

function resetListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var next;

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        next = i + 1;
        list.append('<li rel="'+next+'"><a href="#">List Item #'+next+'</a></li>');
    });  
    list.listview('refresh');     
}

function clearLocalStorage() {
    // remove  all saved data
    localStorage.clear();     
}

HTML 

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-theme="g" id="theList">
            <li rel="1"><a href="http://www.example1.com">List Item #1</a></li>
            <li rel="2"><a href="http://www.example2.com">List Item #2</a></li>
            <li rel="3"><a href="http://www.example3.com">List Item #3</a></li>
            <li rel="4"><a href="http://www.example4.com">List Item #4</a></li>
            <li rel="5"><a href="http://www.example5.com">List Item #5</a></li>
            <li rel="6"><a href="http://www.example6.com">List Item #6</a></li>
            <li rel="7"><a href="http://www.example7.com">List Item #7</a></li>
            <li rel="8"><a href="http://www.example8.com">List Item #8</a></li>
            <li rel="9"><a href="http://www.example9.com">List Item #9</a></li>
            <li rel="10"><a href="http://www.example10.com">List Item #10</a></li>
        </ul>
        <br />
        <a href="#" data-role="button" id="resetLO">Reset List Order</a>
        <a href="#" data-role="button" id="clearLS">Clear Local Storage</a>
    </div>
</div>
</body>
</html>

当我重新排序列表并保存时，它会将链接更改为“＃”。

示例：我将Item3移到列表顶部，以便每个项目的链接更改http://www.example3.com - ＆gt; ＃

所以我猜它清楚旧列表并再次制作整个列表。所以我想我必须改变这一行，但我不知道如何。 list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');

2 个答案:

答案 0 :(得分：2)

对于HTML5，我会看一下localStorage

更新：

以下是使用本地存储的示例

JS 

$('#home').live('pageinit', function(event) {
    // Check if we have saved the list order
    getListOrder();

    $('li').taphold(function() {
        // the clicked LI
        var clicked = $(this);

        // all the LIs above the clicked one
        var previousAll = clicked.prevAll();

        // only proceed if it's not already on top (no previous siblings)
        if (previousAll.length > 0) {
            // top LI
            var top = $(previousAll[previousAll.length - 1]);

            // immediately previous LI
            var previous = $(previousAll[0]);

            // how far up do we need to move the clicked LI?
            var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

            // how far down do we need to move the previous siblings?
            var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

            // let's move stuff
            clicked.css('position', 'relative');
            previousAll.css('position', 'relative');
            clicked.animate({
                'top': -moveUp
            });
            previousAll.animate({
                'top': moveDown
            }, {
                complete: function() {
                    // rearrange the DOM and restore positioning when we're done moving
                    clicked.parent().prepend(clicked);
                    clicked.css({
                        'position': 'static',
                        'top': 0
                    });
                    previousAll.css({
                        'position': 'static',
                        'top': 0
                    });
                    saveListOrder();
                }
            });
        }
    });

    $('#resetLO').click(function() {
        resetListOrder();
    });

    $('#clearLS').click(function() {
        clearLocalStorage();
    });
});

function saveListOrder() {
    var $items = $('#theList li');

    $items.each(function(i) {
        //alert('Order:' +$(this).attr('rel')+' I: '+i); // This is your rel value
        // save the index and the value
        localStorage.setItem(i, $(this).attr('rel'));
    });
}

function getListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var item;

    // check for localStorage
    if(localStorage.getItem(0) == null) {
        return; // use default list order
    }        

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        item = localStorage.getItem(i);

        // create new list order
        list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');
    });
    list.listview('refresh');    
}

function resetListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var next;

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        next = i + 1;
        list.append('<li rel="'+next+'"><a href="#">List Item #'+next+'</a></li>');
    });  
    list.listview('refresh');     
}

function clearLocalStorage() {
    // remove  all saved data
    localStorage.clear();     
}

HTML 

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-theme="g" id="theList">
            <li rel="1"><a href="#">List Item #1</a></li>
            <li rel="2"><a href="#">List Item #2</a></li>
            <li rel="3"><a href="#">List Item #3</a></li>
            <li rel="4"><a href="#">List Item #4</a></li>
            <li rel="5"><a href="#">List Item #5</a></li>
            <li rel="6"><a href="#">List Item #6</a></li>
            <li rel="7"><a href="#">List Item #7</a></li>
            <li rel="8"><a href="#">List Item #8</a></li>
            <li rel="9"><a href="#">List Item #9</a></li>
            <li rel="10"><a href="#">List Item #10</a></li>
        </ul>
        <br />
        <a href="#" data-role="button" id="resetLO">Reset List Order</a>
        <a href="#" data-role="button" id="clearLS">Clear Local Storage</a>
    </div>
</div>
</body>
</html>
​

答案 1 :(得分：0)

没有转发2个完整的文件，我提到的页面中有一些相关的摘录：

在我的JS文件中：

//fetches the list and calls show list to show the contents
function getList(){
    //alert("in getList");
    jQuery.ajax({
        url:"todolist.php",
        success: function(responseText){showList(responseText)},
        error: ajaxFailure
    });
}
//keeps track of the new order when the user drags to reorder
function updateOrder(){
    var listitems=document.getElementsByTagName("li");
    var liststring="";
    for(var i=0; i<listitems.length; i++){
        liststring=liststring+"\n"+listitems[i].firstChild.nodeValue;
    }
    jQuery.ajax({
        url:"todolist.php",
        success: getList,
        error: ajaxFailure,
        type: "post",
        data: {action: "set", items: liststring}
    });
}

todolist.php包含（以及其他内容）：

    } else {
    $items=$_REQUEST["items"];
        if($action=="set"){
            file_put_contents("todolist.txt", $items);
        } else { //add an item
            print($items);
            file_put_contents("todolist.txt", "\n".$items, FILE_APPEND);
        }
    }
} else {
    //print the current file
    if(file_exists("todolist.txt")){
        $contents=file_get_contents("todolist.txt");
        if($contents!=""){
            $contents=trim($contents);
            print($contents);
        }
    } 
}

如果我没记错的话，我只是在列表上调用.sortable（）以使其可拖动/可丢弃/可排序。

然而，php方法并没有解决你离线可用的问题（如果你想保留全部功能），因为当然ajax请求要求它在线。但是我不确定你需要多少功能，所以这对你有用。

相关问题
最新问题