jQuery мобильный многостраничный представить - PullRequest
Новая
       7

jQuery мобильный многостраничный представить

4 голосов
/ 07 ноября 2011

Я пишу мобильное приложение с PhoneGap и jQuery Mobile. Чтобы упростить навигацию, я хочу распределить одну форму по нескольким «страницам», используя div data-role = "page" . Идея состоит в том, чтобы дать пользователю опыт, подобный волшебнику, для заполнения большой формы. После завершения я должен иметь возможность сохранить форму локально или отправить ее, если мобильный телефон подключен к сети.

Я не понимаю, как отправлять или сохранять форму с помощью jQuery Mobile, если форма разбита на несколько «виртуальных» страниц. Я выполняю поиск в Интернете, но не могу найти учебники или примеры по решению этой проблемы.

Любая помощь будет оценена.

UPDATE:

Недавно я изменил способ работы с многостраничными формами, и это решение мне понравилось. В основном вы используете соглашение об именах, когда поля становятся частью разделов, присваивая им идентификаторы, начинающиеся с имени раздела и тире, например: person-name, person-фамилия. Смотрите ответ ниже.

Ответы [ 2 ]

6 голосов
/ 18 ноября 2011

Хорошо, я отправил свои мысли здесь: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile

По сути, в итоге я использовал более строгий язык, чтобы просто включить правую часть формы за раз. (Я использую ColdFusion, но любой язык действительно будет работать.) Форма самостоятельно публикует сообщения и просто отображает правильный шаг в зависимости от того, где вы находитесь.

1 голос
/ 21 мая 2012

Быстрая помощь всем, кто застрял в той же проблеме. Я сделал "вещь формы", но это становится неаккуратным. Вы просто встраиваете div страницы внутри элемента формы, но это не очень элегантно и вызывает некоторые проблемы с навигацией.

Итак, я получил собственное решение, которое работает с огромными многостраничными формами (+/- 1000 элементов) Не самый элегантный, но работает как шарм: 

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script>
        $(function () {
            $('#submit_my_form').click(function (e) {
                alert(JSON.stringify(readFormData('names')));
                alert(JSON.stringify(readFormData('dates')));
            });
        });

        function readFormData(section) {
            var sectionData;
            var els = $(':input[id|='+section+']');

            var sectionData = {};
            $.each(els, function() {
                if (this.name && !this.disabled && (this.checked
                    || /select|textarea/i.test(this.nodeName)
                    || /text|hidden|password|date|email/i.test(this.type))) {
                    sectionData[this.name.substr(section.length+1)] = $(this).val();
                    console.log(this.name + " -> " + $(this).val());
                }
            });
            return sectionData;
        }
    </script>
</head>

<body>
    <div data-role="page" id="menu" data-theme="a">
        <div data-role="header" data-position="fixed">
            <h1>Menu Page</h1>
        </div>
        <div data-role="content">
            <ul data-role="controlgroup">
                <li><a target_id="page1" href="#page1" data-role="button"
                       style="text-align:left" data-icon="arrow-r"
                       data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
                <li><a target_id="page2" href="#page2" data-role="button"
                       style="text-align:left" data-icon="arrow-r"
                       data-iconpos="right">Page2</a></li>
            </ul>
            <input id="submit_my_form" type="button" name="send" value="Submit"/>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
            Menu page footer
        </div>
    </div>

    <div data-role="page" id="page1" data-theme="a">
        <div data-role="header" data-position="fixed">
            <a href="#menu" data-icon="arrow-l" data-direction="reverse">Prev</a>
            <h1>Page 1</h1>
            <a href="#page2" data-icon="arrow-r">Next</a>
        </div>
        <div data-role="content">
            <label for="names-initials">Name:</label>
            <input type="text" name="names-initials" id="names-initials" value=""/>
            <label for="names-surname">Surname:</label>
            <input type="text" name="names-surname" id="names-surname" value=""/>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
        </div>
    </div>

    <div data-role="page" id="page2" data-theme="a">
        <div data-role="header" data-position="fixed">
            <a href="#page1" data-icon="arrow-l" data-direction="reverse">Prev</a>
            <h1>Page 2</h1>
        </div>
        <div data-role="content">
            <label for="dates-birthday">Birthday:</label>
            <input type="date" name="dates-birthday" id="dates-birthday" value=""/>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
            <a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
               style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
        </div>
    </div>
</body>
</html>
...