1

这是我的代码<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&nbsp;!</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()方法。

任何的想法？

4

1 回答 1

6

我认为您将jquery 移动对话框与jquery UI 对话框混淆了。jquery 移动对话框实际上是另一个 JQM 页面，其样式看起来更像一个对话框（覆盖、圆角）。要显示 JQM，您只需使用该$.mobile.changePage('#yourDialog', optionalTranistion)方法。也就是说，JQM 对话框确实有一个 close 方法（我不确定，但在某些时候可能也有一个 open 方法）。

所以对于你的代码，

 $(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 的简单对话框插件感兴趣。

于 2012-07-05T19:55:31.647 回答