Tạo thanh bên trong jQuery mobile

Question

Thông thường, khi bạn tạo phần tử data-role = "page" với jQuery mobile, nó chiếm toàn bộ khu vực xem. Vì lý do này, tôi không hiểu cách tạo thanh bên. Tôi muốn bắt chước những điều sau đây, nhưng xem nguồn không giúp gì nhiều:

http://jquerymobile.com/demos/1.0b1/docs/lists/index.html

Chú ý rằng khi bạn nhấp vào một mục trong danh sách, nó biến thành một thanh bên và cho thấy một danh sách trong chính khu vực nội dung. Ngoài ra, nếu màn hình bị thu nhỏ, nó chỉ hiển thị vùng nội dung chính. Có một tính năng đặc biệt trong jQuery điện thoại di động cho phép điều này, hoặc là có một số lượng lớn javascript mờ và CSS đằng sau nó?

Answer 1

Nhìn qua các phiên bản beta Split View cú pháp bạn có thể kiểm soát "Sidebar" như thế này:

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content"> 
     <div class="content-secondary"> 
      This would be the sidebar/split view on a tablet, 
      would show up stacked on a mobile device 
     </div><!-- end content-secondary -->  

     <div class="content-primary"> 
      This is the main content. 

      If Tablet device this would be to the right of the above content, 
      if mobile this would be below the above content. 

     </div><!-- end content-primary --> 
    </div><!-- end content --> 
</div><!-- end page --> 

Documents: http://jquerymobile.com/demos/1.0b1/ (click chuột phải để xem nguồn)

thích hợp CSS: http://jquerymobile.com/demos/1.0b1/docs/_assets/css/jqm-docs.css

Bài viết ALA phong nha nói về truy vấn phương tiện (những gì họ đã sử dụng để thực hiện việc này): http://www.alistapart.com/articles/responsive-web-design/

Answer 2

Bạn cần phải thêm mã này vào tệp javascript:

function setPositions(){ 
    var winwidth = $(window).width() 

    if(winwidth >= 750){ 
     $('.content-secondary').css({'float':'left','width':'35%'}); 
     $('.content-primary').css({'margin-left':'36%'}); 
    } 
    else{ 
     $('.content-secondary').css({'float':'none','width':'100%'}); 
     $('.content-primary').css({'margin-left':'0px'}); 
    } 
} 


$(function(){ 
    setDefaultTransition(); 
    $(window).bind("throttledresize", setPositions); 
});