0

訪問者がお気に入りのトップ 10 リンクをボックスに追加できるように、Web サイト用の個人用リンクボックスを作成しようとしています。

リンクを追加したり削除したりできるようになりましたが、本当に苦労しているのは、これをユーザーの Cookie に保存して、ユーザーが Web サイトに戻ったときにトップ 10 リストを記憶できるようにする方法です。

また、jQuery でドラッグ アンド ドロップ機能を追加して、ユーザーがリンク位置をソートできるようにすることは可能ですか?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
   body { font-size:11px; font-family:Arial, Helvetica, sans-serif;}
#linklist img {width:12px; height:12px;}
#linklist .link {padding:5px 4px 5px 5px; border-bottom:1px solid #EFEFEF;}
#linklist .link:hover {background:#f7f7f7;}
#linklist .link_add {}
#linklist input[type="text"] {padding:8px; border-radius:2px; border:1px solid #CCC; width:270px;} 
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
    $('#linklist').on('click',  '.link img', function() {
        if (confirm('Vil du virkelig slette denne lenken ?')) {
            $(this).closest('.link').remove();
        }
    });

    $('#submit').on('click', function() {
        if ($("#lenke").val() == '' || $('#tittel').val() == '') {
            alert('Begge feltene må fylles ut!');
            return;
        }
        if ($('.link').length > 9) {
            alert('Du kan kun legge til ti lenker, slett noen av de andre først !');
            return;
        }
        $('.link').last()
                  .after($('<div />', {'class':'link'})
                  .append('<div style="float:right;"><img src="images/cross.png" /></div>')
                  .append('<div style="clear:both;"></div>')
                  .prepend(
                      $('<div />', {style:"float:left"})
                               .append($('<a />', {href: $("#lenke").val(), text: $('#tittel').val()}))
                  ));
        $('#lenke, #tittel').val('');
    });
});
});//]]>  

</script>


</head>
<body>

<div style="width:300px;">
<h3>Personlige linker</h3>
<div id="linklist" class="frame">

<div class="link">
<div style="float:left;"><a href="#">Jakt og Fiskebutikken</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Maritim.no</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Dagbladet.no</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>


<div class="link">
<div style="float:left;"><a href="#">Spillguide</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Båtmagasinet</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Pressfire</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">VG Nett</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>


<div class="link">
<div style="float:left;"><a href="#">Dagbladet.no</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div style="clear:both;"></div>



<div class="link_add">
<div style="padding:5px;"><strong>Add title and URL:</strong></div>
<input id="tittel" placeholder="Title" type="text" />
<input id="lenke"  placeholder="http://www..." type="text" />
<input id="submit" style="padding:6px;" value="Add link" type="button" />
</div>
</div>
</div>
</body>
</html>
4

2 に答える 2

0

localStorageCookie の代わりにHTML5 を使用します。

//to set
localStorage.setItem('sitename#link-name', linkUrl)

//to retrieve values for your site
function fetchMyUrls(){
    var myLinks = [];
    for(var i in localStorage)
    {
        if(localStorage[i].indexOf('sitename') == 0){
           myLinks.push({ i : localStorage[i] });
        }
    }
    return myLinks;
}
于 2012-09-05T19:37:40.477 に答える
0

onclick 関数 (またはリストを変更するイベント) では、現在リストにあるものを追跡する必要があります。

次のようなことができます

function listChanged(listObject) {
    $.cookie('myList', listObject);
}

Robin が指摘したように、おそらく localStorage を使用する必要があります。とにかく、リスト全体をクライアント側のどこかに保存したいので、リストが変更されるたびに保存してください。

また、オブジェクトをシリアル化する必要があるため、JSON.parse() と JSON.stringify() を確認してください。

于 2012-09-05T19:40:42.317 に答える