在jquery mobile中以彈出式格式打開外部HTML片段

好吧我有點生疏，jquery和jquery mobile的新功能對我來說很簡單;）。好的，我正在用jquery mobile創建一個移動網站，它有很多頁面，而不是將所有頁面保存在一個大的多頁面模板中，我將它們放在單獨的頁面模板中。我有一個菜單按鈕，當點擊一個彈出窗口時出現一個列表視圖菜單，它可以工作，但我必須將菜單放在每個頁面模板中，但我寧願將菜單保存在它自己的html文件中，甚至只是在某處這是在jQuery的移動頁面結構之外，所以我不必重複每個頁面模板中的代碼。在jquery mobile中以彈出式格式打開外部HTML片段

當它位於它自己的文件中時，如何將菜單加載到彈出菜單中？否則，如何將div加載到不在jquery移動頁面內的彈出窗口中？

我的按鈕：

<a href="#main-menu" data-rel="popup">Menu</a>

我的列表視圖菜單的html：

<div data-role="popup" id="main-menu"> 
     <ul data-role="listview" data-divider-theme="b" data-inset="true"> 
      <li data-role="list-divider" role="heading"> 
       Menu 
      </li> 
      <li data-theme="c"> 
       <a href="#how-it-works" data-transition="slide"> 
        How it Works 
       </a> 
      </li> 
      <li data-theme="c"> 
       <a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide"> 
        Order Now 
       </a> 
      </li> 
      <li data-theme="c"> 
       <a href="#faq" data-transition="slide"> 
        FAQ 
       </a> 
      </li> 
      <li data-theme="c"> 
       <a href="#help" data-transition="slide"> 
        Help 
       </a> 
      </li> 
      <li data-theme="c"> 
       <a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide"> 
        Support 
       </a> 
      </li> 
      <li data-theme="c"> 
       <a href="http://www.backuptoweb.co.uk/" data-transition="slide"> 
        Main Website 
       </a> 
      </li> 
     </ul> 
</div>

來源

2012-12-28 user794846

任何代碼或什麼？ –

我添加了列表視圖的HTML，但我不確定彈出窗口的實際javascript代碼，即使它需要做我在問什麼？ – user794846

我已經設法部分使用下面的代碼，但它加載了html中的無風格。 live（'pageshow'，function（）{（「＃menu_button」）。click（function（） {（「＃main-menu」）.load（「main-menu.html」）; }）; }）; – user794846

在一般意義上，這裏是如何可以從外部文件加載HTML到一個div，博揚，我我不太確定你想要做什麼：

$('#myDiv').load('somepath/somefile.html');

來源

2012-12-28 13:50:29

我只是試圖使用jquery mobiles彈出方法從外部頁面而不是從dom加載彈出窗口。 – user794846

我有完全相同的問題，我h AVE書面的東西，顯示彈出，但局部呈現CSS [編輯]一些更多的嘗試，我是能夠使它呈現CSS完美：

$('[data-role=page]').live('pageshow', function (event, ui) { 

    $('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){ 
    $('#'+event.target.id).find('[id=main-menu]').trigger('create'); 
    }); 

});

順便說一下你的主HTML頁面應該包含在div聲明：

<div data-role="popup" id="main-menu"></div> 
<a href="#main-menu" data-rel="popup">Menu</a>

和你menu.html應該只包含有什麼DIV中：

<ul data-role="listview" data-divider-theme="b" data-inset="true"> 
<!-- .... listview content ... --> 
</ul>

來源

2013-01-10 14:05:03 user1931838

在jquery mobile中以彈出式格式打開外部HTML片段

回答

相關問題