在jQuery Mobile中动态创建的可折叠集
Dynamically created collapsible-set in jQuery Mobile
好吧,一旦我看到这个问题的答案,我会觉得自己很愚蠢。 我确信这一点。
我已经完全按照我以前想要的方式创建了它,但我现在正在为新版本重构我的代码。 我正在尝试在jQuery Mobile中动态创建可折叠集,但我的html无法正确呈现。
<div data-role="header">
<h2>Playground</h2>
</div>
<div data-role="content">
<div data-role="button" id="addprimary" data-inline="true">Add 5</div>
<div data-role="collapsible">
<h4>Collapsible</h4>
<form id="makecollapsible">
</form>
</div>
</div>
<div data-role="footer">
<h4>Please, no applause</h4>
</div>
</div>
<script>
$('#addprimary').on('click', function () {
Markup.Collapsible();
});
var Markup = new Object();
Markup.Collapsible = function () {
$('#makecollapsible')
.append($('<div>')
.attr({ 'data-role': 'collapsible-set', 'id': 'primary' })
);
for (i = 0; i < 5; i++) {
($('<div>')
.attr({ 'data-role': 'collapsible', 'data-content-theme': 'c',
'data-collapsed': 'true' })
.html('<h4>' + i +'</h4>'))
.appendTo('#primary');
}
}
</script>
有人可以看看这个 http://jsfiddle.net/c2jLY/,告诉我我做错了什么吗? 我的<div>
data-role='collapsible'
没有呈现为可折叠对象,这也对我稍后尝试放入其中的 HTML 产生了影响。
感谢帮助,谢谢!
Markup.Collapsible
在函数内部和末尾添加以下内容。对于可折叠集,你需要告诉jQM你正在增强一个.collapsibleset()
,并将其与.trigger('create')
结合起来。
$('#makecollapsible').collapsibleset().trigger('create');
演示
我忘了提到,当动态附加项目时,在父元素上调用增强方法;这样做,将增强子元素。因此,无需对追加的每个可折叠对象使用.collapsible().trigger('create')
。
我在这里展示的很简单,但可以工作:
<script type="text/javascript">
//dynamically make 10 collapsible items and append them to the collapsible-set
var jj = "SUPER item added..";
$('[data-role="content"]').append('<div id="set" data-role="collapsible-set"></div>');
var count;
for (count=0; count < 10; count++) { // div id should be from id='c0' to 'c9'
$("#set").append('<div id="c' + count + '" data-role="collapsible">');
$("#c" + count.toString()).append('<h3>Adding element_' + count +'</h3>');
$("#c" + count.toString()).append(jj + 'count ' + count + '</div>');
}
// either one is tested working below:
// $('[data-role="content"]').trigger('create');
$( "#set" ).collapsibleset( "refresh" );
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<!------------------------page 1 ListView template-->
<div data-role="page" id="page01">
<div data-role="header" data-theme="b" data-position="fixed">
<h2>-- DEMO -- </h2>
</div>
<div data-role="content" id="content">
</div>
</body>
相关文章:
- 可折叠树在第二级不显示子树
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 只使用CSS创建可折叠菜单或spry菜单
- 可以't以编程方式关闭jQuery移动弹出窗口中的可折叠部分
- QML中的可折叠面板
- 可折叠容器/柱.添加多个链接
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 如何防止我的引导可折叠框滚动页面
- 如何以可扩展和可折叠的树形结构显示XML模式
- 单击一个后自动折叠所有其他可折叠内容
- 如何在HTM文件中创建与可折叠面板扩展程序等效的扩展程序
- 如何在Graphiti中创建可折叠图
- d3js:创建一个可折叠的表&嵌套数据的问题
- 从 CSV 数据创建 D3.js 可折叠树
- 创建可折叠侧边菜单
- 如何在不折叠其他列的情况下创建具有全宽内容的引导可折叠面板
- 在jQuery Mobile中动态创建的可折叠集
- 如何在Ajax可折叠面板展开时更改面板的颜色,该面板是在代码隐藏中创建的
- 在extjs的面板中创建一个可折叠的框或窗口
- 如何创建可折叠的网格、表或列