jquery mobile提供了一种可折叠的组件--data-role="collapsible",这种组件可以通过点击折叠块头部来展开/折叠块内的内容,详细组件说明可参考w3cshool可折叠块。
在做一个小项目的时候,我有一个模块用到了可折叠块这个组件:初始页面时collapsible的标题是空的,只有用户在collapsible下面的文本框输入内容后,标题会跟文本框内容同步。
如下图所示,初始界面时,collapsible标题为空,只有在“险种”文本框中输入内容,collapsible标题才会产生变化。
对应的HTML代码如下:
<div data-role="collapsible" id="collapsible"> <h3 class="h3"> </h3> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_name"> 险种 </label> <input name="insurance_name" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_company"> 投保公司 </label> <input name="insurance_company" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="dateinput"> <label for="insurance_date"> 投保日期 </label> <input name="insurance_date" value="" type="date"> </div> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_year"> 年期 </label> <input name="year_period" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_cost"> 年保费 </label> <input name="year_cost" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="textarea"> <label for="insurance_comment"> 备注 </label> <textarea name="insurance_comment" placeholder=""></textarea> </div> </div> </div>
要想监听“险种”文本框值变化,就需要用到input和propertychange这两个事件,这两个事件是监听内容变化的。
dom.bind('input propertychange', function() { //do something });
只要绑定好这两个内容变化事件,然后在事件体里面编写collapsible标题赋值代码即可搞定问题。
collapsible标题对应前面HTML代码中的"<h3></h3>"元素,但是通过$("h3").html(dom.val())这种形式给它赋值是错误的,这样会导致collapsible样式乱套。因为jquerymobile在上面html基础上动态创建了别的节点元素和样式,最终才会有这样折叠的效果。
可以通过浏览器查看最终的页面元素,你就会发现它与原本的HTML有很大的变化。
上图<span class="ui-btn-text"></span>才是现实标题内容的节点。
所以要想给collapsible标题赋值,就需要找到class为ui-btn-text的节点。
dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(dom.val());
完整的javascript代码应该这样来写:
$(document).on("pageinit", "#insurer_list_page", function() { var dom = $("#collapsible-set").find("input[name='insurance_name']"); dom.bind('input propertychange', function() { var value = dom.val(); if($.isNull(value)){ //输入内容为空,则以空格填充 value = " "; } dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(value); }); });
相关推荐
jQuery Mobile 可折叠块 可折叠内容块 可折叠块允许您隐藏或显示内容 – 对于存储部分信息很有用。 如需创建一个可折叠的内容块,需要为容器添加 data-role=”collapsible” 属性。在容器(div)内,添加一个标题...
jQuery mobile滑动式的标题导航
2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。...
使用jquerymobile移动框架,利用jquery的ajax滚动加载内容。
jquery mobile listview动态加载json
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jQuery mobile相册的一种样式
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框
jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。...
使用jquerymobile移动框架,利用jquery的ajax滚动加载内容。
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了...
jQuery mobile标题式的简介(部分联网)
6.2 可折叠的内容块 6.3 可折叠的设置 6.4 使用css渐变进行样式化 6.5 总结 第7章 创建可主题化的设计 7.1 主题基础知识 7.2 主题和调色板 7.3 主题默认值 7.4 主题继承 7.5 自定义主题...
jQuery mobile卡片式的时钟显示
jQuery mobile动态的图片变化
jQuery Mobile快速入门.pdf
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者,可以从中学习JQuery Mobile的所有接口与组件的功能,同时通过范例进行练习;对于JQuery Mobile开发人员...
本资源以Hello Word为例,里面包含了jQuery Mobile框架所需要的部署文件。