gpt4 book ai didi

javascript - JQuery 移动版。无法以编程方式打开对话框;尝试了我能想到的一切

转载 作者:行者123 更新时间:2023-12-03 12:28:14 30 4
gpt4 key购买 nike

我想以编程方式打开 jquery-mobile 对话框。我尝试这样做:

$("#jenia-dialog").dialog()
#("jenia-dialog").dialog("open")
Error: no such method 'open' for dialog widget instance

这是我的 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="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/

我想做的就是使用 js 而不是按钮打开对话框。

如果有人能帮助我,那就太好了。

提前非常感谢。

最佳答案

工作示例:

解决方案1

第 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

<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 函数,如下所示:

$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});

如果您需要打开外部对话框,同样的操作:

$.mobile.changePage("dialog.html", {transition: 'pop', role: 'dialog'});

关于javascript - JQuery 移动版。无法以编程方式打开对话框;尝试了我能想到的一切,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24071669/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com