Làm thế nào để "tắt" kiểu dáng di động của jQuery Mobile là số tờ rơi <select>?

Question

Tôi cần tắt kiểu dáng thả xuống của <select> của jQuery Mobile. Cuối cùng tôi muốn bản thân thiết bị (iPhone, Android, Blackberry, v.v.) để xác định giao diện thả xuống <select>.

Hiện nay đánh dấu của tôi là (tùy chọn số lượng giảm cho mục đích hiển thị):

<div data-role="fieldcontain"> 
    <label for="state">State:</label> 
    <select name="state" id="state" data-role="none"> 
     <option value="MA">Massachusetts</option> 
     <option value="MI">Michigan</option> 
     <option value="MN" selected="selected">Minnesota</option> 
     <option value="MS">Mississippi</option> 
    </select> 
</div> 

tôi đã cố gắng sử dụng data-role="none" trên <select> nhưng không thay đổi.

Có cách nào để "tắt" jQuery Mobile chỉ cho menu thả xuống chọn không?

Answer 1

theo http://jquerymobile.com/test/docs/forms/docs-forms.html

Nếu bạn 'd thích rằng một điều khiển biểu mẫu cụ thể không bị ảnh hưởng bởi jQuery Mobile, chỉ cần cung cấp cho phần tử đó thuộc tính data-role = "none". Ví dụ:

<label for="foo"> 
<select name="foo" id="foo" data-role="none"> 
<option value="a" >A</option> 
<option value="b" >B</option> 
<option value="c" >C</option> 
</select> 

Answer 2

Có, bạn phải đi vào tệp CSS điều khiển kiểu thả xuống Giao diện người dùng trên thiết bị di động JQuery và xóa mọi kiểu mà bạn không muốn xuất hiện.

Answer 3

Họ vẫn đang làm việc trên đó, công trình đang git trong mới nhất nhưng tôi khuyên bạn nên nó: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350

Answer 4

Sử dụng tài sản này sẽ giúp

$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file... 

Answer 5

Bên mobileinit, sửa chữa các selector jQM cư xử như mong đợi:

$.mobile.selectmenu.prototype.options.initSelector = 'select:not(:jqmData(role="none"), :jqmData(role="slider"))'; 

Answer 6

Kể từ phiên bản 1.1 đúng cách để làm điều đó là: data-enhance="false"

Bạn cũng sẽ cần phải thêm dòng này vào cấu hình:

$.mobile.ignoreContentEnabled = true; 

http://jquerymobile.com/test/docs/forms/forms-all-native.html

Answer 7

Mặc dù câu hỏi này được coi là đã trả lời, tôi muốn thêm một số dòng nữa, vì câu trả lời không hoạt động "ngoài hộp" cho tôi và điều này có thể tiết kiệm thời gian cho người khác.

Trong trường hợp của mình, tôi tắt trình đơn thả xuống gốc cho ứng dụng điện thoại thông minh khi nó chạy vào Android (vì nó có một số vấn đề xấu khi mở trình đơn thả xuống gốc, được báo cáo đã có trong chuỗi khác). Các "ma thuật thần chú" mà giải quyết vấn đề đối với tôi chỉ là những dòng sau:

$(document).bind('mobileinit',function(){ 
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { 
     $("select").attr("data-native-menu","true"); 
    } else { 
     $("select").attr("data-native-menu","false"); 
     $.mobile.selectmenu.prototype.options.nativeMenu = false; 
    }    
}); 

Những dòng này là trong một kịch bản tùy biến nạp ngay sau jQuery và ngay trước khi jQuery-Mobile. Điều quan trọng là phải giữ lệnh, nếu không các điều khiển đã được khởi tạo và nó không có hiệu lực!

Tôi hy vọng lời khuyên này có thể tiết kiệm thời gian cho ai đó!

Answer 8

chỉ thử data-native-menu="true"

từ doc: Bằng cách thêm dữ liệu bản địa-menu = "true" thuộc tính đến lựa chọn, khung làm việc sẽ sử dụng chọn menu mẹ đẻ của trình duyệt khi nút chọn được nhấp. Bởi vì tùy chọn này không sử dụng bất kỳ logic phân tích trình đơn và trình đơn tùy chỉnh nào, nó nhanh hơn đáng kể so với phiên bản trình đơn tùy chỉnh. Các menu chọn tùy chỉnh thêm khả năng chủ đề lựa chọn và cung cấp tính nhất quán trực quan trên nền tảng Ngoài ra, nó còn khắc phục một số chức năng còn thiếu trên một số nền tảng nhất định: hỗ trợ optgroup trên Android, khả năng chọn nhiều trên WebOS và thêm một cách thanh lịch để xử lý giá trị giữ chỗ.

for more info