jquerymobile之collapsible可折叠块标题内容动态显示

jquery mobile提供了一种可折叠的组件--data-role="collapsible"，这种组件可以通过点击折叠块头部来展开/折叠块内的内容，详细组件说明可参考w3cshool可折叠块。

在做一个小项目的时候，我有一个模块用到了可折叠块这个组件：初始页面时collapsible的标题是空的，只有用户在collapsible下面的文本框输入内容后，标题会跟文本框内容同步。

如下图所示，初始界面时，collapsible标题为空，只有在“险种”文本框中输入内容，collapsible标题才会产生变化。

对应的HTML代码如下：

1. <div data-role="collapsible" id="collapsible">
2. <h3 class="h3">&nbsp</h3>
3. <div class="ui-field-contain" data-controltype="textinput">
4. <label for="insurance_name">
5. 险种
6. </label>
7. <input name="insurance_name" value="" type="text">
8. </div>
9. <div class="ui-field-contain" data-controltype="textinput">
10. <label for="insurance_company">
11. 投保公司
12. </label>
13. <input name="insurance_company" value="" type="text">
14. </div>
15. <div class="ui-field-contain" data-controltype="dateinput">
16. <label for="insurance_date">
17. 投保日期
18. </label>
19. <input name="insurance_date" value="" type="date">
20. </div>
21. <div class="ui-field-contain" data-controltype="textinput">
22. <label for="insurance_year">
23. 年期
24. </label>
25. <input name="year_period" value="" type="text">
26. </div>
27. <div class="ui-field-contain" data-controltype="textinput">
28. <label for="insurance_cost">
29. 年保费
30. </label>
31. <input name="year_cost" value="" type="text">
32. </div>
33. <div class="ui-field-contain" data-controltype="textarea">
34. <label for="insurance_comment">
35. 备注
36. </label>
37. <textarea name="insurance_comment"  placeholder=""></textarea>
38. </div>
39. </div>
40. </div>

要想监听“险种”文本框值变化，就需要用到input和propertychange这两个事件，这两个事件是监听内容变化的。

1. dom.bind('input propertychange', function() {
2. //do something
3. });

只要绑定好这两个内容变化事件，然后在事件体里面编写collapsible标题赋值代码即可搞定问题。

collapsible标题对应前面HTML代码中的"<h3></h3>"元素，但是通过$("h3").html(dom.val())这种形式给它赋值是错误的，这样会导致collapsible样式乱套。因为jquerymobile在上面html基础上动态创建了别的节点元素和样式，最终才会有这样折叠的效果。

可以通过浏览器查看最终的页面元素，你就会发现它与原本的HTML有很大的变化。

 上图<span class="ui-btn-text"></span>才是现实标题内容的节点。

所以要想给collapsible标题赋值，就需要找到class为ui-btn-text的节点。

1. dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(dom.val());

完整的javascript代码应该这样来写：

1. $(document).on("pageinit", "#insurer_list_page", function() {
2. var dom = $("#collapsible-set").find("input[name='insurance_name']");
3. dom.bind('input propertychange', function() {
4. var value = dom.val();
5. if($.isNull(value)){
6. //输入内容为空，则以空格填充
7. value = "&nbsp;";
8. }
9. dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(value);
10. });
11. });