Jquery Mobile: Chọn Hộp trong tiêu đề

Có cách nào để thêm hộp chọn vào bên trong tiêu đề không?Jquery Mobile: Chọn Hộp trong tiêu đề

tôi đã thử nghiệm với mã này

<div data-role="header" data-position="inline" data-theme="b"> 
    <h1>My Page</h1> 
    <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
    </select> 
</div>

nhưng nó không hoạt động

Edit:

xin lỗi vì câu hỏi không phải là quá rõ ràng. Với mã trên, tôi có một hộp chọn trong tiêu đề, nhưng hộp chọn được căn giữa (bên dưới tiêu đề trang). Mà tôi muốn là, lựa chọn được đặt ở bên phải (giống như một nút bên trong tiêu đề).

| [trở lại] --------- Tiêu đề ----------- [chọn hộp] |

Nguồn

2011-07-04 Peacemoon

Bạn thấy gì/không thấy chính xác? Tôi đã đặt mã của bạn trong một trang jQuery Mobile và tôi có một trường được chọn như mong đợi trong tiêu đề trang. Dưới đây là đoạn mã tôi đã sử dụng, trong đó kiểm tra thu xếp ổn thoả ở Desktop và Mobile Safari (iPad):

<body> 
    <div data-role="page" id="somepage" data-theme="c"> 
    <div data-role="header" data-position="inline" data-theme="b"> 
     <h1>My Page</h1> 
     <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
     </select> 
    </div> 
    <!-- rest of page --> 
    </div> 
<body>

EDIT Tôi nghĩ vấn đề bạn gặp phải là h1 là một yếu tố ngăn chặn tất nhiên, và do đó là trường select khi jQM đã chạy mã của nó. Nếu bạn kiểm tra trường khi trang được hiển thị trong trình duyệt WebKit, bạn sẽ thấy jQM áp dụng thêm div và tương tự, có nghĩa là trường chọn không thể dễ dàng nằm trên cùng một dòng với tiêu đề của bạn.

Theo tài liệu, bạn cần phải thử nghiệm với đánh dấu tùy chỉnh trong tiêu đề bằng cách đặt nó vào riêng của nó div (vì vậy jQM không cố gắng thao tác nó) và sau đó tự tạo kiểu cho nó. Loại giao diện bạn muốn đạt được được thực hiện tốt nhất khi xây dựng thanh tiêu đề có hai liên kết, nhưng rõ ràng là không áp dụng cho bạn vì nút "thứ hai" không phải là liên kết, đó là trường select:

Plugin tiêu đề tìm kiếm con ngay lập tức của vùng chứa tiêu đề và tự động đặt liên kết đầu tiên ở vị trí nút bên trái và liên kết thứ hai ở bên phải. Trong ví dụ này, nút 'Hủy' sẽ xuất hiện ở khe bên trái và 'Lưu' sẽ xuất hiện ở đúng vị trí dựa trên trình tự của chúng theo thứ tự nguồn.

Bạn có thể thử làm một cái gì đó như thế này để giả mạo nó, nhưng bạn cần thử nghiệm trên các thiết bị bạn đang hỗ trợ trong ứng dụng của mình (và rõ ràng là đặt các kiểu trong lớp, tôi chỉ làm theo cách này cho các mục đích ví dụ):

<div data-role="header" data-position="inline" data-theme="b"> 
    <h1>My Page</h1> 
    <div data-role="fieldcontain" style="position: absolute; top: 0; right: 0; margin: 0; padding: 0"> 
    <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
    </select> 
    </div> 
</div> 
...

Nguồn

2011-07-04 09:18:39 Ben

i thay đổi nội dung bài viết của tôi để làm cho câu hỏi rõ ràng hơn – Peacemoon

tôi đã thêm một số chỉnh sửa để câu trả lời, với một sửa chữa lận-y – Ben

vĩ đại tôi thử nghiệm trên giả lập Android và thiết bị Android và có vẻ như tôi muốn. Cảm ơn – Peacemoon

Nếu bạn muốn sử dụng phần tử Chọn thực tế, hãy đóng gói nó trong thẻ liên kết với data-role="none" làm việc cho tôi.

ví dụ:

<div data-role="header"> 
    <a data-role="none"> 
     <select> 
      <option value="1">Option One</option> 
      <option value="2">Option Two</option> 
     </select> 
    </a> 
</div>

Nguồn

2014-01-03 20:06:14 kappamaki

Rahhhhhhh, điều này đã không giúp tôi lựa chọn nhưng nó làm cho tôi khám phá ra data-role = "none". Tôi đã rất tức giận vì jquerymobile đã cố gắng để thích nghi với mã của tôi mà không cần tôi yêu cầu bất cứ điều gì thêm các lớp học ở khắp mọi nơi !!! Cảm ơn người đàn ông !! – Yahel

Jquery Mobile: Chọn Hộp trong tiêu đề

Trả lời

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