logo标签列表

无法使用jQuery Mobile程序化地打开面板或弹出窗口

jquery-mobilepopuppanel
3

我正在构建我的第一个JQM网站，所以我认为我错过了一些简单的小东西，这给我带来了很多问题。

我已经设置了页面、页眉、内容和页脚以及用于菜单的面板。然后我有一个包含以下内容的js文件：

$(document).on('pageinit', function (event) {

alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works

});

有人能告诉我为什么每次导航到另一个页面时，面板和弹出窗口只会打开其中一个而不是两个吗？

我也无法通过浏览器控制台（使用Chrome）以编程方式打开它们。

这是我的HTML：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Cashflow - IFA Portal</title>

    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
    <link href="/Styles/System.css" rel="stylesheet" />

    <script src="/Scripts/jquery-1.7.1.min.js"></script>

    <script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
    <script src="/Scripts/highcharts.js"></script>
    <script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
    <div id="page-wrapper">
        <div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
               <div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
            <li><a href="/"><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</a></li>
            <li><a href="/Tools"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</a></li>
            <li><a href="/Tools/Cashflow"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</a></li>
            <li><a href="/Client"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</a></li>
            <li><a href="/Proposal"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</a></li>
            <li><a href="/Fund"><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</a></li>
        </ul>
    </div>
                <div id="header" data-role="header" data-theme="d">
        <div id="top-border"></div>
        <div class="floatleft">
            <a href="#menu-panel" title="Menu" id="menu-button" data-role="button" data-icon="grid" data-inline="true" data-iconpos="notext"></a>
        </div>
        <div id="logo">
            <img src="/Images/AllanGray-Logo.png" />
        </div>

        <div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
            <a href="#right-panel" data-role="button" data-icon="star" title="Favourites">Favourites</a>
            <a href="#right-panel" data-role="button" title="Notes"><img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes</a>
            <a href="#display-options" data-role="button" data-rel="popup" data-position-to="window" data-icon="gear" title="Display Options">Display Settings</a>
        </div>


        <div id="logout">
            <section id="login">
                        <a href="/Account/Login" data-role="button" data-inline="true" data-mini="true" data-style="b">Log In</a>

            </section>   
        </div>

        <div id="display-options" data-role="popup" class="ui-content">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <form>
                <fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
                    <legend>Theme</legend>
                        <input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
                        <label for="theme-1" class="theme-option">Android</label>

                        <input type="radio" name="theme" id="theme-2" value="apple"  />
                        <label for="theme-2" class="theme-option">Apple</label>

                        <input type="radio" name="theme" id="theme-3" value="windows"  />
                        <label for="theme-3" class="theme-option">Windows</label>
                </fieldset>
                <br />
                <fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
                    <legend>Screen Size</legend>
                        <input type="radio" name="size" id="size-1" value="computer" checked="checked" />
                        <label for="size-1" class="size-option">Computer</label>

                        <input type="radio" name="size" id="size-2" value="tablet"  />
                        <label for="size-2" class="size-option">Tablet</label>

                        <input type="radio" name="size" id="size-3" value="phone"  />
                        <label for="size-3" class="size-option">Phone</label>
                </fieldset>
           </form>
        </div>
    </div>

            <div id="content" data-role="content">






<h2>Cashflow Calculator</h2>

<div class="ui-grid-a">

    <div class="ui-block-a" style="padding-right:5px;">
        <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
            <h3>Investment Assumptions</h3>

            <div data-role="fieldcontain" class="narrow">
                <label for="time">Time horizon (years)</label>
                <input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>

                <label for="nominal">Nominal return after unit trust fees (%)</label>
                <input type="text" name="nominal" id="nominal" value="" />

                <label for="inflation">Inflation rate p.a. (%)</label>
                <input type="text" name="inflation" id="inflation" value="" />

                <label for="administration-fees">Net platform administration fees (%)</label>
                <input type="text" name="administration-fees" id="administration-fees" value="" />

                <label for="advisor-fees">Financial advisor fees (%)</label>
                <input type="text" name="advisor-fees" id="advisor-fees" value="" />
            </div>
        </div>

        <a href="#new-lump-sum" data-role="button" data-rel="popup" data-position-to="window" data-icon="plus" data-inline="true" data-mini="true">Add Contributions or Withdrawals</a>

        <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
            <h3>Contributions & Withdrawals </h3>



            <ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
                <li>
                    <a>
                        <h3>Contribution: R20 000</h3>
                        <p class="topic"><strong>Recurres: 6 times</strong></p>
                        <p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
                    </a>
                    <a href="#" class="delete">Delete</a>
                </li>
                <li>
                    <a href="#demo-mail">
                        <h3>Contribution: R5000</h3>
                        <p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
                    </a>
                    <a href="#" class="delete">Delete</a>
                </li>
                <li>
                    <a href="#demo-mail">
                        <h3>Withdrawal: -R25 000</h3>
                        <p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
                    </a>
                    <a href="#" class="delete">Delete</a>
                </li>
            </ul>

        </div>



        <div data-role="popup" id="new-lump-sum" class="ui-content">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <form>
                <fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
                    <legend>Add New</legend>
                        <input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
                        <label for="contribution" class="">Contribution</label>

                        <input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal"  />
                        <label for="withdrawal" class="">Withdrawal</label>
                </fieldset>

                <label for="lump-sum-amount">Amount (R)</label>
                <input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />

                <label for="lump-sum-date">Date</label>
                <input type="text" name="lump-sum-date" id="lump-sum-date" value="" />

                <a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
            </form>
        </div>

    </div>

    <div class="ui-block-b" style="padding-left:5px;">
        <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
            <h3>Future Value Graph</h3>


            <div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>

            <script type="text/javascript">


            </script>


        </div>

    </div>
</div>


            </div>

            <div id="footer" data-role="footer">
    <div id="bottom-border"></div>
    <p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
                <div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
        <a href="#page" data-rel="close" data-role="button" data-iconpos="notext" data-icon="delete"></a>
        <h3>Favourites</h3>
        <div id="search-box">
            <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
        </div>
    </div>





            <script>

            </script>

        </div><!-- End Page -->
    </div>

</body>
</html>
1个回答
9

弹出窗口和对话框在页面事件发生后立即打开时会很棘手。为了解决这个问题，您需要使用setTimeout来打开对话框或弹出窗口。

$(document).on('pageinit', function() {
 setTimeout(function () {
  $('#new-lump-sum').popup('open');
 }, 100); // delay above zero
});
1
我尝试过了，它可以工作，但只有在第一次加载页面时有效，然后当我从带有弹出窗口的页面导航离开并返回时，它不会再次打开。 - Mikhail Janowski
类应该没有任何问题地工作。重复的ID可能会导致一些问题。$(document).on('pageshow', '[data-role=page]#pageID', function() - Omar
@MikhailJanowski，每个页面都应该有面板。 - Omar
使用这样的类不起作用 $(".new-lump-sum").popup("open"); 我已经将该类添加到弹出式div中。 - Mikhail Janowski
@Omar，使用pageinit不会导致它在每次页面初始化时打开吗？ - Phill Healey
显示剩余6条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接