Question

以下是<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()方法。

有什么想法吗？

Answer 1

我认为您将jquery mobile dialog与jquery UI dialog混为一谈。一个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还有一个popup widget正在开发中（现在已经有一段时间了）。

您可能也对JQM的simple dialog插件感兴趣。

jQuery mobile：没有为对话框小部件实例打开这样的'open'方法

1 个答案: