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高手指点……

——本文由damoyelang1992在cnblog首发,在开源智能家居论坛有帖转载请联系[email protected]——

时间: 2024-08-02 02:41:50

openhab Html5 手机客户端制作问题——我的毕设(三)的相关文章

HTML5 手机网页制作笔记

最近在卓手机网页,第一次入手.把要用到的相关东西整理记录下来. 一.http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 介绍如下 二.允许网页宽度自动调整 "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, init

基于Html5的智能家居手机客户端设计(一)——找到openhab的rest

今天开始我的毕业设计,基于HTML5的智能家居手机客户端设计.挑剔了好久,终于找到我可以使用国外开源项目智能家居核心,通过restful(我也不是很懂,毕竟我只是电子信息学院爱好网络). REST描述了一个架构样式的网络系统,比如 web 应用程序.在目前主流的三种Web服务交互方案中,REST相比于SOAP(Simple Object Access protocol,简单对象访问协议)以及XML-RPC更加简单明了,无论是对URL的处理还是对Payload的编码,REST都倾向于用更加简单轻量

互联网时代,手机APP制作已逐渐成为主流

随着互联网的高速发展,智能手机从进入人们的视线开始,就成为了生活中的必需品.现实中,患有手机依赖症的人数不胜数,而他们依赖手机,追根结底是依赖智能手机上各种各款的APP.手机APP可以说大大的丰富了人们的业余生活,种类从聊天APP.影音APP.购物剁手APP等功能反复的软件到简单的计算器.备忘录,各种类型应有尽有,似乎少了手机APP的生活都不算完整.这也就使得手机APP制作成为当前企业顺应时代潮流发展的趋势了. 对于普通使用者来说,手机APP是他们排忧解压.享受业余之乐的工具,而对企业来说,手机

今天我发现了一个网站有很多的html5手机wap网站模板,在这里分享一下

手机wap静态网页模版仿中国新闻网微官网 山东红十字会医院3g手机版网站模版 html制作***3G静态wap网站模版 html仿南通和美家***网站静态模版参考 3g手机网站模版仿广州曙光*** 3g手机网页模版仿北京航空466医院手机WAP站点 3G wap妇科医院网站模板仿北京艾丽斯妇科医院 3G手机静态模版仿杭州玛莉亚妇产医院wap下载 3G手机静态模版仿江门玛丽妇科医院手机网站 仿南都网新闻手机网站模板_wap手机端网站模板下载 环球新闻手机版wap网站模板 3G手机网站静态模版仿人民

html5手机Web单页应用实践--起点移动阅读

一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发现越改越多越改越多- 注意此web应用只支持android及iphone内的浏览器,及PC或mac上的chrome,safari,firefox等支持html5的浏览器.IE10以上浏览器 这算是试验版了吧,以前没这么弄过.. 手机访问http://crapi.4gshu.com:8096/4g-r

中国最好的外汇平台新增手机客户端让你玩转世界

NordFX公司很高兴向大家推出可以在iPhone和Android操作系统上进行外汇交易的免费应用程序.从现在起,通过 NordFX MT4 iTrader 和 NordFX MT4 droidTrader 应用程序,您就可以使用手机或者平板电脑随时随地接入移动互联网并进行外汇交易! NordFX公司的移动交易应用配备了友好的用户界面,并与功能丰富的MetaTrader4交易平台相结合. 主要功能: 在即时图表上进行实时交易 能够使用所有可用的交易工具 打开买单和卖单 打开挂单 给定单设置止损价

高效省心实惠的手机APP制作平台

当今的移动互联网+时代,几乎人们生活中所有的服务内容都可以通过手机APP来完成,手机APP制作已是成功项目在商场竞争中必不可少的因素. APICloud正是应海量手机APP的制作需求而诞生的.作为中国领先的"云端一体"移动应用云服务提供商,APICloud重新定义了移动应用开发,为开发者从"云"和"端"两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天,可以帮助开发者快速实现移动应用的开发.测试.发布.管理和运营的全

西安手机网站制作公司及价格

百家企业和个人的西安诺可可网络公司为大家介绍一些关于手机网站制作价格差异这么大的原因: 没有针对性建手机网站 就之前说过的,没有对手机网站制作进行调查策划,导致没有针对性的建手机网站.不同的行业运作不一样,做的服务.业务等也不一样,当然手机网站制作的需求功能也不 一样.专业的建手机网站一定是配合客户,通过手机网站制作配合企业日常的事务解决一些问题 ,针对性的建手机网站,最终才会在手机网站上获得理想的效果. 没有良好的售后服务 售后服务很重要,特别是对中小企业来说,如果没有一个专业管理手机网站的人

学习手机页面制作4

学习手机页面制作-制作固定-流式-固定的布局 制作左右固定宽度中间自适应的页面布局 具体的页面效果可以http://m.juhuasuan.com/m/index.htm 的头部导航 传统的布局方式 使用定位的方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定比例固定</title&