如何设置jQuery移动翻转切换开关数组?

时间:2013-05-04 20:01:53

标签: javascript jquery jquery-mobile local-storage jquery-mobile-flipswitch

我正在使用jQuery mobile并且有一组8个选择的翻转开关,具有开启和关闭值。我需要做的是在用户更改时为localStorage中的每个开关设置值。反过来,我还需要获取存储在localStorage中的值,并在页面加载时相应地设置每个开关。这是我到目前为止所拥有的。它还远未完成!

$(document).bind('pageinit', function() {
    function setCats(){
        var cats = $('#categories select');
        var dealCats = localStorage.getItem("Deal Categories");
    }

    function changeCats (){
        var cats = $('#categories select');
        for (var i = 0; i < cats.length; i++) {
            var obj = cats[i];
        }

        $('#categories select').on('change', function(){
            localStorage.setItem('Deal Categories', JSON.stringify(obj.id));
        });
    }

    $('#categories').on('pagebeforeshow', function(){
        setCats();
    });

    $('#categories').on('pageshow', function(){
        changeCats();
    });

});

    <div data-role="page" id="categories">

        <div data-role="header" data-position="fixed">
            <a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">Back</a>
            <h1>Categories</h1>
        </div><!-- header -->

        <div data-role="content">


            <ul data-role="listview">
                <li>
                    <div data-role="fieldcontain">
                    <label for="food">Food & Drink</label>
                        <select name="food" id="food" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                    <label for="activity">Activity</label>
                        <select name="activity" id="activity" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                    <label for="spa">Spa & Salon</label>
                        <select name="spa" id="spa" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                    <label for="fitness">Fitness & Health</label>
                        <select name="fitness" id="fitness" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                    <label for="homeauto">Home & Auto</label>
                        <select name="homeauto" id="homeauto" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                    <label for="medical">Medical/Dental</label>
                        <select name="medical" id="medical" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                    <label for="sports">Sports/Leisure</label>
                        <select name="sports" id="sports" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                    <label for="products">Products</label>
                        <select name="products" id="products" data-role="slider">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>
                    </div>
                </li>

            </ul>


        </div><!-- content -->


    </div><!-- categories -->

有人可以帮忙吗?提前谢谢!

1 个答案:

答案 0 :(得分:1)

以下是一个有效的例子:http://jsfiddle.net/Gajotres/Dxqr2/

首先,我对您的请求稍作修改。我不想打扰8个不同的存储,没有必要为每个元素创建一个存储。最好只创建一个并将所有内容存储在其中。为此我可以将表单元素包装在表单标记中。不,我们不会提交任何内容,只需要它,以便我们可以轻松解析其内容。 无论存在多少选择元素,此代码都将起作用。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="categories">

            <div data-role="header" data-position="fixed">
                <a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">Back</a>
                <h1>Categories</h1>
            </div><!-- header -->
            <div data-role="content">
                <form id="test-form" data-ajax="false">
                    <ul data-role="listview">
                        <li>
                            <div data-role="fieldcontain">
                                <label for="food">Food & Drink</label>
                                <select name="food" id="food" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div data-role="fieldcontain">
                                <label for="activity">Activity</label>
                                <select name="activity" id="activity" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div data-role="fieldcontain">
                                <label for="spa">Spa & Salon</label>
                                <select name="spa" id="spa" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div data-role="fieldcontain">
                                <label for="fitness">Fitness & Health</label>
                                <select name="fitness" id="fitness" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div data-role="fieldcontain">
                                <label for="homeauto">Home & Auto</label>
                                <select name="homeauto" id="homeauto" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div data-role="fieldcontain">
                                <label for="medical">Medical/Dental</label>
                                <select name="medical" id="medical" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div data-role="fieldcontain">
                                <label for="sports">Sports/Leisure</label>
                                <select name="sports" id="sports" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div data-role="fieldcontain">
                                <label for="products">Products</label>
                                <select name="products" id="products" data-role="slider">
                                    <option value="off">Off</option>
                                    <option value="on">On</option>
                                </select>
                            </div>
                        </li>
                    </ul>
                </form>    
            </div><!-- content -->
        </div><!-- categories -->   
    </body>
</html>   

Javascript:

$(document).on('pagebeforecreate', '#categories', function(){ 
    initializeForm(); 
    $(document).off('change', 'select').on('change', 'select', function(){     
        var fields = $(":input").serializeArray();
        storeFormData(JSON.stringify(fields));
    });     
});

function storeFormData(data) {
    localStorage.setItem('formData', data);
}

function initializeForm() {
    var formData = localStorage.getItem('formData');
    if(formData != null) {    
        jQuery.each(jQuery.parseJSON(formData), function(i, field){
            var select = $('select[name="' + field.name + '"]');
            select.find('[value="' + field.value + '"]').attr('selected','selected');
        });
    }
}

如果你想知道方法滑块('刷新')的工作原理,请看看我的另一个答案: jQuery Mobile: Markup Enhancement of dynamically added content