JQuery移动更改页面第一次退一步

时间:2013-07-23 16:11:16

标签: javascript jquery html jquery-mobile web

当我初始化页面并尝试导航时,第一次页面退回。为什么页面退后一步。

我尝试以这种方式导航:$.mobile.changePage("#pagename");

例如。我尝试在初始化后从主页面转到客户页面,我点击图标。当导航完成页面导航回来时,网页会导航,但只是在第一次,网址仍为#...

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="styles/jquery.mobile-1.3.1.min.css" />
    </head>

    <body>

        <!-- //////////////////////////////////////////////////////
        //////////          MAIN PAGE          ///////////////
        ////////////////////////////////////////////////////// -->
        <section id="main-page" data-role="page" data-fullscreen="true">
            <header data-role="header">
                <h1>Főoldal</h1>
            </header>
            <div data-role="content">
                <table>
                    <tbody>
                        <tr>
                            <td>
                            <div class="metro-bt" onclick="$.mobile.changePage('#customer-page');" id="customer-btn"> <!-- <<<-------------- here I invoke the function change page and than change back, but just at the first time -->
                                <div></div>
                                <span>Customers</span>
                            </div></td>
                            <td>
                            <div class="metro-bt" data-bind="click: bt_calendar_click" id="calendar-btn">
                                <div></div>
                                <span>Calendar</span>
                            </div></td>
                        </tr>
                        <tr>
                            <td>
                            <div class="metro-bt" data-bind="click: bt_negotiation_click, enable:isNegBtEnable" id="negotiation-btn">
                                <div></div>
                                <span>Negotiation</span>
                                <span data-bind="text: durationOfNegotiation" style="line-height: 0; display: block;"></span>
                                <span data-bind="text: nameOfPartner" style="line-height: 15px;clear: both; display: block;">asdf</span>
                            </div></td>
                            <td>
                            <div class="metro-bt" data-bind="click: bt_logout_click " id="logout-btn">
                                <div></div>
                                <span>Logout</span>
                            </div></td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </section>

        <!-- //////////////////////////////////////////////////////
        //////////          Customer            ///////////////
        ////////////////////////////////////////////////////// -->

        <section id="customer-page" data-role="page" data-fullscreen="true">
            <header data-role="header">
                <h1>Ügyféltörzs</h1>
                <a data-role="button"  href="#main-page" data-icon="back" data-iconpos="notext" class="ui-btn-left"></a>
            </header>
            <div class="content" data-role="content">
                <div data-enhance="false" data-bind="event: { rowselect: rowselect }" id="customer-jqxGrid" style="margin: 0 auto"></div>
            </div>

            <div data-role="footer" data-position="fixed" data-tap-toggle="false">
                <a href="#add_customer-page" data-icon="plus"> Hozzáad </a>
                <a id="b-customer-negotation" class = "ui-disabled" data-icon="star" data-bind="click: startNegotiation">  </a>
                <a id="b-customer-modify" class = "ui-disabled" data-icon="edit" data-bind="click: modify"></a>
            </div>
        </section>



        <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="styles/main.css" type="text/css" />

        <script type="text/javascript" src="scripts/lib/jquery-1.9.1.min.js"></script>
        <script src="scripts/lib/knockout-2.2.1.js"></script>


        <script src="scripts/lib/jquery.mobile-1.3.1.min.js"></script>



        <script type="text/javascript">
            g_loginViewModel = null;
            m_tokenKey = "token";
            m_serverName = "http://localhost:49670";

            $(function() {
                $.mobile.ignoreContentEnabled = true;
                if (window.localStorage.getItem(m_tokenKey) != null) {
                    $.mobile.changePage("#main-page");
                    // bootstrap();
                } else {
                    g_loginViewModel = new LoginViewModel();
                    ko.applyBindings(g_loginViewModel, document.getElementById("login-page"));
                }
            });

        </script>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

请将它发布在小提琴中,你的意思是页面后退了什么?我想你不需要将第一页指定为更改页面,它应该直接加载带有数据角色页面的第一页。