使用Java的JQuery Mobile将项目添加到列表中 [英] Adding Items to the List Using JQuery Mobile in Javascript
问题描述
我是JQM和JavaScript的新手.我正在开发一个移动应用程序，其中将包含将动态生成的列表.我选择了一个示例，该示例可以生成正常的列表项以及可以动态生成的项.我在此页面上使用以下示例: http://the-jquerymobile -tutorial.org/jquery-mobile-tutorial-CH11.php
I am new to JQM as well as JavaScript. I am developing a mobile application that will contain a list that will be dynamically generated. I have picked up an example which generates normal list items as well as dynamically generated items fine. I am using the following example on this page: http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH11.php
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<ol id=list1 data-role=listview data-inset=true>
<li data-role=list-divider>Static list</li>
<li data-icon=delete>
<a href=#>Element 1.1</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.2</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.3</a>
</li>
</ol>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.1</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.2</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.3</a>";
html += "</li>";
html += "</ol>";
$("#home div:jqmData(role=content)").append (html);
</script>
如果我将脚本部分移到一个函数中，请说AddItem(){}并调用该函数以将动态项附加到下拉菜单中，则其他项的格式将不正确，并显示为简单文本.
If I move the Script portion into a function, Say AddItem(){} and call that function to append the Dynamic items to the dropdown then the additional items are not properly formatted and appear as simple text.
请澄清一下，如果我只是修改以下行:
Just to clarify, if I just modify the following row:
<li data-icon=delete>
<a href=# onclick="AddItem()">Element 1.1</a>
</li>
并将脚本转换为以下功能，它将开始出现异常:
and shift the script into following functions it will start misbehaving:
function AddItem()
{
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.1</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.2</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.3</a>";
html += "</li>";
html += "</ol>";
$("#home div:jqmData(role=content)").append (html);
}
有人可以帮我吗?
感谢&问候
AR
======编辑========= 谢谢奥马尔！那真的很有帮助.
======EDIT========= Thanks Omar! That was really helpful.
当我打算动态创建一个多级列表时，我对功能进行了如下更改，以便它递归地调用下一级菜单:
As I intend to dynamically create a multi-level list I have changed the function as below so that it recursively calls next level menu:
function CreateMenu(x)
{
x++;
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.1</a>';
html += "</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.2</a>';
html += "</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.3</a>';
html += "</li>";
html += "</ol>";
$("[data-role=content]").empty();
$("[data-role=content]").append(html);
$("#list2").listview();
return;
}
尽管它正在工作，但是那应该怎么做?还是我错过任何常规约定?
Although it's working but is that how I should be doing? Or am I missing any of the normal conventions?
此外，如果可以的话，请引导我进入一个易于理解的资源，以学习JQuery选择器以及入门级人员将需要的其他诸如thisrefresh()之类的东西.
Also if you could please guide me to an easy to understand resource to learn JQuery Selectors and other stuff like this refresh() which a entry level person would require.
感谢&问候
Anjum
推荐答案
将项目动态添加到活动页面后，您需要通过调用小部件名称.listview()来手动增强(样式)元素.
After appending the items dynamically to active page, you need to enhance (style) elements manually by calling widget's name .listview().
$("[data-role=content]").append(html);
$("#list2").listview();
将li元素添加到现有列表视图时，需要refresh小部件.
When you add li elements to an existing listview, you need to refresh the widget.
$("#list2").append("<li>foo</li>").listview("refresh");
Demo
这篇关于使用Java的JQuery Mobile将项目添加到列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
