我正在尝试为我的网站创建一个个人链接框,以便我的访问者可以将他们最喜欢的 10 个链接添加到一个框中。
到目前为止,我已经可以添加和删除链接,但我真正苦苦挣扎的是如何将其保存到用户 cookie 中,以便当用户返回网站时,它会记住前 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>