Сохранить новый порядок списка - PullRequest
Новая
       1

Сохранить новый порядок списка

4 голосов
/ 10 марта 2012

Я пытаюсь сделать так, чтобы сохранить новый порядок моего списка просмотра в куки, чтобы пользователь мог сортировать список, как они хотят. И в следующий раз, когда они откроют мой список страниц, тот же порядок, что был, когда они покинули страницу. Возможно ли это?

Я использую 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}); 
        }});
      }
    });
  });

Когда пользователь нажимает и удерживает элемент списка, этот элемент перемещается в верхнюю часть списка.

+ Мою страницу тоже можно использовать в автономном режиме.

UPDATE:

Как получить ссылки на новый список? Теперь у меня так:

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 -> #

Так что, я думаю, он очистит старый список и снова сделает весь список. Думаю, мне нужно изменить эту строку, но я не знаю как. list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');

Ответы [ 2 ]

2 голосов
/ 10 марта 2012

Для HTML5 я бы посмотрел на localStorage

UPDATE:

Вот пример использования локального хранилища

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>
​
0 голосов
/ 10 марта 2012

без выгрузки двух целых файлов на вас, некоторые соответствующие выдержки из упомянутой мной страницы:

в моем файле 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 требует его подключения к сети. Но я не уверен, сколько функциональности вам нужно, так что это может сработать для вас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...