1.可折叠块
按照w3school 教程块的说法如下:
可折叠的内容块
可折叠(Collapsibles)允许您隐藏或显示内容 - 对于存储部分信息很有用。
如需创建可折叠的内容块,请向某个容器分配 data-role="collapsible" 属性。在容器(div)中,添加一个标题元素(h1-h6),其后是您需要扩展的任意 HTML 标记:
实例
<div data-role="collapsible"
>
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>
默认地,该内容是关闭的。如需在页面加载时扩展内容,请使用 data-collapsed="false":
.......................略。
但仅按以上几个属性动态生成出来的折叠块无法完成渲染,无法达到预想的效果
解决方案:
js
$("#showProductInfo_div div:gt(0)").remove(); var width = $(window).width()/3.9 $.each(data.myProductList,function(i,v){ var content = "<div style='width: 98%;' data-role='collapsible'><h3 width='96%' style='margin-left: 2%;'>产品名称 <span style='float:right;padding-right:2%;'>移除</span></h3>" +"正文部分</div>"; $("#showProductInfo_div:last").append(content).collapsibleset( "refresh" ); });
html
<div id="showProductInfo_div" data-role="collapsibleset" data-content-theme="a" data-iconpos="right"> <div style="width: 98%" data-role="collapsible"> <h3 style="margin-left: 2%;">产品名称 <span style="float:right;padding-right:2%;">移除</span></h3> </div> </div>
注意,在此前js等一些文件勿忘记引入.
资料来源: http://demos.jquerymobile.com/1.4.5/collapsible-dynamic/#&ui-state=dialog
资料来源: http://demos.jquerymobile.com/1.4.5/collapsible-dynamic/#&ui-state=dialog
2.表单动态加载后渲染
这个比较简单,在append后增加一个 .trigger("create"); 即可重新渲染,
如:$("#showProductInfo_div:last")append(content).trigger("create");
运行结果: