2013-09-25 51 views
0

就像標題所說,我有一個使用jqmobile和頁面進行頁面轉換的html 5應用程序。Jqmobile頁面 - 從第二頁的元素是在第一頁上看到?

轉換工作正常......唯一的問題是第二頁中的所有元素都可以在第一頁上看到!切換頁面後,過渡效果完美,只能看到第二個div的元素。

有誰知道發生了什麼事?也許我錯過了一個顯示器:沒有地方?

編輯這裏是我的一些代碼。

<div data-role="page" id="page-one" data-title="Page 1" style = "padding-top:50px;"> 

      <div class = "pagecontent"> 
       <div id="nav"> 
        navbar 
       </div> 

       <div id="innerdiv"> 
        <div id="scroller" style="width:100%;height:100%;"> 

         <div id="pullDown"> 
          <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span> 
         </div> 

         <div id="container49"> 
          <div class="circlecontainer" id="circle" > 
           <div class = "gymname"> 
            Rec. Hall 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas2" width="250" height="250"></canvas> 
           </div> 
           <div class="inner" id = "innerfour"> 
            <div class="count" id="count"><span id="counter"></span><span id="percent"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction"><span id="attend"></span><span id="max"></span></div> 
           </div> 
           <div class = "oc" id ="oc1"> 
            CLOSED 
           </div> 
          </div> 


          <div class="circlecontainer" id="circle2" onclick="predictor(1)"> 
           <div class = "gymname"> 
            White Building 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas3" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas4" width="250" height="250"></canvas> 
           </div> 

           <div class="inner" id = "innerthree"> 
            <div class="count" id="count2"><span id="counter2"></span><span id="percent2"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction2"><span id="attend2"></span><span id="max2"></span></div> 
           </div> 
           <div class = "oc" id="oc2"> 
            CLOSED 
           </div> 
          </div> 


          <div class="circlecontainer" id="circle3" onclick="predictor(2)"> 
           <div class = "gymname"> 
            IM Building 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas5" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas6" width="250" height="250"></canvas> 
           </div> 

           <div class="inner" id = "innertwo"> 
            <div class="count" id="count3"><span id="counter3"></span><span id="percent3"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction3"><span id="attend3"></span><span id="max3"></span></div> 
           </div> 
           <div class = "oc" id="oc3"> 
            CLOSED 
           </div> 
          </div> 


          <div class="circlecontainer" id="circle4" onclick="predictor(3)"> 
           <div class = "gymname"> 
            Fitness Loft 
           </div> 
           <div class="animatedcircle"> 
            <canvas id="myCanvas7" width="250" height="250"></canvas> 
           </div> 
           <div class="stationarycircle"> 
            <canvas id="myCanvas8" width="250" height="250"></canvas> 
           </div> 

           <div class="inner" id = "innerone"> 
            <div class="count" id="count4"><span id="counter4"></span><span id="percent4"></span></div> 
            <div class="line"></div> 
            <div class="fraction" id="fraction4"><span id="attend4"></span><span id="max4"></span></div> 
           </div> 
           <div class = "oc" id = "oc4"> 
            CLOSED 
           </div> 
          </div> 
         </div><!-- content 49 --> 
        </div><!-- page content --> 

       </div><!-- poopie --> 
      </div><!-- scroller --> 

     <a href="#page-two" id="two" data-transition="slide"></a> 
     </div> 

<div data-role="page" id="page-two" data-title="Page 2"> 
<div class = "pagecontent"> 

<div id="date">0/0/00</div> 
<div id = "pattend">Predicted Attendance:</div> 
<div id="percent"><span id="percentage">0</span>%</div> 
<div id="displayattend">0</div> 

<div id="wrapping"> 
    <div id="linediv"> 
     <div id="time"><span id="hours"></span>:<span id="min"></span><span id="ampm"> </span></div> 
     <div id="line"></div> 
     </div> 

     <div id="chart1" style="height:100%;width:100%;"></div> 
    </div><!-- wrapping --> 
    </div><!-- Page Content --> 
</div> 
+0

我使用一個鏈接到交換機,我通過JavaScript – pj409

+0

它看起來像所有元素的點擊務實正在是從第二頁的頁面的兩個地方在元素頂部呈現形成第一頁。如果任何人有任何明智的想法,我真的可以使用一些幫助! – pj409

回答

0

,你有<div class="pagecontent">應該<div data-role="content">

+0

對不起,我只是試了一下......仍然沒有運氣 – pj409

+0

請更新你剛纔所做的修改,然後再看看。另外,你使用的是什麼版本的jquery mobile? – Dom

+0

通過將第一頁的z-index和其他頁面的z-索引設置爲0或更小,我可以在其上創建一個創可貼。我知道這可能不是實現我想要的最好方式,但這是我能想到的最好的方式。謝謝你的幫助! – pj409

相關問題