Управление несколькими страницами при использовании нижних колонтитулов для навигации - PullRequest
Новая
       0

Управление несколькими страницами при использовании нижних колонтитулов для навигации

0 голосов
/ 22 октября 2011

В моем приложении 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.

Есть идеи, как этого добиться? Заранее спасибо.

1 Ответ

0 голосов
/ 22 октября 2011

Создать событие 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;
    }
});
...