在jquery mobile中添加动态内容时的正确格式 [英] Proper formatting when adding dynamic content in jquery mobile
问题描述
我正在尝试将一些内容动态添加到jQuery Mobile中可折叠< li>
项目的复选框列表中。我无法通过漂亮的圆角和分组项目获得正确的格式。当我在叶级别添加其他元素时,情况变得更糟。
I am trying to dynamically add some content to a list of checkboxes in an collapsible <li>
item in jQuery Mobile. I cannot get the proper formatting with the nice rounded corners and the grouped items. It gets even worse when I add other elements at the leaf level.
这里是一个显示问题的示例(显然在标题中添加jquery和jquerymobile脚本和CSS):
Here is an example that shows the problem (add jquery and jquerymobile scripts and CSS in the header obviously):
<body>
<div data-role="page" id="page">
<ul id="listList" data-role="listview">
<li id="list1" data-role="collapsible">
<h3>list 1</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" id="fs1">
<input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li>
<li id="list2" data-role="collapsible">
<h3>list 2</h3>
<p>here comes another list of checkboxes...</p></li></ul>
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div>
</body>
<script>
function addCheckbox() {
$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>');
}
</script>
我试图添加 .page()
在调用 append()
之后但是它虽然好一点但是没有正常工作。
I tried to add .page()
after the call to append()
but it did not work properly though a bit better.
除了我的例子,一般的问题是在jQuery Mobile玩弄DOM结构之后如何动态地将内容附加到DOM树。我相信存在一个jquerymobilizes部分树的功能,但我找不到它。
Beyond my example, the generic question is how to dynamically append content to the DOM tree after jQuery Mobile has played around with the DOM structure. I believe there exists a function that "jquerymobilizes" part of the tree but I cannot find it.
非常感谢你的帮助!
编辑:简而言之,我正在尝试动态地将元素添加到的
而不是尝试将元素添加到列表本身。刷新< li>
元素中listview listview
在这里似乎没有帮助。
In short, I am trying to dynamically add elements into one <li>
element of the listview
and not trying to add elements to the list itself. Refreshing the listview
does not seemt o help here.
编辑2:我是我找到了 .trigger(create)
函数,可以链接到 .append()
(参见 JQM常见问题解答)。使用以下脚本虽然 data-role =controlgroup
没有提供带有漂亮圆角框的正确格式,但效果稍好。
EDIT 2: I am getting a bit closer as I found the .trigger("create")
function that can be chained to .append()
(cf JQM FAQ). With the following script it works slightly better though the data-role="controlgroup"
does not provide the right formatting with nice rounded boxes.
$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");
如果我到达那里,我会发布完整答案。
I will post the full answer if I get there at some point.
编辑3:以下是 jsFiddle
EDIT 3: Here is my example illustrated in jsFiddle
推荐答案
我想我可以回答我自己的问题,所以这里是我得到的:
I think I could answer my own question so here is what I got:
- 在jQuery Mobile中动态添加元素使用
.trigger(create)
(参见 jQuery Mobile常见问题解答) - 将它们添加到可折叠元素的可折叠部分,将其添加到
div.ui-collapsible-content
或在可折叠部分事前中创建div
容器,以便您直接在那里添加内容 - 以获得分组复选框的精美渲染,您应该立即添加所有复选框(当我按顺序添加它时,我无法获得圆滑的圆角
- to dynamically add elements in jQuery Mobile use
.trigger("create")
(cf. jQuery Mobile FAQ) - to add them to the collapsible part of a collapsible element add it to
div.ui-collapsible-content
or create adiv
container within the collapsible part ex ante so you add the content directly there - to get the nice rendering of grouped checkboxes, you should add all the checkboxes at once (I could not get the sleek rounded corners when I added them sequentially
S. o这是我的最终脚本,它可以满足我的需求:
So here is my final script that does what I needed:
$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">'
+'<input type="checkbox" id="cb1" /><label for="cb1">text</label>'
+'<input type="checkbox" id="cb2" /><label for="cb2">More text</label></fieldset>'
+'<a href="index.html" data-role="button" data-icon="delete">Delete</a>')
.trigger("create");
我希望它有所帮助!
这篇关于在jquery mobile中添加动态内容时的正确格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!