jQuery Mobile的對話與ajaxenabled =假

Question

我工作的一個jQuery Mobile的網站，但我們並沒有使用AJAX轉換（我們有$.mobile.ajaxEnabled = false整個站點）。

我有，我想成爲像一個對話框，但是處理過的頁面，在此僅出現在啓用AJAX的工作。

有沒有人找到一個辦法讓jQuery Mobile的治療頁面像這樣短的只是設計一個頁面，看起來像一個對話的對話？

Answer 1

jQuery Mobile框架顯示文檔中的第一個data-role="page"元素，它跳過data-role="dialog"元素，因此您不能讓文檔中的第一個僞頁面成爲對話框（對話框在初始加載時跳過）。

但是，您可以手動插入一個僞頁面到DOM，然後用$.mobile.changePage()顯示新插入的頁面作爲一個對話框：

//bind a `click` event handler to a link (to open the dialog) 
$('#some-link-id').bind('click', function (event) { 

    //prevent the default behavior of the link (an href of '#' would try to scroll to the top of the page, we want to prevent that behavior) 
    event.preventDefault(); 

    //now to get the HTML to add to the DOM for the new dialog, for demonstration purposes I set the URL of the AJAX request to the `href` attribute of the link clicked 
    $.get(this.href, function (serverResponse) { 

     //append the server response to the `body` element, this should be a `data-role="dialog"` element and it's contents 
     $('body').append(serverResponse); 

     //now that the new dialog is appeneded to the DOM, transition to it using it's ID as a reference 
     $.mobile.changePage($('#dialog-id'), { role : 'dialog' }); 
    }); 
}); 

這裏是一個演示：http://jsfiddle.net/mVdVd/

注意serverResponse預計是完全形成的HTML代碼塊，與一個data-role="dialog"元件（即具有dialog-id的Id）開始。