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>

ページを起動すると、「パニエ」ボタンをクリックするまで問題ありません。発生したエラーは次のとおりです。

Uncaught no such method 'open' for dialog widget instance

ダイアログウィジェットインスタンスにはメソッドが必要なため、これが機能しない理由は本当にわかりませんopen()。

何か案が？

4

1 に答える 1

6

jquery mobile dialogとjquery UI dialogを混同していると思います。jquery モバイル ダイアログは、実際にはもう 1 つの 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 に答える