openhab Html5 手机客户端制作问题——我的毕设（三）

　　昨天做到xml的解析，今天开始初步排版，打算开始把每个item分成一行。

　　今天各种测试，终于把append插入行解决了。昨天使用的是BootStrap生成行，但是我第一次使用Bootstrap应该是怪我不会用所以没有建立成功。今天全部使用HTML5+的MUI插件。代码如下：

　　

var newitem = $('<li class="mui-table-view-cell"><p>'+item_name+'</p><span></span><div class="mui-switch  mui-active" data-switch="1"><div class="mui-switch-handle"></div></div></li>');
$("#main").find('ul').append(newitem);

　　HTML文件如下：

    <body>
        <div id="header">
            <p>OpenHab-Html5</p>
        </div>
        <div class="mui-content" id="main">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <p>Hello</p>
                        <span></span>
                        <div class="mui-switch mui-active">
                            <div class="mui-switch-handle"></div>
                        </div>
                    </li>
                </ul>
        </div>
    </body>

获得结果如下：

 

但是有一个问题：append插入和直接写在HTML中是有区别的，append插入的toggle不能切换状态而直接写入的就可以切换。

chrome调试结果一样贴图如下：

 

我这边很郁闷，求HTML高手指点……

 

通过向Dcloud论坛发帖询问，现在终于解决了这个问题：

@DCloud_MUI_FXY回答了这个问题：

var newitem = $('<li class="mui-table-view-cell"><p>'+item_name+'</p><span></span><div class="mui-switch  mui-active"><div class="mui-switch-handle"></div></div></li>');//移除data-switch="1"
 $("#main").find('ul').append(newitem);
mui('.mui-switch')['switch']();//手动初始化

data-switch="1" 这句话是我后来看见chrom中调试结果原生的有，后面append的没有，所以我手动添加的。就差一个手动初始化switch。

自此问题成功解决。晚上继续写代码……

——本文由damoyelang1992在cnblog首发，在开源智能家居论坛有帖转载请联系iqinfei@163.com——

posted @ 2015-05-02 15:14  大漠野狼  阅读(513)  评论(0)    收藏  举报