0

我正在使用 jquery mobile 制作 phonegap 应用程序。我在 listview 中遇到问题。如果我有几个项目已经在列表视图中并且我正在添加更多项目，那么我想在列表视图中添加的项目具有不同的样式。如何在之前和之后添加的两个列表项上添加相同的样式。谢谢。

在此处输入图像描述

<html>
<head>
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    alert("hello");
    $('#employeeList').append('<li data-icon=delete >hello</li>');
    $('#employeeList').append('<li><a>hello</a></li>');
    $('#employeeList').append('<li><a>hello</a></li>');
    });
    </script>
</head>
<body>
        <div data-role=page id=home>
        <div data-role=header>
        <h1>Home</h1>
        </div>
        <div data-role=listview>
        <ul id="employeeList" class="icon-list"></ul>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        </div>
        <div data-role=footer data-position="fixed">
        <h1 >Thanks</h1>
        </div>
        </div>
</body>

4

3 回答 3

2

使用这个脚本，

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
alert("hello");
$('#employeeList').append('<li data-icon=delete >hello</li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').listview('refresh');
});
</script>

li 也应该在 ul 标签内

于 2013-09-19T05:02:27.037 回答
1

JS

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#employeeList').append('<li data-icon=delete >hello</li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').listview('refresh'); //You are missing this one
});
</script>

HTML

<!-- Your Markup should be something like below -->
<ul id="employeeList" data-role="listview">
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
   </ul>
于 2013-09-19T05:07:15.227 回答
1

'hello' 项目具有不同风格的原因是它们在标签内。

$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li>hello</li>'); //look differently from the previous line

您还应该考虑将所有属性都放在双引号中：

<div data-role="page" id="home">
<div data-role="header">

下面的演示总结在一起： 演示：JSFiddle

于 2013-09-19T05:12:40.547 回答