Core ui chọn không hoạt động cho người dùng di động

Tôi đang sử dụng tập lệnh "lõi ui chọn" để tạo kiểu cho biểu mẫu trên trang web của mình. Tất cả mọi thứ đã làm việc tốt cho người dùng máy tính để bàn, nhưng kể từ một thời gian có rất nhiều báo cáo từ người dùng sử dụng điện thoại di động. Họ nói rằng họ không thể sửa đổi tùy chọn vì nó chuyển sang màu xám.Core ui chọn không hoạt động cho người dùng di động

Vì vậy, tôi đã thực hiện thử nghiệm bằng cách sử dụng plugin firefox có tên "Tác nhân người dùng mặc định" và tôi đã chuyển đại lý trình duyệt của mình sang iPhone. Sau đó, tôi nhận ra rằng toàn bộ hình thức ngừng làm việc, nhưng chỉ dành cho người dùng di động

Dưới đây là một trang thử nghiệm nếu bạn muốn để xem vấn đề sống (bạn sẽ phải thay đổi tác nhân người dùng của bạn để tạo lại lỗi): https://www.ni-dieu-ni-maitre.com/test_mobile.php

Và đây là mã của trang.

<script type="text/javascript" src="https://www.no-gods-no-masters.com/scripts/jquery-1.8.2.min.js"></script> 
<link href="https://www.no-gods-no-masters.com/scripts/css/core-ui-select.css" media="screen" rel="stylesheet" type="text/css"> 
<link href="https://www.no-gods-no-masters.com/scripts/css/jquery.scrollpane.css" media="screen" rel="stylesheet" type="text/css"> 
    <script> 
    $(document).ready(function(){ 
     $('#impression').coreUISelect(); 
    }); 
    </script> 
</head><body> 

<select class="b-core-ui-select__dropdown" name="impression" id="impression"> 
<option>Printing on front</option> 
<option>Printing on back</option> 
</select> 

<script src="https://www.no-gods-no-masters.com/scripts/js/jquery.core-ui-select.js"></script> 
</body> 
</html>

Nguồn

2015-05-21 libertaire

Tôi vừa nhận ra rằng ngay cả trang demo của tập lệnh chọn giao diện người dùng lõi cũng có lỗi này ... Vì vậy, đây không phải là lỗi với trang web của tôi nhưng với tập lệnh lõi-ui-chọn ... Có ai biết cách sửa điều này ? Tôi có thể trả tiền cho công việc – libertaire

UI lõi không thực sự được thiết kế cho thiết bị di động. Bạn có thể thử điều này: http://touchpunch.furf.com/ Tôi đã thêm tập lệnh nhỏ này để sử dụng thanh trượt uicore và hoạt động hoàn hảo trên tất cả các thiết bị di động mà tôi đã thử nghiệm, bao gồm iPAD, iPhone, Samsung galaxy s3-4-5. Hy vọng rằng sẽ giúp – Bene

Nó không phải là lỗi. Khi thực thi trên thiết bị di động, plugin (lõi-ui-select) bỏ qua một cách rõ ràng mã thao tác DOM có nghĩa là hiển thị menu thả xuống.

Để thấy điều này, bạn có thể thiết lập một điểm break trong số dòng jquery.core-ui-select.js 176.

CoreUISelect.prototype.showDropdown = function() { 
     this.domSelect.focus(); 
     this.settings.onOpen && this.settings.onOpen.apply(this, [this.domSelect, 'open']); 
     if($.browser.mobile) return this; //176: this skips the rest on mobile 
     if(!this.isSelectShow) { 
      this.isSelectShow = true; 
      this.select.addClass('open'); 
      this.dropdown.addClass('show').removeClass('hide'); 
      if(this.isJScrollPane) this.initJScrollPane(); 
      this.scrollToCurrentDropdownItem(this.dropdownItem.eq(this.getCurrentIndexOfItem())); 
      this.updateDropdownPosition(); 
     } 
    }

Việc đánh giá về dòng 176: $.browser.mobile để đánh giá đúng khi khai thác (Tôi mô phỏng một thiết bị di động trong Chrome) và phần còn lại được bỏ qua.

Khắc phục: Xóa dòng hiển thị trình đơn thả xuống rất tốt.

Nguồn

2015-05-25 22:45:08 BluePill

Core ui chọn không hoạt động cho người dùng di động

Trả lời

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