在使用页脚进行导航时管理多个页面答案

【问题标题】：Managing multiple pages while using footers for navigation在使用页脚进行导航时管理多个页面
【发布时间】：2011-10-23 00:23:40
【问题描述】：

在我的 JQM 应用程序中，我使用了一个固定的页脚来在不同的模块（如主页、用户、项目等）之间导航。这是我实际代码的精简版。

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script>
            function addUser(){
            console.log("sss");
                $.mobile.changePage("#add_user");
            }
            function editUser(){
                $.mobile.changePage("#edit_user");
            }
            function delUser(){
                $.mobile.changePage("#del_user");
            }

        </script>
        <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="content">
                This is Home
            </div>
            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" class="ui-btn-active ui-state-persist">Home</a></li>
                        <li><a href="#users">Users</a></li>

                    </ul>
                </div>
            </div>
        </div>
        <div data-role="page" id="users">
            <div data-role="content">
                This is Users
            </div>
            <input type="button" value="Add a user" onclick="addUser()"/>
            <input type="button" value="Edit user" onclick="editUser()"/>
            <input type="button" value="Delete user" onclick="delUser()"/>
            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li>

                    </ul>
                </div>
            </div>
        </div>


        <div data-role="page" id="add_user">
            <div data-role="content">
               Here users can be added
               <a href="#users" data-role="button">Back to Users</a>
            </div>
            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li>

                    </ul>
                </div>
            </div>
        </div>

        <div data-role="page" id="edit_user">
            <div data-role="content">
               Here user details can be edited
            </div>
            <a href="#users" data-role="button">Back to Users</a>
            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li>

                    </ul>
                </div>
            </div>
        </div>

        <div data-role="page" id="del_user">
            <div data-role="content">
               Here user can be deleted
            </div>
            <a href="#users" data-role="button">Back to Users</a>
            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li>

                    </ul>
                </div>
            </div>
        </div>

            </body>

            </html>

现场演示 - http://jsfiddle.net/n4MZz/

考虑这个用例：

1) 单击用户选项卡 - 用户选项卡将加载添加/编辑/删除按钮

2) 单击“添加用户”按钮 - 添加用户的页面将加载并选择用户选项卡。

3) 单击主页选项卡。

4) 点击用户标签。

现在它将转到带有添加/编辑/删除选项的用户主页。我不想那样做。我想要我执行的最后一个操作的页面。在上面的用例中，我想要页面在我执行第 4 步时添加要加载的用户。

知道如何实现吗？在此先感谢。

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

创建一个pagebeforeshow 事件。请参阅下面的代码 + cmets。

小提琴：http://jsfiddle.net/n4MZz/2/

var lastMode = "users";
var lastPageUsers = false;
$("div").live("pagebeforeshow", function(){ //Attach event
    var id = this.id; //Get ID of the requested page
    if(id == "users"){

        //If lastMode is not users and if the last page is not a user page
        if(lastMode != "users" && !lastPageUsers){
            lastPageUsers = true;
            $.mobile.changePage('#'+lastMode);
        }

    } else if(id == "add_user" || id == "edit_user" || id == "del_user"){
        lastMode = id;
    } else { //Not a user page, so set lastPageUsers = false
        lastPageUsers = false;
    }
});

【讨论】：

感谢您的回答。我检查了代码。它就像首先显示用户选项卡一样，然后进入最后一个模式。而且我不再能够进入主用户页面通过“返回用户”按钮
@user700284 更新了答案。现在已经修好了。