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

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

 

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

 

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

 

对应的HTML代码如下:

 

<div data-role="collapsible" id="collapsible">
        	<h3 class="h3">&nbsp</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 = "&nbsp;";
		}
    	dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(value);
	});
});

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值