jQuery Mobile警報/確認對話框

Question

是否有一個不錯的類似Senc​​ha的jQuery Mobile解決方案用於警報和確認對話框？

Answer 1

此插件JQM將風格JQM造型的確認框

http://dev.jtsage.com/jQM-SimpleDialog/

編輯：這個插件目前已被SimpleDialog2 supserseeded可以在這裏找到：

http://dev.jtsage.com/jQM-SimpleDialog/demos2/

Answer 2

我還沒有看到任何警報，因爲我認爲它使用本機的外觀和感覺。你應該能夠通過另一個jQuery插件和/或CSS來定製它們。

這裏是一個jQuery Example

UPDATE：

嘛鏈路是404現在JQM 1.2是出並提供彈出窗口：

• http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html

Answer 3

嘗試，

if (confirm("Are you sure?")) 
{ 
    /*code to execute when 'Ok' bttn selected*/ 
} 

Answer 4

是的，這個插件很不錯。但是，如果您不需要完整的功能，那麼重新推出自己的簡單對話框的重量要輕得多。我用這個：

<div data-role="dialog" id="sure" data-title="Are you sure?"> 
    <div data-role="content"> 
    <h3 class="sure-1">???</h3> 
    <p class="sure-2">???</p> 
    <a href="#" class="sure-do" data-role="button" data-theme="b" data-rel="back">Yes</a> 
    <a href="#" data-role="button" data-theme="c" data-rel="back">No</a> 
    </div> 
</div> 

而且這樣的：

function areYouSure(text1, text2, button, callback) { 
    $("#sure .sure-1").text(text1); 
    $("#sure .sure-2").text(text2); 
    $("#sure .sure-do").text(button).on("click.sure", function() { 
    callback(); 
    $(this).off("click.sure"); 
    }); 
    $.mobile.changePage("#sure"); 
} 

您可以使用這些只要您需要確認對話框：

areYouSure("Are you sure?", "---description---", "Exit", function() { 
    // user has confirmed, do stuff 
}); 

Answer 5

優秀的代碼@彼得，但不被生成連續事件中，使用unbind（）可能會更好，如下所示：

function areYouSure(text1, text2, button, callback) { 
    $("#sure .sure-1").text(text1); 
    $("#sure .sure-2").text(text2); 
    $("#sure .sure-do").text(button).unbind("click.sure").on("click.sure", function() { 
    callback(false); 
    $(this).off("click.sure"); 
    }); 
    $.mobile.changePage("#sure"); 
} 

謝謝！

Answer 6

我有類似的問題。我想要像標準confirm()一樣使用簡單易用的功能。

由於對話框在jQuery的棄用移動1.4 (documentation)，我決定創建自己的小提琴：

function confirmDialog(text, callback) { 
var popupDialogId = 'popupDialog'; 
$('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:500px;"> \ 
        <div data-role="header" data-theme="a">\ 
         <h1>Question</h1>\ 
        </div>\ 
        <div role="main" class="ui-content">\ 
         <h3 class="ui-title">' + text + '</h3>\ 
         <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionConfirm" data-rel="back">Yes</a>\ 
         <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionCancel" data-rel="back" data-transition="flow">No</a>\ 
        </div>\ 
       </div>') 
    .appendTo($.mobile.pageContainer); 
var popupDialogObj = $('#' + popupDialogId); 
popupDialogObj.trigger('create'); 
popupDialogObj.popup({ 
    afterclose: function (event, ui) { 
     popupDialogObj.find(".optionConfirm").first().off('click'); 
     var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false; 
     $(event.target).remove(); 
     if (isConfirmed && callback) { 
      callback(); 
     } 
    } 
}); 
popupDialogObj.popup('open'); 
popupDialogObj.find(".optionConfirm").first().on('click', function() { 
    popupDialogObj.attr('data-confirmed', 'yes'); 
}); 

}

我注意到奇怪的現象，重定向時，/是「是」進行結算窗口按鈕點擊。它在afterClose事件後開始工作，所以這就是爲什麼它有點複雜。

Here is a jsfiddle demo

Answer 7

這個插件 craftpip/jquery-confirm

最初被設計用於移動，是基於bootstrap3框架。 支持警報，確認，模態，對話框和許多選項。

簡單易用。

$.alert({ 
    title: 'title here', 
    content: 'content here', 
    confirm: function(){ 
     //on confirm 
    }, 
    cancel: function(){ 
     // on cancel 
    } 
}) 

支持AJAX加載，CSS3動畫，響應等

[編輯] 詳細文檔可以發現here

功能列表：

• 主題（機器人主題包括）
• Ajax加載內容。
• CSS3動畫（二維& 3D動畫）
• 動畫彈跳選項
• 自動關閉（觸發超時後一動作）
• 圖標
• 背景解僱（關閉模式上點擊模式外）
• 鍵盤動作（ENTER/SPACE觸發器確認，ESC觸發器取消）
• 詳細API用於以模態方式改變內容。

我正在積極開發插件，請提出改進​​建議和功能。