jQuery移动.无法以编程方式打开对话框；尝试了我能想到的一切 [英] JQuery-mobile. Can't open the dialog programmatically; tried everything I could think of
本文介绍了jQuery移动.无法以编程方式打开对话框；尝试了我能想到的一切的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想以编程方式打开一个jquery-mobile对话框.我尝试这样做:
I want to open a jquery-mobile dialog programmtically. I tried to do:
$("#jenia-dialog").dialog()
#("jenia-dialog").dialog("open")
Error: no such method 'open' for dialog widget instance
这是我的html文件:
This is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p><a href="dialog.html" data-rel="localhost/static/dialog" data-role="button">Is this a question?</a></p>
</div>
</div>
<div data-role="page" data-url="dialog.html" id="dialog-jenia">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
</body>
</html>
这是我的jsfiddle页面: http://jsfiddle.net/kK24p/
This is my jsfiddle page: http://jsfiddle.net/kK24p/
我要做的就是使用js(而不是按钮)打开对话框.
All I want to do is open the dialog using js instead of the button.
如果有人可以帮助我，那就太好了.
If someone could help me it would be great.
非常感谢.
推荐答案
有效示例:
解决方案1
页面1:- index.html
Working examples:
Solution 1
Page 1: - index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p><a href="dialog.html" data-rel="dialog" data-role="button">Open dialog</a></p>
</div>
</div>
</body>
</html>
页面2:- dialog.html
Page 2: - dialog.html
<div data-role="page">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
This is dialog content
</div>
</div>
解决方案2
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-dialog', function(){
$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p><a id="open-dialog" data-role="button">Onen dialog</a></p>
</div>
</div>
<div data-role="dialog" id="jenia-dialog">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
This is dialog content
</div>
</div>
</body>
</html>
正确地以编程方式打开对话框的方式需要 changePage 函数，如下所示:
Correct way of programatically opening dialogs requires changePage function, like this:
$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});
如果您需要打开外部对话框，则可以进行以下操作:
Same thing works if you need to open external dialog:
$.mobile.changePage("dialog.html", {transition: 'pop', role: 'dialog'});
这篇关于jQuery移动.无法以编程方式打开对话框；尝试了我能想到的一切的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
