JQuery Mobile

今天编写JQuery Mobile程序，需要对数组数据动态创建，并且每条数据对应一个复选框，于是我很顺利写了一个Demo，当我运行时候发现，和我期望的不一样！复选框确实创建出来了，但是却没有CSS效果，完全是Html的！于是上网搜索，想尽快解决，但是，发现网上目前提供的方法都无法解决！！最终，我就算是搞定这个问题了吧，下面我说说解决方法，抛砖引玉！

我最开始的想法是直接使用控件组，那样直接就创建出来一组复选框了，我对这个复选框父控件插入我动态更新的内容，不就可以了吗？这是我最开始的代码：

        <fieldset data-role="controlgroup" style="margin-left: -5px" id="activity-controlgroup" class="test">
            <label for="red">包饺子</label>
            <input type="checkbox" name="activity-radio" id="red" value="red">
            <label for="green">丢手绢</label>
            <input type="checkbox" name="activity-radio" id="green" value="green">
            <label for="blue">投沙包</label>
            <input type="checkbox" name="activity-radio" id="blue" value="blue">
        </fieldset>

但是，经过一番努力，发现在动态更新了里面内容后，怎么也无法让JQuery Mobile启动CSS，和其它控件风格一致！！！！

折腾半天后，停下来，喝了一点咖啡，随后我就开始想，这个东西到底该怎么能到达或接近JQuery Mobile的CSS效果呢？让这些复选框和这个页面中的其它JQuery Mobile效果一致？在我的程序里面，很多地方用到了listview，它也需要动态更新数据，listview有个方法“refresh”，在更新完数据后，调用这个方法就可以了！于是，我就去JQuery Mobile的官方网站看资料去了，最终查看以下这么多控件具备“refresh”方法：

 具备refresh方法的控件：

1，Collapsibleset Widget 

2，Filterable Widget

3，Flipswitch Widget

4，Listview Widget

5，Rangeslider Widget

6，Selectmenu Widget

7，Slider Widget

8，Column-Toggle Table Widget

9，Reflow Table Widget

10，Tabs Widget

11，Toolbar Widget

好了，我为什么去看哪些控件具备“refresh”方法呢？换成Delphi来说吧，并不是所有它的控件都具备容器功能，有容器功能的控件可以容纳其它控件，不仅仅是Delphi，包括其它很多种图形界面开发工具和具有图形库的语言，都是这样的！那么很可能，在JQuery Mobile里，具备“refresh”方法的控件，是容器功能控件，可以容纳其它控件！如果是这样，那么，我把我要动态加载的复选框放到具备“refresh”方法的容器控件里，是不是就可以了呢？下面就是我当前的代码：

1，被点击的按钮。点击它，动态创建那些要更新的内容，并更新到指定位置。

 <a href="#" id="activityDetail2-selectCourse" onclick="CreateActivity()"
           class="ui-btn ui-corner-all ui-shadow ui-btn-inline"
           style="padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;margin-left: -5px;margin-top: -5px">选择课时</a>

2，响应上面按钮的函数。

    <script language="JavaScript">

        function CreateActivity() {

            //要更新的数据
            var temp = '';
            for (var i = 1; i < 5; i++) {

                temp += '<label for="activity-' + i + '" >活动 ' + i + '</label>';
                temp += '<input type="checkbox" name="activity" id="activity-' + i + '" value="">';
            }

            //对指定的工具栏更新数据
            $("#activity-controlgroup").html(temp);

            //刷新刚动态更新数据的工具栏
            $("#activity-controlgroup").toolbar("refresh");
        }
     </script>

3，两个Toolbar类型的容器。两个做对比。

        <div data-role="footer" id="activity-controlgroup2">
            <h4>Powered by jQuery Mobile</h4>
        </div>

        <br>

        <div data-role="footer" id="activity-controlgroup" class="ui-corner-all ui-shadow">
            <h4>Powered by jQuery Mobile</h4>
        </div>

截图就不上了，把这些代码放到可以正常运行的JQuery Mobile页面中，运行一下就可以看到效果了！目前这种程度不一定完全适合每个人，个人根据自己需要继续调整CSS吧！！

参考：

https://api.jquerymobile.com/category/widgets/

http://demos.jquerymobile.com/1.4.4/toolbar/#&ui-state=dialog