您的位置：首页 > Web前端 > JQuery

jquery mobile listview加载json数据，刷新view

2014-06-13 18:09 351 查看
<!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>
            <li><a href="" data-ajax="false" data-transition="none">商品列表2</a></li>

           <li><a href="" data-ajax="false" data-transition="none">商品列表2</a></li>

        </ul>

    </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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航