3
我工作的一個jQuery Mobile的網站,但我們並沒有使用AJAX轉換(我們有$.mobile.ajaxEnabled = false
整個站點)。jQuery Mobile的對話與ajaxenabled =假
我有,我想成爲像一個對話框,但是處理過的頁面,在此僅出現在啓用AJAX的工作。
有沒有人找到一個辦法讓jQuery Mobile的治療頁面像這樣短的只是設計一個頁面,看起來像一個對話的對話?
我工作的一個jQuery Mobile的網站,但我們並沒有使用AJAX轉換(我們有$.mobile.ajaxEnabled = false
整個站點)。jQuery Mobile的對話與ajaxenabled =假
我有,我想成爲像一個對話框,但是處理過的頁面,在此僅出現在啓用AJAX的工作。
有沒有人找到一個辦法讓jQuery Mobile的治療頁面像這樣短的只是設計一個頁面,看起來像一個對話的對話?
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)開始。
我花了一分鐘摸不着頭腦,但我認爲它會工作!謝謝。 – 2011-12-27 22:20:04
@HectorScout我用代碼中的一些註釋更新了我的答案,希望能夠讓它更容易理解。 – Jasper 2011-12-27 22:23:41