2014-01-30 25 views
0

我一直在使用jQuery Mobile的頁面之間進行瀏覽。我嘗試了下面的代碼。使用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> 

,但我不能夠從網站頁面取值範導航到該網站ENTRY2並從主屏幕修改按鈕,尊重page.I需要從網站進入第1頁的數據保存到網站進入第3頁,直到我按提交按鈕。

在此先感謝..

+0

你沒關部門妥善 –

+0

ID不應由空格隔開,它應該是一個字,是獨一無二的。使用連字符,下劃線或只是將它們粘在一起。 – Omar

+0

在頁面ID的情況下它沒有關係@Omar它仍然可以工作的問題是沒有正確關閉分區,我修正了下面給出的代碼。 –

回答

0
<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> 

正確的代碼

+0

我檢查了代碼及其工作 –