在另一个原始jquery移动简单对话框上方显示原始jquery移动简单对话框 [英] Show raw jquery mobile simple dialog above another raw jquery mobile simple dialog

问题描述

请参阅附件图片

在我的页面上，我有主页图标.当我单击主页"时，我将通过jQuery移动简单对话框显示一个对话框.我成功实现了这一目标. 我使用了原始html模式的简单日志( http://dev.jtsage.com/jQM-SimpleDialog/demos/blank.html )

In my page i have home icon. When i click "Home" i will show one dialog by jQuery mobile simple dialog. I achieved this successfully. I used raw html mode simple dislog (http://dev.jtsage.com/jQM-SimpleDialog/demos/blank.html)

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

When user clicks ok button in simple dialog without select any check box i want to show warning dialog through jquery mobile simple dialog like the below

我想在选择客户"对话框上方显示此对话框. 我该如何做到这一点.

I want to show this dialog above the select customer dialog. How can i achieve this.

我尝试创建jsfiddle示例，但是设计有点困难，无法创建.

I tried to create jsfiddle example but the design is little bit tough not able to create.

警告对话框出现时，选择客户"对话框消失. 请提出任何建议.

When the warning dialog comes select customer dialog disappears. Please give any suggstion.

推荐答案

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

UPDATE: just realized you are using the simpledialog plugin and not the native jQM dialog.

ForSimpleDialog2参见我创建的小提琴.

ForSimpleDialog2 see this fiddle I created.

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

In the main jQM page there is a link for launching the checkbox dialog which is included in the HTML markup as inline content:

$(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的代码检查是否选中了任何复选框.如果是，则仅关闭对话框并返回主页.如果未选中，则将启动错误对话框:

When you click the Close Dialog button, it uses Omar's code to check if any checkboxes are checked. If they are, it just closes the dialog returning to the main page. If none are checked, it launches an error dialog:

$(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对话框完成相同的操作，请执行以下操作:

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

To accomplish the same with the native jQM dialog:

I have created a fiddle demonstrating chained dialogs according to my understanding of your problem.

基本上，从首页上单击链接按钮:

Basically, from the first page you click a link button:

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

启动对话框.此对话框包含3个复选框和一个提交"按钮:

to launch a dialog. This dialog includes 3 checkboxes and a 'submit' button:

<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的代码来检查是否选中了任何复选框.如果是，则仅关闭对话框并返回主页.如果未选中，将启动错误对话框.

When you click '#dialogSubmit', it uses Omar's code to check if any checkboxes are checked. If they are, it just closes the dialog returning to the main page. If none are checked, it launches an error dialog.

$('#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"的关闭按钮，因此单击它可以返回到上一个对话框，允许您选择一个复选框.

The error dialog simply has a close button with data-rel="back" so that clicking it returns to the previous dialog allowing you to select a checkbox.

<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>

这篇关于在另一个原始jquery移动简单对话框上方显示原始jquery移动简单对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！