0

请看附图

在此处输入图像描述

在我的页面中，我有主页图标。当我单击“主页”时，我将通过 jQuery 移动简单对话框显示一个对话框。我成功地做到了这一点。我使用原始 html 模式简单的 dislog ( http://dev.jtsage.com/jQM-SimpleDialog/demos/blank.html )

当用户在简单对话框中单击确定按钮而不选择任何复选框时，我想通过 jquery mobile 简单对话框显示警告对话框，如下所示

我想在选择客户对话框上方显示此对话框。我怎样才能做到这一点。

我尝试创建 jsfiddle 示例，但设计有点难以创建。

当警告对话框出现时，选择客户对话框消失。请给任何建议。

在此处输入图像描述

4

1 回答 1

2

更新：刚刚意识到您使用的是 simpledialog 插件，而不是本机 jQM 对话框。

使用 SimpleDialog2

ForSimpleDialog2 看到我创建的这个小提琴。

在 jQM 主页面中，有一个用于启动复选框对话框的链接，该对话框作为内联内容包含在 HTML 标记中：

$(document).delegate('#inliner', 'click', function() {
    $('#inlinecontent').simpledialog2({themeDialog: 'c'});
});
<a href="#" id="inliner" data-role="button" >Open dialog</a>

<div id="inlinecontent" style="display:none" data-  options='{"mode":"blank","headerText":"Dialog","headerClose":false,"blankContent":true}'> 
<div  style="padding: 15px;">       
    <fieldset id="cBoxes" data-role="controlgroup" >
        <legend>My CheckBoxes:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
        <label for="checkbox-v-2a">One</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Three</label>
    </fieldset>
    <a id="dialogSubmit" href="#"  data-role="button">Close Dialog</a>          
    </div>
</div>

当您单击关闭对话框按钮时，它会使用 Omar 的代码来检查是否选中了任何复选框。如果是，它只是关闭返回主页的对话框。如果没有选中，它会启动一个错误对话框：

$(document).delegate('#dialogSubmit', 'click', function() {
    var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
    if (numChecked > 0){
        $(document).trigger('simpledialog', {'method':'close'});
    } else {
      $('<div>').simpledialog2({
        mode: 'blank',
        headerText: 'Warning',
        headerClose: true,
        themeDialog: 'e',
        blankContent : 
          "<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
          // NOTE: the use of rel="close" causes this button to close the dialog.
          "<a rel='close' data-role='button' href='#'>OK</a></div>"
     });        
   }
});

要使用本机 jQM 对话框完成相同操作：

根据我对您问题的理解，我创建了一个演示链式对话框的小提琴。

基本上，从第一页单击链接按钮：

<a href="#foo" data-rel="dialog" data-role="button" data-transition="flow">Open dialog</a>

启动对话框。此对话框包括 3 个复选框和一个“提交”按钮：

<div id="foo" data-role="page" data-close-btn="none">
    <div data-role="header">
        <h1>Dialog Header</h1>
    </div>    
    <div data-role="content">        
      <fieldset id="cBoxes" data-role="controlgroup">
        <legend>My CheckBoxes:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
        <label for="checkbox-v-2a">One</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Three</label>
      </fieldset>        
      <a id="dialogSubmit" href="#"  data-role="button">Close Dialog</a>        
    </div>
</div>

当您单击“#dialogSubmit”时，它会使用 Omar 的代码来检查是否选中了任何复选框。如果是，它只是关闭返回主页的对话框。如果没有选中，它会启动一个错误对话框。

$('#dialogSubmit').on("click", function(){
  var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
  if (numChecked > 0){
    $("#foo").dialog( "close" );
  } else {
    $.mobile.changePage( "#error", { role: "dialog" } );
  }
});

错误对话框只有一个带有 data-rel="back" 的关闭按钮，因此单击它会返回到上一个对话框，允许您选择一个复选框。

<div id="error" data-role="page" data-theme="e">
   <div data-role="header">
      <h1>Dialog Error</h1>
   </div>  
   <div data-role="content">          
      <p>Please select at least one checkbox first.</p>        
      <a id="errorOK" href="#"  data-role="button" data-rel="back">OK</a>
   </div>   
</div>
于 2013-09-27T00:25:47.003 回答