All geek questions in one place

Save New List

I am trying to keep my list in a cookie list so that the user can sort the list as they want. And the next time they open my list of pages, this is the same order as when they exit the page. Is it possible?

I use jQuery Mobile and sort the list this way:

$(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 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 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}); }}); } }); });

When the user clicks and holds the list item, which item moves to the top of the list.

+ My page should also use offline.

UPDATE:

How do I get links to a new list? Now I like it:

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

And when I reorder the list and save it, it changes the link to "#".

Example: I move Item3 to the top of the list, so the link of each item changes http://www.example3.com → #

So, I think this is a clear old list and make the whole list again. Therefore, I think I need to change this line, but I do not know how to do it. list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');

+4
source share
2 answers

For HTML5, I would look at localStorage

UPDATE:

Here is an example of using Local Storage

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 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 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>​
+2
source

without dropping 2 whole files on you, some relevant excerpts from the page I mentioned:

in my js file:

 //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 contains (among other materials):

  } 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); } } }

and I just called .sortable () on the list to make it drag / dropable / sortable, if I remember correctly.

However, the php method does not take into account your problem of using it offline (if you mean that you want to keep full functionality), since, of course, the ajax request requires it to be online. But I'm not sure how many features you need, so this might work for you.

0
source

Source: https://habr.com/ru/post/1400684/

More articles:


All Articles