首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jquery Ui价格滑块cookie

jquery Ui价格滑块cookie
EN

Stack Overflow用户
提问于 2012-11-01 23:35:40
回答 2查看 1.6K关注 0票数 1

我有困难集成cookie支持(不是很好)为休眠价格滑块

下面是js的代码。

代码语言:javascript
复制
$(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

代码语言:javascript
复制
<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支持,这样当访问者选择了什么东西时,它会保存他的选择,而当他刷新页面或返回页面时,它仍然会包含他选择的值。

EN

Stack Overflow用户

发布于 2012-11-02 00:01:14

要在jQuery中添加对cookies的支持,只需遵循以下教程:

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

这个js需要“安装”为jQuery标准插件(所以只需将js文件包含在您的页面中),您将能够在保存购物清单的位置写入和读取cookie。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13180427

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档