- 首页
- 其他开发
- 在另一个原始 jquery mobile 简单对话框上方显示原始 jquery mobile 简单对话框
在另一个原始 jquery mobile 简单对话框上方显示原始 jquery mobile 简单对话框
[英] Show raw jquery mobile simple dialog above another raw jquery mobile simple dialog
本文介绍了在另一个原始 jquery mobile 简单对话框上方显示原始 jquery mobile 简单对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请看附件
在我的页面中，我有主页图标.当我单击主页"时，我将通过 jQuery mobile 简单对话框显示一个对话框.我成功地做到了这一点.我使用原始 html 模式 simple dislog ( 我创建的.
在主 jQM 页面中有一个用于启动复选框对话框的链接，该对话框作为内联内容包含在 HTML 标记中:
$(document).delegate('#inliner', 'click', function() {$('#inlinecontent').simpledialog2({themeDialog: 'c'});});<a href="#" id="inliner" data-role="button" >打开对话框</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>我的复选框:</legend><input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"><label for="checkbox-v-2a">一个</label><input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"><label for="checkbox-v-2b">两个</label><input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"><label for="checkbox-v-2c">三</label></fieldset><a id="dialogSubmit" href="#" data-role="button">关闭对话框</a>
当您单击关闭对话框"按钮时，它会使用 Omar 的代码来检查是否选中了任何复选框.如果是，它只是关闭返回主页面的对话框.如果没有被选中，它会启动一个错误对话框:
$(document).delegate('#dialogSubmit', 'click', function() {var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;如果 (numChecked > 0){$(document).trigger('simpledialog', {'method':'close'});} 别的 {$('').simpledialog2({模式:'空白'，headerText: '警告',headerClose: 真,主题对话框:'e'，空白内容:"<div style='padding: 15px;'><p>请先选择至少一个复选框.</p>"+//注意:使用 rel="close" 会导致此按钮关闭对话框."<a rel='close' data-role='button' href='#'>OK</a></div>"});}});
使用原生 jQM 对话框完成相同的操作:
根据我对您的问题的理解，我创建了一个 fiddle 演示链接对话框.
基本上，您从第一页点击链接按钮:
<a href="#foo" data-rel="dialog" data-role="button" data-transition="flow">打开对话框</a>
启动一个对话框.此对话框包括 3 个复选框和一个提交"按钮:
<div data-role="header"><h1>对话框标题</h1>
<div data-role="内容"><fieldset id="cBoxes" data-role="controlgroup"><legend>我的复选框:</legend><input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"><label for="checkbox-v-2a">一个</label><input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"><label for="checkbox-v-2b">两个</label><input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"><label for="checkbox-v-2c">三</label></fieldset><a id="dialogSubmit" href="#" data-role="button">关闭对话框</a>
当您单击#dialogSubmit"时，它会使用 Omar 的代码来检查是否选中了任何复选框.如果是，它只是关闭返回主页面的对话框.如果未选中，则会启动错误对话框.
$('#dialogSubmit').on("click", function(){var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;如果 (numChecked > 0){$("#foo").dialog("关闭");} 别的 {$.mobile.changePage( "#error", { role: "dialog" } );}});
错误对话框只有一个带有 data-rel="back" 的关闭按钮，因此单击它会返回上一个对话框，允许您选择一个复选框.
<div data-role="header"><h1>对话错误</h1>
<div data-role="内容"><p>请先选择至少一个复选框.</p><a id="errorOK" href="#" data-role="button" data-rel="back">OK</a>
Please see the attached image
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)
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.
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.
解决方案
UPDATE: just realized you are using the simpledialog plugin and not the native jQM dialog.
Using SimpleDialog2
ForSimpleDialog2 see this fiddle I created.
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>
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>"
});
}
});
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>
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>
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" } );
}
});
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 mobile 简单对话框上方显示原始 jquery mobile 简单对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
