<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css" />
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script >
$(function(){
var data=[
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
];
var viewObj=$("#allProductUl");
for(var i=0; i<data.length; i++){
var liTplObj=$("#allProductLi").clone();
for(var key in data[i]){
$("[dbField='"+key+"']",liTplObj).html(data[i][key]);
}
viewObj.append(liTplObj);
}
viewObj.listview("refresh");
//viewObj.selectmenu("refresh",true);
});
</script>
</head>
<body>
<div data-role="page" id="allProduct" data-fullscreen="false">
<div data-role="header" data-theme="b" data-position="fixed" >
<div data-role="navbar" >
<ul>
<li><a href="" data-ajax="false" class="ui-btn-active" data-transition="none">商品列表1</a></li>
</div>
</div>
<ul id="allProductUl" data-role="listview" data-inset="true" style="margin-top:0px;">
<li id="allProductLi">
<a href="/productDetail.vm" data-transition="slide" data-ajax="false">
<img src="" style="margin-top:10px;" />
<h4 class="productName" style="margin-top:0px;" dbField='productName'>电脑</h4>
<p class="productPrice" style="margin-top:10px;">
<span>¥</span><span dbField='price' style="color:#f00;">160</span>
<span style="margin-left:10px;">¥</span><span dbField='deposit'>100</span>
</p>
<p style="margin-top:10px;margin-bottom:5px;">
<span style="font-size:12px;">库存:</span><span dbField='repertory' style="font-size:12px;">60</span><span style="font-size:12px;">件</span><span style="margin-left:10px;font-size:12px;" >已卖:</span><span style="color:#f00;font-size:12px;" dbField='sale'>20</span><span style="color:#000;font-size:12px;">件</span>
</p>
</a>
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css" />
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script >
$(function(){
var data=[
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
{productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},
];
var viewObj=$("#allProductUl");
for(var i=0; i<data.length; i++){
var liTplObj=$("#allProductLi").clone();
for(var key in data[i]){
$("[dbField='"+key+"']",liTplObj).html(data[i][key]);
}
viewObj.append(liTplObj);
}
viewObj.listview("refresh");
//viewObj.selectmenu("refresh",true);
});
</script>
</head>
<body>
<div data-role="page" id="allProduct" data-fullscreen="false">
<div data-role="header" data-theme="b" data-position="fixed" >
<div data-role="navbar" >
<ul>
<li><a href="" data-ajax="false" class="ui-btn-active" data-transition="none">商品列表1</a></li>
<li><a href="" data-ajax="false" data-transition="none">商品列表2</a></li>
<li><a href="" data-ajax="false" data-transition="none">商品列表2</a></li>
</div>
</div>
<ul id="allProductUl" data-role="listview" data-inset="true" style="margin-top:0px;">
<li id="allProductLi">
<a href="/productDetail.vm" data-transition="slide" data-ajax="false">
<img src="" style="margin-top:10px;" />
<h4 class="productName" style="margin-top:0px;" dbField='productName'>电脑</h4>
<p class="productPrice" style="margin-top:10px;">
<span>¥</span><span dbField='price' style="color:#f00;">160</span>
<span style="margin-left:10px;">¥</span><span dbField='deposit'>100</span>
</p>
<p style="margin-top:10px;margin-bottom:5px;">
<span style="font-size:12px;">库存:</span><span dbField='repertory' style="font-size:12px;">60</span><span style="font-size:12px;">件</span><span style="margin-left:10px;font-size:12px;" >已卖:</span><span style="color:#f00;font-size:12px;" dbField='sale'>20</span><span style="color:#000;font-size:12px;">件</span>
</p>
</a>
</li>
</ul>
</div>
</body>
</html>