Question

我正在使用jquerymobile，我希望将内容放在$ .mobile.changePage（'external.html'）提取的页面内，或者在我们点击链接时直接调用页面，例如：

我的应用有两个物理文件，index.html和external.html。 Index.html锚链接调用external.html，但在将视图从index.html更改为external.html期间，我从另一台要在其中使用的服务器获取json

$ .mobile.changePage（'external.html'）正在抓取页面但是立即显示它并且ajax调用甚至没有完成。

       var ProductDetailEvent = function()
    {

     thisProd = $(this);
     $.mobile.showPageLoadingMsg();
     Product.id   = thisProd.attr('data-id'); 
     Product.name = thisProd.find('h3').html(); 


    $.mobile.changePage( "productView.html", {
        transition: "pop",
        reverse: false,
            changeHash: false
        });
}

    ////LOAD DATA FOR E PAGES::4
$(document).bind( "pageload", function( event, data ){


            if(data.page[0].id != null)
            switch(data.page[0].id)
            {
                case 'detailView':

                    var pageData = {
                        page: data.page,
                        header: Product.name,
                        url: 'pDetail&productId='+Product.id,
                        loadDataCB: function(_resp){
                            strHtml = '';
                            img = 'http://10.0.1.64/magento/media/catalog/product/' + _resp.image;

                            strHtml += '<div style="text-align:center"><img src="'+img+'"  width="50%" /><br/><b>Description:</b>'+_resp.short_description;
                            strHtml += '</div><br/><input type="button" value="Add to Cart" data-role="button" /><br/><div class="ui-grid-a ui-bar-d">\
                                        <div class="ui-block-a"><div class="ui-bar ui-bar-d" >Price</div></div>\
                                        <div class="ui-block-b"><div class="ui-bar ui-bar-d" >'+_resp.price+'</div></div>\
                                        <div class="ui-block-a"><div class="ui-bar ui-bar-d" >Weight</div></div>\
                                        <div class="ui-block-b"><div class="ui-bar ui-bar-d" >'+_resp.weight+'</div></div>\
                                        </div>';
                            return  strHtml;        
                        }   
                    };

                    loadExternalView(pageData);

                break;


                case 'externalView':

                break;
            }
        });


    ////Load List::Inner Pages///
    var loadExternalView = function(_data)
    {

            var NPage  = _data.page;
            pHeader    = NPage.find('.header h1').html(_data.header);
            var pContent = NPage.find('.content');
            ServerCall(_data.url,function(result){  
                var strHtml = _data.loadDataCB(result);
                pContent.html(strHtml);
            }); 
    };

外部页面HTML：

    <!DOCTYPE html> 
    <html> 
      <head> 
         <meta charset="utf-8" /> 
      </head> 
      <body> 
         <!-- Begin Page 4 --> 
        <div id="detailView" data-role="page"> 
          <div class="header" data-role="header" data-icon="back" data-theme="a">
            <h1></h1>
          </div>
          <div class="content" data-role="content">
                <div class="ui-grid-a ui-bar-d">
                    <div class="ui-block-a"><div class="ui-bar ui-bar-d" >A</div></div>
                    <div class="ui-block-b"><div class="ui-bar ui-bar-d" >B</div></div>
                </div>
          </div> 
        </div> 
         <!-- End Page 4--> 
      </body> 
    </html>

我不想创建太多内部页面b / c它会影响性能并增加页面大小。

当调用外部页面时，它立即在屏幕上显示页面，我想更改它的内容，然后呈现页面。

由于

将内容加载到外部提取的页面JqueryMobile中

0 个答案: