我正在尝试像http://mcfc.co.uk那样复制UI效果我编写了一个脚本,它隐藏了一个div函数,并将一个类应用于一个div,其中#id对应于被点击的div,反之亦然。我是jQuery的新手,如何将这些'clicked'div的状态保存到cookie中以显示隐藏的内容等?
感谢您的帮助。
<script type="text/javascript">
$(document).ready(function(){
$('.portlet').click( function(){
var idtext = this.id;
$(this).hide();
$("[id*=" + idtext + "]").not(this).addClass('add');
});
$("#content-footer div").click( function(){
var idtext = this.id;
$(this).removeClass('add');
$("[id*=" + idtext + "]").not(this).show();
});
})
</script>
HTML:
点击隐藏/显示的DIV .....
<div class="column" id="col0">
<div class="portlet" id="p_0">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</div>
<div class="portlet" id="p_1">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</div>
</div>
etc....
DIV的那个类适用于.....
<div id="content-footer">
<div id="p_0"></div>
<div id="p_1"></div>
<div id="p_2"></div>
<div id="p_3"></div>
<div id="p_4"></div>
</div>
答案 0 :(得分:2)
由于您已经在使用jQuery,因此您可以利用它并使用非常简单易用的插件Cookie:
您可以在此处看到一些demos。
或者在这里:
$.cookie("myCookie", true);
alert($.cookie("myCookie")); // alerts true. but remember, it's always returned as a string.
使用示例进行更新:
$(document).ready(function(){
$('.portlet').click(function(){
var idtext = this.id;
$(this).hide();
$("[id*="+ idtext +"]").not(this).addClass('add');
$.cookie(idtext, false);
});
$("#content-footer div").click(function(){
var idtext = this.id;
$(this).removeClass('add');
$("[id*="+ idtext +"]").not(this).show();
$.cookie(idtext, true);
});
})
如您所见,我们在cookie中设置当前id(idtext)的可见状态,其值为true或false。 加载这些portlet时,您可以检查cookie(服务器端或客户端,您的选择)并根据需要提供前端服务。如果您需要帮助,请告诉我: - )
答案 1 :(得分:2)
我发布了demo of what I think you want here。请务必加入jQuery cookie plugin。
以下是我使用的HTML:
<div class="column" id="col0">
<div class="portlet" id="p_0">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_1">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_2">
<div class="portlet-header">Extra</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_3">
<div class="portlet-header">Other</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_4">
<div class="portlet-header">Last</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div id="content-footer">
<div name="p_0">p0 - Feeds</div>
<div name="p_1">p1 - News</div>
<div name="p_2">p2 - Extra</div>
<div name="p_3">p3 - Other</div>
<div name="p_4">p4 - Last</div>
</div>
脚本:
$(document).ready(function(){
var cookie = $.cookie("hidden");
var hidden = cookie ? cookie.split("|").getUnique() : [];
var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date
// Remember content that was hidden
$.each( hidden, function(){
var pid = this; //parseInt(this,10);
$('#' + pid).hide();
$("#content-footer div[name='" + pid + "']").addClass('add');
})
// Add Click functionality
$('.portlet').click(function(){
$(this).hide();
$("#content-footer div[name=" + this.id + "]").addClass('add');
updateCookie( $(this) );
});
$("#content-footer div").click(function(){
$(this).toggleClass('add');
var el = $("div#" + $(this).attr('name'));
el.toggle();
updateCookie( el );
});
// Update the Cookie
function updateCookie(el){
var indx = el.attr('id');
var tmp = hidden.getUnique();
if (el.is(':hidden')) {
// add index of widget to hidden list
tmp.push(indx);
} else {
// remove element id from the list
tmp.splice( tmp.indexOf(indx) , 1);
}
hidden = tmp.getUnique();
$.cookie("hidden", hidden.join('|'), { expires: cookieExpires } );
}
})
// Return a unique array.
Array.prototype.getUnique = function() {
var o = new Object();
var i, e;
for (i = 0; e = this[i]; i++) {o[e] = 1};
var a = new Array();
for (e in o) {a.push (e)};
return a;
}
// Fix indexOf in IE
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0), j = this.length; i < j; i++) {
if (this[i] == obj) { return i; }
}
return -1;
}
}
更新:在上面脚本的末尾添加了“indexOf”原型来修复IE错误
更新#2:添加了cookieExpires变量,使用数字设置天数,将其设置为日期()以设置结束日期,或将“null”设置为会话cookie。