Question

即时通讯有很多需要整合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支持，所以当访问者选择某些东西时，它将保存他的选择，当他刷新页面或返回页面时，它仍将包含他选择的值。

Answer 1

试试这个，它应该与cookies一起使用

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

Answer 2

在jQuery中添加对cookie的支持，请按照本教程进行操作：

http://www.electrictoolbox.com/jquery-cookies/

这个js需要“安装”作为jQuery标准插件（所以只需在页面中包含js文件），你就可以在保存商店列表的地方编写和阅读cookie。

Answer 3

你想要的是plugin for jQuery called $.cookie()。

然后你可以做类似的事情：

    slide: function(event, ui) {
        var min = ui.values[0],
            max = ui.values[1];

        $("#amount").val("$" + min + " - $" + max);

        $.cookie('the_cookie', { min: min, max: max });

        showProducts(min, max);
    }

jquery Ui价格Slider cookie

3 个答案: