jquerymobile之collapsible可折叠块标题内容动态显示
2024-09-30 11:15:36
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);
- });
- });
最新文章
- go reflect
- 考勤系统代码分析——主页布局easyui框架
- Yii2 高级版新建一个 Api 应用
- Knights of the Round Table-POJ2942(双连通分量+交叉染色)
- 查询Sqlserver数据库死锁的一个存储过程(转)
- Redis笔记(三)Redis的数据类型
- Oracle函数大全之转换函数
- Selenium2Library系列 keywords 之 _SelectElementKeywords 之 select_from_list(self, locator, *items)
- 第一章 Lambda表达式
- iOS给背景添加点击事件
- 关于jquery获取服务器端xml数据
- HDU 4614 Vases and Flowers (2013多校第二场线段树)
- Linux下获取IP、MAC、网关、掩码的shell脚本
- 完美实现在同一个页面中使用不同样式的artDialog样式
- HDU1560 DNA sequence IDA* + 强力剪枝 [kuangbin带你飞]专题二
- SOFA 源码分析 — 链路数据透传
- numpy的基础运算-【老鱼学numpy】
- Java程序设计的第二次作业
- 找到多个与名为“Home”的控制器匹配的类型
- Python中xlwt解析