Question

在我的JQM应用程序中，我使用固定的页脚在不同的模块之间导航，如Home，Users，Projects等。这是我实际代码的精简版。

<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时添加要加载的用户。

知道如何实现这一目标吗？先谢谢。

Answer 1

创建pagebeforeshow个活动。请参阅下面的代码+评论。

小提琴：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;
    }
});

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

1 个答案: