这是我的代码<head></head>:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(function() {
});
$(document).ready(function () {
$('#dialog1')
.dialog({
position: 'center',
modal: true,
autoOpen: false
})
;
$('.panier')
.unbind('click')
.click(function(event) {
event.preventDefault();
$('#dialog1').dialog('open');
});
});
// ]]>
</script>
和HTML代码:
<div data-role="page">
<div data-role="header">
<h1>Choisissez vos pizzas !</h1>
</div>
<div data-role="content">
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a class="panier" href="/" data-role="button" data-icon="search">Voir panier</a></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="dialog" id="dialog1" class="app-dialog">
<div data-role="header">
<h3>A dialog</h3>
</div>
<div id="content" data-role="content">
<p>I am a dialog....!</p>
</div>
</div>
当我启动我的页面时,一切都很好,直到我点击"panier"按钮:引发的错误是:
Uncaught no such method 'open' for dialog widget instance
我真的不知道为什么这不起作用,因为对话框小部件实例应该有一个open()方法.
任何的想法？
我认为您将jquery移动对话框与jquery UI对话框混淆.一个jquery移动对话框实际上是另一个JQM页面,其外观看起来更像是一个对话框(覆盖,圆角).要显示JQM,只需使用该$.mobile.changePage('#yourDialog', optionalTranistion)方法即可.那说JQM对话框确实有一个接近的方法(我不确定,但在某些时候也可能有一个开放的方法).
所以对于你的代码,
$(document).ready(function () {
/* $('#dialog1') this is JQUI code
.dialog({
position: 'center',
modal: true,
autoOpen: false
})
;*/
$('.panier')
.unbind('click')
.click(function (event) {
event.preventDefault();
//$('#dialog1').dialog('open');
$.mobile.changePage('#dialog1');
});
});
JQM 还有一个正在开发的弹出窗口小部件(现在已经有一段时间了).
您可能还对JQM 的简单对话框插件感兴趣.
| 归档时间： |
|
| 查看次数： |
8790 次 |
| 最近记录： |