Dừng thay đổi kích thước trang trong khi chuyển đổi với Jquery Mobile

Question

Tôi đang xây dựng một ứng dụng dành cho điện thoại cần phải mở rộng đến tất cả các độ phân giải và do đó xác định mọi thứ về tỷ lệ phần trăm. Tôi cũng đang sử dụng một tiêu đề cố định với một div tôi được định nghĩa trong Jquery như nội dung.

Vấn đề tôi gặp phải là trong quá trình chuyển đổi giữa các trang, có một 'gián đoạn' vì chiều cao của trang thay đổi trong quá trình chuyển đổi. Tôi đang cố ngăn điều này xảy ra. Có suy nghĩ gì không?

Tôi đã tạo mẫu dưới đây để minh họa điểm. http://jsfiddle.net/fz7qs/2/

<div id="pageContainer" style="position: relative !important; height: 100%;"> 
<div data-role="page" id="test1"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <a id="page2link">To Page 2</a> 

    <div data-role="content">  
     <p>Page content goes here.</p>   
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

<div data-role="page" id="test2" style="height: 568px"> 

<div data-role="header"> 
    <h1>Page 2</h1> 
</div> 

<a id="page1link">To Page 1</a> 

<div data-role="content" style="height: 50%;"> 
    <p style="height: 80%; border: 1px solid black;">This is page 2</p>   
</div><!-- /content --> 

<div data-role="footer"> 
    <h4>Page Footer</h4> 
</div> 

Answer 1

Toàn bộ trang jsFiddle nhảy trên lần đầu tiên trong trình duyệt Chrome desktop, do đó nhấn nút jsFiddle RUN để tải một cách chính xác trước khi sử dụng.

EDIT: Trả lời và jsFiddle sửa đổi cho mỗi phát triển phần nhận xét.

EDIT 2: jsFiddles giờ đây sử dụng jQuery 1.7.2 với jQuery Mobile 1.2.0 để sửa lỗi trình duyệt Chrome.

jsFiddle DEMO

Giải pháp là để thiết lập phong cách của bạn trong một file CSS và không phải là phần HTML từ jQuery Mobile UI đã nó theme phong cách riêng thông qua một style sheet quá.

Ngoài ra, bạn có một extra closing div cho trang ở dưới cùng trong HTML đó cũng như không đóng trang web. Phần đầu trong HTML của bạn không cần thiết cho jsFiddles, vì trang được thiết lập cho HTML5 và bạn chỉ cần nhập tệp (jQuery di động) vào jsFiddle bằng cách sử dụng nút Quản lý tài nguyên.

Mặc dù bạn đã liệt kê trong Câu hỏi dưới dạng đơn vị phần trăm hoàn chỉnh, tôi vẫn giữ các đơn vị pixel như trong ví dụ của bạn, nhưng chúng cũng có thể là phần trăm.

CSS Cài đặt:

a { 
cursor: hand; 
cursor: pointer;  
} 

.content1 { 
    height: 268px; 
} 

.text1 { 
    height: 50%; 
    border: 1px solid black; 
} 

.content2 { 
    height: 568px; 
} 

.text2 { 
    height: 80%; 
    border: 1px solid black; 
} 

Trong phần HTML của bạn, Tôi cũng gắn các footer để dưới cùng của trang bằng cách sử dụng data-position:

<div data-role="footer" data-position="fixed"> 

Bên cạnh ghim các footer ở cuối trang, bạn cũng có thể không hoạt ảnh bằng cách thêm cài đặt bổ sung data-id cho mỗi trang có cùng một giá trị.

<div data-role="footer" data-id="foo" data-position="fixed"> 

jsFiddle FOOTER.

---

EDIT 2: mỗi khám phá gần đây của jQuery 1.8.2 và jQuery Mobile 1.2.0 lỗi thấy trong Chrome (cuộn ẩn vẫn gây ra các yếu tố cơ thể để nhảy), đây là một jsFiddle dụ sửa đổi:

jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0

Giới thiệu về lỗi này:

Tôi chỉ phát hiện ra rằng việc sử dụng jsFiddle với jQuery 1.8.2 và jQuery Mobile 1.2.0 không hoạt động như mong đợi khi overflow được thiết lập để hidden quá trình sử dụng của một hàm scrollBars trong jsFiddle đó.

Chức năng này là ẩn thanh cuộn trình duyệt trong khi hoạt ảnh jQuery, ngăn các yếu tố nhảy nhanh trong khoảng thời gian hoạt ảnh của thay đổi trang.

Thanh cuộn trình duyệt trên thực tế bị ẩn, nhưng các phần tử trong phần nội dung tiếp tục "nhảy" như thể thanh cuộn vẫn còn hiện diện.

Điều này không xảy ra khi jsFiddle jQuery được đặt thành 1.7.2.

---

Nếu tò mò của bạn làm thế nào để có nhiều trang psuedo trên một trang duy nhất, hãy kiểm tra jsFiddle này cho một không liên quan SO Answer here.

Answer 2

Cố gắng thay đổi điều này:

đó:

<div data-role="content" style="height: auto;"> 

dụ: http://jsfiddle.net/fz7qs/13/