JQuery移动多个面板不起作用

Question

我正在使用 jQuery mobile 开发一个 Web 应用程序，并且我在 index.php 上有 3 个不同的页面（div data-role="page"）。对于这 3 页，我希望在每一页中都有一个面板。 这就是我尝试过的：

HTML

<div data-role="page" id="contentPrincipal">

    <?php
        if($view != 'admobile'){
    ?>

    <div data-role="header">
        <a id="open-panel" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
        <h1 id="title"></h1>

        <script type="text/javascript">
            var title = $("title").text();
            $("#title").text(title);
        </script>
    </div>



    <?php
        }
    ?>

    <div data-role="main" class="ui-content">

        <?php

        if ($option == "com_telem_articles" || ($option == "com_ads" && $view == "listmobile")){ // Listagens das notícias, usados e passatempos

            /*$articleID = JRequest::getCmd('article');
            if ($articleID){
        ?>
            <script type="text/javascript">
                usadosReturn(<?php echo $articleID; ?>);
            </script>
        <?php
            }*/
        ?>
            <div data-test-role="flip"  data-test-loop="false" data-test-show-pager="false">
                <jdoc:include type="component" />
            </div>

        <?php
        } else { //Detalhe de um usado
            $articleID = JRequest::getCmd('id');
            $ecode = JRequest::getCmd('ecode'); //Se o utilizador enviar um email, vai ser recebido aqui o código 1 ou 0 (enviado ou erro a enviar)     

        ?>


            <div id="used" data-article-id="<?php echo $articleID;?>">

                <div id="form_warning_top">
                    <div id="form_warning">
                        <div class="box">
                            <ul>
                                <li>Não forneça dados pessoais completos ou a morada completa.</li>
                                <li>Se ainda não conheceu o anunciante pessoalmente, tenha em conta a regra de confiança limitada.</li>
                                <li>Lembre-se de conhecer o anunciante em pessoa</li>
                                <li>Verifique outras regras de segurança</li>
                            </ul>
                            <button class="dontshow">Não voltar a mostrar esta mensagem.</button>
                            <a title="Close" class="form_warning_close" href="javascript:;"></a>
                        </div>
                    </div>
                </div>

                <?php if ($ecode == 1) { //Email enviado?>

                    <div id="system-message-container">
                        <div id="system-message">
                            <div class="alert alert-message">
                                <a class="close" data-dismiss="alert">×</a>
                                <h4 class="alert-heading">Mensagem</h4>
                            <div>
                            <p>Email Enviado com Sucesso</p>
                        </div>
                    </div>

                <?php } else if ($ecode == 2) { //Erro ao enviar email?>

                    <div id="system-message-container">
                        <div id="system-message">
                            <div class="alert alert-notice">
                                <a class="close" data-dismiss="alert">×</a>
                                <h4 class="alert-heading">Aviso</h4>
                            <div>
                            <p>Ocorreu um Problema ao Enviar Email.</p>
                        </div>
                    </div>

                <?php } ?>

                <jdoc:include type="component" />
            <!</div>

        <?php
        }
        ?>
    </div>
</div>

<div data-role="page" id="contentDetails">

    <div data-role="header">
        <a id="open-panel" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
        <h1 id="title"></h1>

        <script type="text/javascript">
            var title = $("title").text();
            $("#title").text(title);
        </script>
    </div>

    <div data-role="main" class="ui-content">
        <div data-test-role="flip_aux"  data-test-loop="false" data-test-show-pager="false"></div>
    </div>
</div>

<div data-role="page" id="usedContentDetails">

    <div data-role="header">
        <a id="open-panel" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
        <h1 id="title"></h1>

        <script type="text/javascript">
            var title = $("title").text();
            $("#title").text(title);
        </script>
    </div>

    <div data-role="main" id="used_content" class="ui-content">

        <iframe id="usadosIframe" style="border:0;" src=""></iframe>

    </div>
</div>

JQUERY

$(document).on('pagebeforecreate', '[data-role="page"]', function(){   
    $('<div>').attr({
        'id':'mypanel',
        'data-role':'panel'
    }).appendTo($(this));

    $("#mypanel").html('<ul data-role="listview" data-inset="true"><li><a href="/telemoveis_j3/index.php" rel="external">&Uacute;ltimas not&iacute;cias</a></li><li><a href="/telemoveis_j3/index.php?option=com_ads&view=listmobile&Itemid=118" rel="external">Usados</a></li><li><a href="/telemoveis_j3/index.php?option=com_telem_articles&view=categorymobile&id=40&Itemid=119" rel="external">Passatempos</a></li></ul>');

    $(document).on('click', '#open-panel', function(){   
        $.mobile.activePage.find('#mypanel').panel("open");      
    });    
});

这里有什么问题？

Answer 1

如果您希望仅将面板添加到一个页面，则仅针对该页面而不是使用“pagebeforecreate”使用“pagebeforeshow”，如下所示：

然后增强面板的父级，最后在面板打开器上触发点击事件。

$(document).on('pagebeforeshow', '#contentPrincipal', function(){ 
    $('<div>').attr({
        'id':'mypanel',
        'data-role':'panel'
    }).appendTo($(this));

    $("#mypanel").html('<ul data-role="listview" data-inset="true"><li><a href="/telemoveis_j3/index.php" rel="external">&Uacute;ltimas not&iacute;cias</a></li><li><a href="/telemoveis_j3/index.php?option=com_ads&view=listmobile&Itemid=118" rel="external">Usados</a></li><li><a href="/telemoveis_j3/index.php?option=com_telem_articles&view=categorymobile&id=40&Itemid=119" rel="external">Passatempos</a></li></ul>').parent().enhanceWithin();

    $(document).on('click', '#open-panel', function(){   
        $('#mypanel').panel("open");      
    });
    $('#open-panel').click();    
});

编辑 代码已更新为向每​​个页面添加面板打开器按钮。由于所有面板中的内容都相同，因此只创建一个面板是有意义的。

注意：由于您已经有#open-panel，因此您不需要在每个页面中创建按钮。