2012-07-09 125 views
0

在我的jQuery Mobile的網站,我有一個按鈕,在我的標題是這樣的:無法加載jQuery Mobile對話框?

<a href="/foo.html" data-rel="dialog" data-icon="grid">Foo</a> 

的問題是,JQM希望我所有的腳本和CSS來重新定義頭。這對於對話來說尤其尷尬(更不用說慢)。我想我的對話框只是爲了讓我的網格的內容,而不必重新定義一個完整的HTML頁面。這可能嗎?

+0

您不必包含在文檔中什麼比''

...
更多。無論如何,這就是所有jQuery Mobile都會添加到DOM的。然而,在每個SEO文檔中都有一個完整的「」部分是個好主意。在用戶刷新對話框的情況下,有一個完整的''部分也是一個好主意。 – Jasper 2012-07-09 16:56:53

回答

1

你可以在同一頁面中定義對話框(多頁面佈局)

HTML

<div data-role="page" id="thePage"> 
    <div data-role="content"> 
     <a href="#theDialog" data-rel="dialog">Open dialog</a> 
    </div> 
</div> 

<!-- Add the dialog here --> 
<div data-role="dialog" id="theDialog"> 
    <div data-role="header" data-theme="d"> 
     <h1>Dialog</h1> 
    </div> 

    <div data-role="content" data-theme="c"> 
     <h1>Delete page?</h1> 
     <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p> 
     <a href="#thePage" data-role="button" data-rel="back" data-theme="b">Sounds good</a>  
     <a href="#thePage" data-role="button" data-rel="back" data-theme="c">Cancel</a>  
    </div> 
</div> 

文檔:

+0

這可能會造成問題。如果這個頁面通過AJAX瀏覽,那麼'data-role =「對話框的元素將被排除,因爲jQuery Mobile只抓取了第一個data-role = page或data-role =」dialog「元素在文檔中,忽略文檔的其餘部分。 – Jasper 2012-07-09 16:53:05

+0

感謝Phill和Jasper他領導。我能夠將數據角色從「對話框」更改爲「頁面」,並按預期工作。我認爲這是做到這一點的正確方法:http://jsfiddle.net/cJyYb/1/ – TruMan1 2012-07-09 17:36:59