2011-07-06 31 views
6

Đây là mã html Tôi cóchân Đôi khi dai dẳng cũng di chuyển trong thời gian chuyển trang trong jquerymobile

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
     <script> 
     $('#home, #page2, #page3').live('pagebeforeshow',function(event){ 
      $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active'); 
     }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Home Page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li> 
         <li><a href="#page2" data-icon="grid">Second page</a></li> 
         <li><a href="#page3" data-icon="star">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
     <div data-role="page" id="page2"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Second page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom">Home</a></li> 
         <li><a href="#page2" data-icon="grid" class="ui-btn-active" id="page2_link">Second page</a></li> 
         <li><a href="#page3" data-icon="star">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
     <div data-role="page" id="page3"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Third page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom">Home</a></li> 
         <li><a href="#page2" data-icon="grid">Second page</a></li> 
         <li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
    </body> 
</html> 

Vấn đề tôi đang phải đối mặt là đôi khi tôi thay đổi lựa chọn của navbar, chân cũng trượt sang trái hoặc ngay cùng với trang. Bạn có thể tạo lại vấn đề bằng cách liên tục thay đổi lựa chọn nút trong thanh điều hướng.

Bạn có thể nhìn thấy nó ở đây - http://jsfiddle.net/tKMgd/5/

+0

Tôi nghĩ thanh cuộn dọc là thủ phạm. là nó luôn luôn ở đó? nó sẽ không có trên thiết bị di động, vì vậy bạn đã thử trên thiết bị chưa? Ngoài ra, bạn đã thử các chuyển đổi trang khác chưa? – Tsar

+0

Nó ngẫu nhiên xảy ra. Đôi khi nó không xảy ra hoàn toàn.Tôi đã không thử nó trên thiết bị và đã không cố gắng chuyển tiếp khác. – user700284

+0

Tôi cũng gặp vấn đề này. Bạn đã bao giờ tìm thấy một giải pháp? – John

Trả lời

1

tôi đã không làm bất cứ điều gì cụ thể để giải quyết problem.But này trong suốt quá trình của thời gian vấn đề không xảy ra. Giữa tôi đã cập nhật các phiên bản JQM tôi đang sử dụng và hiện đang sử dụng JQM 1.1

1

Có người đã thảo luận vấn đề này và đã có một giải pháp tạm thời, có thể nó có thể làm việc cho bạn là tốt?

https://github.com/jquery/jquery-mobile/issues/2226

Trích câu trả lời

Khi bạn nhanh chóng chuyển đổi giữa các trang sử dụng một chân dai dẳng (với cùng một dữ liệu-id) mã nguồn không xác định chân trang trước. Vấn đề xảy ra vì setTimeout (dòng 5812 - jquery.mobile-1.0b2). Nếu bạn chuyển đổi nhanh giữa các trang, chân trang sẽ không có ở đó vì sự chậm trễ 500ms. Nếu bạn đưa ra điều này setTimeout hoặc thiết lập nó bằng không, vấn đề này không xảy ra một lần nữa, nhưng Tôi không chắc chắn hậu quả của việc này.

tôi đã có thể để tái tạo vấn đề này trên Safari và iOS (Tôi đã không thử các thiết bị khác/trình duyệt)

2

Nếu sự cố xảy ra với đầu trang/chân trang, thay vì sử dụng data-position = "fixed" trong html của bạn chỉ cần thiết lập vị trí: cố định trong css của bạn và cung cấp cho các yếu tố một z-index - viola cao, không còn "nhấp nháy"

+0

Up 1. Điều này làm việc cho tôi . (jQuery Mobile 1.4.2) Tôi gặp phải vấn đề tương tự khi kéo ở đâu đó trên trang. Sau khi kiểm tra footer bằng cách sử dụng firebug, tôi nhận thấy jQuery thêm và loại bỏ một lớp được gọi là "ui-cố định ẩn". Điều này dường như gây ra các nhấp nháy lạ và thực sự được giải quyết bằng cách áp dụng câu trả lời được đề xuất. – Ideogram

Các vấn đề liên quan