在 Javascript 中使用 JQuery Mobile 将项目添加到列表中 [英] Adding Items to the List Using JQuery Mobile in Javascript

查看：20 发布时间：2021/12/22 23:51:40 javascript jquery jquery-mobile mobile

本文介绍了在 Javascript 中使用 JQuery Mobile 将项目添加到列表中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 JQM 和 JavaScript 的新手.我正在开发一个移动应用程序，其中将包含一个动态生成的列表.我选择了一个生成普通列表项和动态生成项的示例.我在此页面上使用以下示例:http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH11.php

<头><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><身体><div data-role=page id=home><div data-role=header><h1>主页</h1>

<div 数据角色=内容><ol id=list1 data-role=listview data-inset=true><li data-role=list-divider>静态列表</li><li data-icon=delete><a href=#>元素1.1</a><li data-icon=delete><a href=#>元素1.2</a><li data-icon=delete><a href=#>元素1.3</a></ol>

<脚本>var html = "";html += "

";html += "<li data-role=list-divider>动态列表</li>";html += "";html += "<a href=#>元素 2.1</a>";html += "</li>";html += "
";html += "<a href=#>元素 2.2</a>";html += "</li>";html += "

";html += "<a href=#>元素 2.3</a>";html += "</li>";html += "</ol>";$("#home div:jqmData(role=content)").append (html);

如果我将脚本部分移动到一个函数中，比如 AddItem(){} 并调用该函数将动态项附加到下拉列表中，那么附加项的格式不正确并显示为简单文本.

澄清一下，如果我只修改以下行:

 <a href=# onclick="AddItem()">元素 1.1</a>

并将脚本转换为以下函数，它将开始行为不端:

function AddItem(){var html = "";html += "";html += "<li data-role=list-divider>动态列表</li>";html += "";html += "<a href=#>元素 2.1</a>";html += "</li>";html += "
";html += "<a href=#>元素 2.2</a>";html += "</li>";html += "";html += "<a href=#>元素 2.3</a>";html += "</li>";html += "</ol>";$("#home div:jqmData(role=content)").append (html);}

有人可以帮我吗.

谢谢&问候

增强现实

======编辑==========谢谢奥马尔！这真的很有帮助.

当我打算动态创建一个多级列表时，我已将函数更改如下，以便递归调用下一级菜单:

function CreateMenu(x){x++;var html = "";html += "";html += "<li data-role=list-divider>动态列表</li>";html += "";html += ' 元素 ' + x + '.1</a>';html += "</li>";html += "
";html += ' 元素 ' + x + '.2</a>';html += "</li>";html += "";html += ' 元素 ' + x + '.3</a>';html += "</li>";html += "</ol>";$("[数据角色=内容]").empty();$("[数据角色=内容]").append(html);$("#list2").listview();返回;}

虽然它有效，但我应该这样做吗?还是我错过了任何正常的约定?

另外，如果您能指导我使用易于理解的资源来学习 JQuery 选择器以及入门级人员需要的其他类似 refresh() 的东西.

谢谢&问候

安居姆

解决方案

将项目动态添加到活动页面后，您需要通过调用小部件的名称 .listview() 手动增强(样式)元素.

$("[data-role=content]").append(html);$("#list2").listview();

当您将 li 元素添加到现有列表视图时，您需要刷新小部件.

$("#list2").append("foo
").listview("refresh");

<块引用>

演示

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>

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);
}

Can someone please help me out.

Thanks & Regards

======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?

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.

Thanks & Regards

Anjum

解决方案

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();

When you add li elements to an existing listview, you need to refresh the widget.

$("#list2").append("<li>foo</li>").listview("refresh");

Demo

这篇关于在 Javascript 中使用 JQuery Mobile 将项目添加到列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

在 Javascript 中使用 JQuery Mobile 将项目添加到列表中 [英] Adding Items to the List Using JQuery Mobile in Javascript

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

在 Javascript 中使用 JQuery Mobile 将项目添加到列表中 [英] Adding Items to the List Using JQuery Mobile in Javascript

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭