jQuery UI的價格滑塊餅乾

Question

具有用於休耕價格滑塊

這裏集成支持cookie（它不是那麼好）的dificulties

IM對於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中只需按照本教程：

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