jquery Ui价格滑块cookie
jquery Ui价格滑块cookie
提问于 2012-11-01 23:35:40
我有困难集成cookie支持(不是很好)为休眠价格滑块
下面是js的代码。
$(window).load(function(){
function showProducts(minPrice, maxPrice) {
$("#products li").hide().filter(function() {
var price = parseInt($(this).data("price"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
$(function() {
var options = {
range: true,
min: 0,
max: 500,
values: [50, 300],
slide: function(event, ui) {
var min = ui.values[0],
max = ui.values[1];
$("#amount").val("$" + min + " - $" + max);
showProducts(min, max);
}
}, min, max;
$("#slider-range").slider(options);
min = $("#slider-range").slider("values", 0);
max = $("#slider-range").slider("values", 1);
$("#amount").val("$" + min + " - $" + max);
showProducts(min, max);
});
});和html
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<div class="demo">
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range"></div>
<ul id="products">
<li data-price="10"> product - £10 </li>
<li data-price="50"> product - £50 </li>
<li data-price="100"> product - £100 </li>
<li data-price="150"> product - £150 </li>
<li data-price="200"> product - £200 </li>
</ul>
</div
这是我jsfindle Price slider的链接
它使用jquery 1.72
我的问题是如何给它添加cookie支持，这样当访问者选择了什么东西时，它会保存他的选择，而当他刷新页面或返回页面时，它仍然会包含他选择的值。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-11-02 00:05:56
试试这个，它应该可以和cookie一起工作。
演示：http://jsfiddle.net/nSJAS/38/
JS代码：
//COOKIE code from MDN https://developer.mozilla.org/en-US/docs/DOM/document.cookie
var allCookies = {
getItem: function (sKey) {
if (!sKey || !this.hasItem(sKey)) { return null; }
return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Tue, 19 Jan 2038 03:14:07 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toGMTString();
break;
}
}
document.cookie = escape(sKey) + "=" + escape(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
},
removeItem: function (sKey, sPath) {
if (!sKey || !this.hasItem(sKey)) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sPath ? "; path=" + sPath : "");
},
hasItem: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: /* optional method: you can safely remove it! */ function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = unescape(aKeys[nIdx]); }
return aKeys;
}
};
function showProducts(minPrice, maxPrice) {
$("#products li").hide().filter(function() {
var price = parseInt($(this).data("price"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
var min_value = parseInt(allCookies.getItem("cookie_min_val"), 10);
min_value = (min_value > 0) ? min_value : 0;
var max_value = parseInt(allCookies.getItem("cookie_max_val"), 10);
max_value = (max_value > 0) ? max_value : 0;
//alert(cookie_val);
$(function() {
var options = {
range: true,
min: 0,
max: 300,
values: [min_value?min_value:50, max_value?max_value:300],
slide: function(event, ui) {
var min = ui.values[0],
max = ui.values[1];
$("#amount").val("$" + min + " - $" + max);
allCookies.setItem("cookie_min_val", min, "", "/");
allCookies.setItem("cookie_max_val", max, "", "/");
showProducts(min, max);
}
}, min, max;
$("#slider-range").slider(options);
if(min_value>0){
min = min_value;
max = max_value;
}else{
min = $("#slider-range").slider("values", 0);
max = $("#slider-range").slider("values", 1);
}
$("#amount").val("$" + min + " - $" + max);
showProducts(min, max);
});Stack Overflow用户
发布于 2012-11-02 00:01:14
要在jQuery中添加对cookies的支持，只需遵循以下教程：
http://www.electrictoolbox.com/jquery-cookies/
这个js需要“安装”为jQuery标准插件(所以只需将js文件包含在您的页面中)，您将能够在保存购物清单的位置写入和读取cookie。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13180427
复制相关文章
相似问题
腾讯云开发者
