ẩn trong jQuery Mobile own documentation Tôi tìm thấy một cách tiếp cận mà chỉ làm việc tốt cho hộp tìm kiếm tôi + nút tìm kiếm thực hiện.
Trong trang đó, họ đang so sánh mọi thứ song song bằng cách sử dụng bố cục đơn giản <table>, điều này cũng giúp tôi dựa vào điều này. Trong khi các bảng KHÔNG phải là tài nguyên truy cập để thực hiện bố cục/thiết kế tốt, nó cực kỳ hiệu quả, đơn giản và phá vỡ nhiều sự phức tạp của các cách giải quyết mà tôi thấy ở đây. Đây là cách tiếp cận của tôi có thể làm cho số jsfiddle you linked của bạn. Xem lần lặp thứ tư.
Nói cách khác, do tính chất phức tạp của cách jQuery Mobile xây dựng trang, hãy thêm vào div và kiểu không có trong đánh dấu của bạn, v.v., đây có thể là lựa chọn tốt nhất cho trường hợp cụ thể này:
- Muốn hai cột mục có cột thứ hai có chiều rộng cố định.
- Trường hợp cột đầu tiên mở rộng để lấp đầy chiều rộng của màn hình về thay đổi kích thước.
- Nơi bạn muốn các yếu tố bao gồm toàn bộ chiều rộng của thiết bị.
(Đáng chú ý, nếu bạn muốn tinh chỉnh bất kỳ các khía cạnh đặc biệt, một số padding CSS đơn giản hoặc xếp thẳng nên làm các trick bắt đầu với giải pháp cơ sở này)
<table style='width:100%'><tr>
<td>
<input type='text' (or type='search') />
</td>
<td style='font-size:80%; width:7em'>
<input type='submit' value='Submit' />
</td>
</tr></table>
Rõ ràng, bạn nên name và cung cấp cho một số id cho các mục này nếu bạn muốn đăng chúng ở đâu đó hoặc thao tác chúng trong javascript. Hy vọng rằng điều này chứng tỏ hữu ích cho người khác không được đưa ra bởi bản chất của <table> s. Tôi đã không thể nhìn thấy một nhược điểm để tiếp cận này bằng cách sử dụng giao diện đơn giản của jQuery Mobile/theming.
Cuối cùng, bạn có thể muốn dừng lại và tự hỏi mình liệu nút gửi có cần thiết hay không. Trong các thiết bị di động như safari di động, có một nút trên bàn phím có nhãn "Go" bất cứ khi nào các phần tử nhập biểu mẫu đang được tương tác. Điều này hoạt động giống như khóa trả về và có thể gửi cụm từ tìm kiếm. Tôi chưa xem xét tùy chọn này trên các trình duyệt khác tại thời điểm này.
(Đây không phải là một giải pháp để cạnh tranh với cách tiếp cận của bạn để chuyển sang biểu tượng của hộp tìm kiếm. Đó là rất thông minh nhưng dường như không có gì câu hỏi ban đầu của bạn là gì.)
tôi tìm thấy một giải pháp khác mà Tôi đã đăng sau. Hãy tham khảo và chọn tùy chọn nào phù hợp nhất với bạn. –