使用jquery mobile导航到多个页面

Question

I have been working on navigating between pages using jquery mobile.I have tried with the code below. 我一直在使用jquery mobile在页面之间导航。我尝试使用下面的代码。

<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>site Details</h1>
        </div>
        <div data-role="content">
            <a href="#Site entry1" data-role="button" data-inline="true">Enter the details of site</a>
            <a href="#Modify site" data-role="button" data-inline="true">Modify site details</a>
        </div>
    </div>
    <div data-role="page" id="Site entry1">
        <div data-role="header">
            <a href="#home" data-rel="back" data-role="button" data-icon="home">Home</a>
            <h1>Welcome To enter the details of site</h1>
        </div>
        <div data-role="content">
            <div class="content-primary">
                <form>
                <ul data-role="listview">
                    <li data-role="fieldcontain">
                        <label for="sitename">Site name:</label>
                        <input type="text" sitename="name" id="sitename" value="" />
                    </li>
                    <li data-role="fieldcontain">
                        <label for="siteno">Site name:</label>
                        <input type="text" siteno="siteno" id="siteno" value="" />
                    </li>
                    <a href="#Site entry2" data-role="button" data-inline="true">Next</a>
                </ul>
                </form>
            </div>
        </div>
        <div data-role="page" id="Site entry2">
            <div data-role="header">
                <a href="#Site entry1" data-role="button" data-icon="arrow-l">previous</a>
            </div>
            <div data-role="content">
                <div class="content-primary">
                    <form>
                    <ul data-role="listview">
                        <li data-role="fieldcontain">
                            <label for="moduleno">name:</label>
                            <input type="text" modulename="moduleno" id="moduleno" value="" />
                        </li>
                        <li class="ui-body ui-body-b">
                            <fieldset class="ui-grid-a">
                                <div class="ui-block-b">
                                    <button type="submit" data-theme="a">Submit</button></div>
                            </fieldset>
                        </li>
                    </ul>
                    </form>
                </div>
                <div data-role="footer">
                    <a href="#Site entry3" data-role="button" data-icon="arrow-r">Next</a>
                </div>
            </div>
            <div data-role="page" id="Site entry3">
                <div data-role="header">
                    <a href="#Site entry2" data-rel="back" data-role="button" data-icon="arrow-l">previous</a>
                </div>
                <div data-role="content">
                    <div class="content-primary">
                        <form>
                        <ul data-role="listview">
                            <li data-role="fieldcontain">
                                <label for="modulename">name:</label>
                                <input type="text" name="name" id="name" value="" />
                            </li>
                            <li class="ui-body ui-body-b">
                                <fieldset class="ui-grid-a">
                                    <div class="ui-block-b">
                                        <button type="submit" data-theme="a">Submit</button></div>
                                </fieldset>
                            </li>
                        </ul>
                        </form>
                    </div>
                    <div data-role="footer">
                        <a href="#home" data-role="button" data-icon="home">Home</a>
                    </div>
                </div>
                <div data-role="page" id="Modify site">
                    <div data-role="header">
                        <a href="home" data-rel="back" data-role="button" data-icon="home">Home</a>
                        <h1>List of sites </h1>
                    </div>
                    <div data-role="content"></div>
                    <div data-role="footer"></div>
                </div>
</body>

But i cant be able to navigate from Site entry1 page to the Site entry2 and from modify button in home screen to the respected page.I need to persist the data from site entry page1 to site entry page3 untill i press submit button. 但是我无法从Site entry1页面导航到Site entry2，也不能从主屏幕中的“修改”按钮导航到相应页面。我需要将数据从Site Entry Page1保留到Site Entry Page3，直到我按Submit按钮。

Thanks in advance.. 提前致谢..

Answer 1

<body>
 <div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>

<div data-role="content">

<a href="#Site entry1" data-role="button" data-inline="true">Enter the details of site</a>

<a href="#Modify site" data-role="button" data-inline="true">Modify site details</a>

</div>

 </div>

<div data-role="page" id="Site entry1">

<div data-role="header">
    <a href="#home" data-rel="back" data-role="button" data-icon="home">Home</a>
    <h1>Welcome To enter the details of site</h1>
    </div>


<div data-role="content">
    <div class="content-primary">
    <form>
    <ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="sitename">Site name:</label>
            <input type="text" sitename="name" id="sitename" value=""  />
        </li>
        <li data-role="fieldcontain">
            <label for="siteno">Site name:</label>
            <input type="text" siteno="siteno" id="siteno" value=""  />
        </li>

        <a href="#Site entry2" data-role="button" data-inline="true">Next</a>

    </ul>

    </form>
    </div>


</div>
</div>

<div data-role="page" id="Site entry2">

    <div data-role="header">
    <a href="#Site entry1"  data-role="button" data-icon="arrow-l">previous</a>
    </div>


    <div data-role="content">
        <div class="content-primary">
        <form>
        <ul data-role="listview">
            <li data-role="fieldcontain">
                <label for="moduleno">name:</label>
                <input type="text" modulename="moduleno" id="moduleno" value=""  />
            </li>
            <li class="ui-body ui-body-b">
                <fieldset class="ui-grid-a">
                        <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
                    </fieldset>
            </li>

        </ul>

        </form>
        </div>
    </div>
    <div data-role="footer">
    <a href="#Site entry3" data-role="button" data-icon="arrow-r">Next</a>
    </div>


</div>

<div data-role="page" id="Site entry3">

    <div data-role="header">
    <a href="#Site entry2" data-rel="back" data-role="button" data-icon="arrow-l">previous</a>
    </div>


    <div data-role="content">
        <div class="content-primary">
        <form>
        <ul data-role="listview">
            <li data-role="fieldcontain">
                <label for="modulename">name:</label>
                <input type="text" name="name" id="name" value=""  />
            </li>

            <li class="ui-body ui-body-b">
                <fieldset class="ui-grid-a">
                        <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
                    </fieldset>
            </li>

        </ul>

        </form>
        </div>
    </div>
    <div data-role="footer">
    <a href="#home"  data-role="button" data-icon="home">Home</a>
    </div>

</div>

<div data-role="page" id="Modify site">

    <div data-role="header">
    <a href="home" data-rel="back" data-role="button" data-icon="home">Home</a>
    <h1>List of sites </h1>
    </div>

    <div data-role="content">
    </div>

    <div data-role="footer">
    </div>
</div>

correct code 正确的代码

使用jquery mobile导航到多个页面

问题描述

1 个解决方案

解决方案1
0 2014-01-30 06:28:40

使用jquery mobile导航到多个页面

问题描述

1 个解决方案

解决方案1 0 2014-01-30 06:28:40

解决方案1
0 2014-01-30 06:28:40