Thanh trượt dọc trong html. Và bây giờ chi tiết hơn
Thanh trượt được thiết kế để nhập các số trong một phạm vi xác định, nhưng không giống như trường này, nó có giao diện khác và được sử dụng trong trường hợp việc chỉ báo không đặc biệt quan trọng giá trị chính xác. Các trình duyệt hiển thị giao diện của thanh trượt theo cách riêng của chúng, như trong Hình. Hình 1 thể hiện giao diện của thanh trượt trong Chrome.
Cơm. 1. Chế độ xem thanh trượt
Cú pháp tạo thanh trượt như sau.
Ở đây min là số tối thiểu trong phạm vi (mặc định 0), max là số tối đa (mặc định 100), step là bước thay đổi số (mặc định 1), value là giá trị hiện tại. Theo mặc định, giá trị được tính bằng công thức:
Nếu giá trị của max nhỏ hơn giá trị của min thì giá trị bằng min.
Các thuộc tính là tùy chọn, chúng có thể được bỏ qua, trong trường hợp đó chúng sẽ lấy giá trị mặc định. Bất kể số tối thiểu và tối đa, chiều rộng của thanh trượt vẫn giữ nguyên.
Bản thân các thanh trượt hiếm khi được sử dụng ở dạng “thuần túy” vì chúng không cung cấp những thứ cần thiết. nhận xét với người dùng, nhưng khi kết hợp với JavaScript, nó sẽ trở thành một thành phần giao diện mạnh mẽ và tiện lợi. Trong ví dụ 1, thanh trượt được sử dụng để thay đổi kích thước hình ảnh, tính năng này thường được sử dụng trong nhiều thư viện ảnh khác nhau.
Ví dụ 1: Sử dụng thanh trượt
Hàm trượt sizePic() ( size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )
Kích thước mẫu:
TRONG trong ví dụ này khi được điều khiển bởi thanh trượt, nó hoạt động sự kiện trao đổi gọi hàm sizePic. Chức năng này thay đổi kích thước hình ảnh tùy thuộc vào người dùng đã cài đặt các giá trị thanh trượt. Do đó, chiều rộng của hình ảnh, nếu muốn, sẽ giảm hoặc ngược lại, tăng. Kết quả của ví dụ trong trình duyệt IE được hiển thị trong Hình. 2.
Tôi hiện đang làm việc trên dự án được trả tiền đầu tiên của mình. Ngoài ra, dự án này yêu cầu tôi tạo kiểu và viết kịch bản cho các thanh trượt. Có một vài khoảnh khắc thú vị mà tôi muốn bạn chú ý, chẳng hạn như các vấn đề hiển thị trong IE, Android WebKit và sử dụng đúng sự kiện đầu vào và thay đổi. Và Đánh giá ngắn cú pháp.
Đây là ví dụ của tôi. Trong trường hợp cụ thể này, người dùng Hà Lan được yêu cầu sử dụng thanh trượt để phân chia 100 triệu euro quỹ ngân sách giữa một số bộ phận. Trong trường hợp này, tổng giá trị của tất cả các thanh trượt không được vượt quá 100 (hàng triệu), điều này yêu cầu phải viết một tập lệnh nhỏ.
Thanh trượt, theo dõi và thanh trượtĐây là thanh trượt. Về mặt kỹ thuật, nó được gọi là và nó không được hỗ trợ bởi IE9 trở xuống.
Đây là mã HTML:
Thanh trượt bao gồm một đường dẫn mà người dùng kéo thanh trượt dọc theo đó. Bạn có thể áp dụng kiểu cho rãnh và thanh trượt, nhưng không áp dụng được cho tập lệnh.
Phong cách cơ bảnTạo kiểu cho thanh trượt không khó lắm. Thanh trượt và rãnh có thể được tạo kiểu, mặc dù các phần tử giả được yêu cầu khác nhau tùy theo trình duyệt:
Đối với thanh trượt, hãy sử dụng -webkit-slider-thumb , -moz-range-thumb hoặc -ms-thumb .
Bản nhạc có thể được "truy cập" bằng cách sử dụng -webkit-slider-runnable-track , -moz-range-track hoặc -ms-track .
Bạn không thể kết hợp các bộ chọn này trong một quy tắc, mặc dù sẽ đúng hơn nếu sử dụng cùng một kiểu cho tất cả các trình duyệt (ngoại trừ phần thụt lề cho thanh trượt). Nếu trình duyệt tìm thấy một bộ chọn mà nó không nhận ra, nó sẽ bỏ qua tất cả các bộ chọn khác. Vì vậy, bạn sẽ phải lặp lại hoặc sử dụng trình tạo CSS ở phía máy chủ.
IE và MS Edge yêu cầu màu trong suốt và màu đường viền trên bản nhạc, nếu không chúng sẽ hiển thị kiểu bản nhạc mặc định. Họ cũng yêu cầu phần đệm khác cho thanh trượt so với các trình duyệt khác.
Trong ví dụ của tôi, chiều cao của thanh trượt là khoảng 40 pixel. Hóa ra các kiểu thanh trượt chính có bộ thuộc tính tràn: ẩn, ẩn hầu hết thanh trượt trong Edge và IE. Để khắc phục điều này, tôi phải đặt rõ ràng chiều cao của thanh trượt.
Trong IE, nhưng không phải Edge, thanh trượt được thụt vào. Vậy hãy hỏi phần đệm:0 và đỡ đau đầu cho bạn.
Tôi đã đọc nhiều lần rằng MS Edge nên hỗ trợ các thuộc tính -webkit-. Nhưng trên thực tế, hóa ra là không thể làm việc với một bộ kiểu cho cả Edge và WebKit/Blink. Tôi khuyên bạn nên sử dụng các kiểu -ms- riêng biệt, nếu chỉ vì chúng cần thiết cho IE10 và IE11. Tốt nhất là xác định kiểu -ms- sau -webkit- : theo cách đó, kiểu -ms- sẽ được thực thi chính xác trong Edge.
Trong các trình duyệt được xây dựng trên công cụ WebKit và Blink, thanh trượt mặc định là box-sizing: border-box , trong khi ở tất cả các trình duyệt khác, giá trị của thuộc tính này là content-box . Tốt hơn là nên đặt kích thước hộp cho thanh trượt một cách rõ ràng.
WebKit và Blink cũng yêu cầu -webkit-appearance: none nhưng có một ngoại lệ. Xem bên dưới.
mẫu CSSTất cả những vấn đề nhỏ này dẫn đến mẫu CSS sau:
đầu vào ( -webkit-appearance: none; Height: 35px; /* đặt chiều cao của bạn */ đệm: 0; /* tạo kiểu cho thanh trượt của bạn */ ) input::-webkit-slider-thumb ( -webkit-appearance: none; box -sizing: content-box; /* định kiểu cho thanh trượt của bạn */ ) input::-moz-range-thumb ( /* định kiểu lại cho thanh trượt của bạn */ ) input::-ms-thumb ( /* sẽ xuất hiện sau -webkit- */ /* định kiểu lại thanh trượt của bạn */ /* có thể cần phần đệm khác */ ) input::-webkit-slider-runnable-track ( /* tạo kiểu cho bản nhạc của bạn */ ) input::-moz-range-track ( / * tạo kiểu lại cho bản nhạc của bạn */ ) input::-ms-track ( /* sẽ xuất hiện sau -webkit- */ border-color: trong suốt; color: trong suốt; /* định kiểu lại bản nhạc của bạn */ )
đặc tính bề ngoài và Lỗi Android WebKitMột nhược điểm khác trong các trình duyệt dựa trên WebKit và Blink là bạn phải đặt thuộc tính -webkit-appearance: none trên cả thanh trượt và thanh trượt (nhưng không phải trên rãnh). Điều này được thể hiện trong mẫu CSSđưa ra ở trên.
Vấn đề thực sự là Android WebKit yêu cầu bạn không sử dụng khai báo này. Nếu bạn thêm -webkit-appearance: none , Android WebKit sẽ không hiển thị chính xác kiểu của bạn. Việc xóa mã này sẽ khắc phục được lỗi nhưng khi đó các kiểu thanh trượt sẽ không hiển thị trong Safari, Chrome và một số trình duyệt khác. Chúng ta hãy cùng nhau giải quyết vấn đề này.
Chúng tôi đặt -webkit-appearance: none trong CSS, đây là giải pháp duy nhất có tương lai. Trong Android WebKit, chúng tôi muốn thay đổi giá trị thành thanh trượt ngang. Nhưng làm sao chúng ta biết rằng chúng ta đang ở trong Android WebKit?
Nhận dạng trình duyệt? Đây không phải là thông lệ trong vòng kết nối của chúng tôi - điều này là tốt nhất: nó sẽ không hoạt động trong Xiaomi Chrome 34 (hoặc 35), dựa trên Chrome và do đó không yêu cầu giá trị nào, nhưng đồng thời "giả dạng" là Android.
Kế hoạch ban đầu của tôi là truy cập các kiểu thanh trượt và xem liệu chúng có khớp với kiểu của tôi không. Nếu chúng không vừa, thì chúng tôi sử dụng Slider-horizontal :
window.getComputedStyle(slider,"::-webkit-slider-thumb").height;
Hóa ra cách tiếp cận này luôn tạo ra các kiểu mặc định chứ không phải CSS của bạn. Phát biểu trong phác thảo chung, các tập lệnh cố gắng thực hiện điều gì đó bằng rãnh hoặc thanh trượt có xu hướng không hoạt động.
Sau đó, tôi thấy rằng việc sử dụng getComputedStyle() này không được hỗ trợ trong Android WebKit. Không có kiểu nào được trả về, thậm chí không có kiểu mặc định.
Vì vậy, tôi đã viết một thủ thuật cổ điển sử dụng một lỗi để loại bỏ một lỗi khác không liên quan. May mắn thay, đây là một thủ thuật an toàn vì cả hai lỗi chỉ có thể xuất hiện trong Android WebKit và trình duyệt đó không còn được phát triển nữa:
var testAndWK = window.getComputedStyle(slider,"::-webkit-slider-thumb").height; if (!testAndWK) ( thanh trượt.style.WebkitAppearance = "slider-horizontal"; )
Bạn có thể chạy thử nghiệm một lần và sử dụng kết quả cho từng thanh trượt. Cho dù bạn đang kiểm tra thuộc tính CSS nào, hãy kiểm tra xem nó có thực sự tồn tại hay không. Nếu không có giá trị nào được trả về thì đặt -webkit-appearance: Slider-horizontal cho mỗi thanh trượt. Vấn đề đã được giải quyết. Điều tuyệt vời hơn nữa là các trình duyệt khác sẽ bỏ qua chúng tôi khi chúng tôi sử dụng -webkit- .
Làm đầy thanh tiến trìnhTrong ví dụ của tôi, rãnh ở bên trái thanh trượt phải có màu nền khác với rãnh ở bên phải. IE/Edge và Firefox đề xuất sử dụng các phần tử giả cho việc này, WebKit và Blink thì không. Mã này giải quyết vấn đề trong tất cả các phiên bản IE, Firefox và Edge:
đầu vào::-ms-fill-dưới ( màu nền: #5082e0; ) đầu vào::-moz-range-progress ( màu nền: #5082e0; )
Đối với các trình duyệt dựa trên WebKit và Blink, cần có giải pháp với JavaScript. Tôi mượn ví dụ của tôi từ Ana Tudor. Giải pháp này sử dụng độ dốc tuyến tính với màu dừng được tính từ giá trị thanh trượt hiện tại. Hãy xem tập lệnh, đặc biệt là mã hàm handSlider().
Chú giải công cụAna Tudor cũng cho thấy cách sử dụng phần tử giả :Before làm chú giải công cụ được tạo kiểu chứa giá trị hiện tại. Thật không may, hóa ra IE/Edge và Firefox không hỗ trợ :trước hoặc :after trong trường hợp này. IE/Edge có chú giải công cụ tích hợp sẵn (xem bên dưới), nhưng Firefox không thể hiển thị chú giải công cụ.
Tôi đã thử một phần tử chuyển động phản ứng với chuyển động của thanh trượt, nhưng việc viết tập lệnh không hoạt động và không thể lấy được tọa độ hiện tại của thanh trượt. Tôi cũng đã thử sử dụng giá trị thanh trượt hiện tại thay vì tọa độ nhưng không thành công. Cuối cùng, chúng tôi quyết định sử dụng chú giải công cụ tĩnh (thực tế trông không giống chú giải công cụ).
IE/Edge có một chú giải công cụ tích hợp sẵn mà phần lớn không thể tạo kiểu được. May mắn thay, bạn có thể ẩn nó:
đầu vào::-ms-tooltip ( display: none; )
Sự kiện nhập và thay đổiKhi người dùng di chuyển thanh trượt dọc theo bản nhạc, thanh trượt có thể kích hoạt các sự kiện đầu vào hoặc thay đổi. Một số trình duyệt liên tục "xuất hiện" các sự kiện trong khi di chuyển, một số trình duyệt khác chỉ sau khi chuyển động đã dừng.
Khi theo dõi hành động của người dùng bằng thanh trượt, hãy chặn các sự kiện đầu vào và thay đổi. Sau đó gọi trình xử lý sự kiện khi người dùng ngừng di chuyển thanh trượt. Điều này cho kết quả ổn định trong tất cả các trình duyệt.
Khi thiết kế cửa hàng, bạn thường phải đối mặt với nhiệm vụ thực hiện lựa chọn mức giá thân thiện với người dùng. Nó có thể trông như thế này, ví dụ:
Tôi hy vọng ý tưởng này là rõ ràng. Chúng tôi kéo thanh trượt, giá trị trường thay đổi đồng bộ. Hãy thử thực hiện điều này.
Nhiệm vụTìm giải pháp js trên nhiều trình duyệt cho giao diện lựa chọn phạm vi. Yêu cầu:
- đầu vào và thanh trượt được kết nối (những thay đổi về giá trị của một cái sẽ được phản ánh ngay lập tức ở những cái khác);
- tính linh hoạt của kiểu dáng (mọi thứ sẽ giống như thiết kế).
Chúng tôi sẽ sử dụng plugin jQuery Thanh trượt giao diện người dùng. Bản thân nó chỉ đơn giản là tạo ra một thanh trượt, nhưng việc ghép nối nó với các đầu vào không khó.
Đã thử nghiệm trong:
- TỨC LÀ 6-8
- Firefox 4
- Opera 11
- Cuộc đi săn
- Trình duyệt Chrome
Vì vậy, trước tiên hãy tưởng tượng rằng không có đầu vào nào và hãy xem plugin này hoạt động như thế nào.
Tải về cái gì?- (24,33 Kb) lõi giao diện người dùng + thanh trượt.
Kết nối thư viện:
Chúng tôi khởi tạo thanh trượt bằng một tập lệnh:
jQuery("#slider").slider(( min: 0, max: 1000, value: , range: true ));
Và bây giờ chi tiết hơnPlugin khá linh hoạt. Cho phép bạn tạo các rãnh dọc hoặc ngang mà một hoặc hai thanh trượt có thể di chuyển. Tùy chọn có hai thanh trượt là lý tưởng cho nhiệm vụ của chúng tôi - chọn một phạm vi.
Khi bạn di chuyển thanh trượt hoặc dừng nó, bạn có thể thực hiện một số chức năng, nhờ đó thanh trượt có thể được sử dụng làm phần tử điều khiển (thay đổi giá trị của đầu vào, chọn hoặc, ví dụ: chuyển tab - có một ví dụ demo trên trang web chính thức của plugin).
Cài đặtKhi khởi tạo plugin, bạn có thể đặt tham số của nó:
| Tắt (đúng) hoặc bật (sai) thanh trượt. | boolean | SAI |
| Xác định xem thanh trượt có di chuyển trơn tru đến một điểm hay không khi người dùng nhấp vào một điểm trên dải. Nó cũng có thể lấy chuỗi giá trị đại diện cho một trong ba tốc độ để chọn ("chậm", "bình thường" hoặc "nhanh") hoặc một số mili giây xác định thời lượng của hoạt ảnh (ví dụ: 1000). | boolean, chuỗi, int | SAI |
| Giá trị thanh trượt tối đa. | Con số | 100 |
| Giá trị thanh trượt tối thiểu. | Con số | 0 |
| Xác định hướng của thang đo: từ trái sang phải hoặc từ dưới lên trên. Các giá trị có thể có: "ngang", "dọc". | Sợi dây | nằm ngang |
| Nếu được đặt thành true, thanh trượt sẽ có hai thanh trượt và một khoảng giữa chúng có thể được tạo kiểu. Hai giá trị còn lại là "min" và "max". Giá trị "min" tạo ra một phạm vi từ mức tối thiểu của thang đo đến thanh trượt. Giá trị "max" tạo ra một phạm vi từ thanh trượt đến mức tối đa của thang đo. | boolean, chuỗi | SAI |
| Xác định bước trượt. Phạm vi thang đo đầy đủ (tối đa - tối thiểu) phải được chia đều thành các bước. | Con số | 1 |
| Xác định giá trị thanh trượt nếu chỉ có một thanh trượt. Nếu có nhiều thanh trượt, hãy xác định giá trị của thanh trượt đầu tiên. | Con số | 0 |
| Tùy chọn này có thể được sử dụng để chỉ định nhiều thanh trượt. Nếu phạm vi là đúng thì phải có 2 giá trị "giá trị". | Mảng | vô giá trị |
Sự kiện là các chức năng sẽ được thực thi tại một số thời điểm nhất định trong vòng đời của thanh trượt. Bạn có thể thiết lập chúng trong quá trình khởi tạo. Ví dụ:
JQuery("#slider").slider(( stop: function(event, ui) ( cảnh báo("Thanh trượt đã di chuyển đến vị trí mới!"); ) ));
Danh sách sự kiện:
| Sự kiện xảy ra khi thanh trượt được tạo |
| Sự kiện xảy ra khi người dùng bắt đầu di chuyển thanh trượt. |
| Sự kiện xảy ra bất cứ khi nào chuột được di chuyển trong khi cuộn. Sử dụng ui.value (thanh trượt đơn) để lấy giá trị thanh trượt hiện tại, $(..).slider("value", index) để lấy giá trị thanh trượt cho thanh trượt nhiều thanh trượt. |
| Sự kiện xảy ra khi quá trình cuộn dừng lại hoặc nếu giá trị thay đổi lập trình(thông qua phương thức giá trị). Lấy các đối số sự kiện và ui. Sử dụng event.orginalEvent để xác định xem giá trị đã được thay đổi bằng chuột, bàn phím hay bằng lập trình. Sử dụng ui.value (thanh trượt đơn) để nhận giá trị thanh trượt hiện tại, $(this).slider("values", index) để nhận giá trị thanh trượt cho thanh trượt nhiều thanh trượt. |
| Sự kiện xảy ra khi người dùng đã di chuyển xong thanh trượt. |
Việc gọi các hàm này cho phép bạn tác động đến hoạt động của thanh trượt bằng cách thay đổi nhanh các tham số của nó. Việc này được thực hiện bằng cách sử dụng cấu trúc .slider(), ví dụ như thế này:
JQuery("#slider").slider("values",0, 100);
Danh sách các phương pháp:
| Loại bỏ chức năng thanh trượt, đưa phần tử về trạng thái ban đầu. |
| Vô hiệu hóa thanh trượt. |
| Bao gồm một thanh trượt. |
| Nhận hoặc đặt bất kỳ tùy chọn thanh trượt nào. Nếu không có giá trị nào được chỉ định, sẽ đóng vai trò là người nhận. Cú pháp: .slider("option", optionName , ) |
| Đặt nhiều tùy chọn thanh trượt cùng một lúc bằng cách cung cấp các tùy chọn đối tượng. Cú pháp: .slider("option", options) |
| Trả về phần tử .ui-slider. |
| Đặt hoặc trả về giá trị của thanh trượt. Đối với thanh trượt có một thanh trượt. |
| Đặt hoặc trả về giá trị của thanh trượt. Đối với thanh trượt có nhiều thanh trượt hoặc có phạm vi. |
Thực chất là cách điệu phần tử jQuery Giao diện người dùng (một trong số đó là thanh trượt này) diễn ra bằng cách chọn chủ đề bạn thích và tải xuống CSS tạo sẵn từ trang web chính thức. Cá nhân tôi không hề hài lòng với cách tiếp cận này. Vì vậy, tôi đã chọn từ CSS của họ (rất dư thừa nếu bạn chỉ sử dụng thanh trượt) CSS mã yêu cầu, mà tôi trình bày ở đây với ý kiến.
/* Chiều rộng thanh trượt */ #slider ( width: 200px; ) /* Vùng chứa thanh trượt */ .ui-slider ( vị trí: tương đối; ) /* Thanh trượt */ .ui-slider .ui-slider-handle ( vị trí: tuyệt đối; z-index: 2; width: 13px; /* Đặt chiều rộng mong muốn */ chiều cao: 13px; /* và chiều cao */ nền: url(../img/slider.png) no-repeat; /* hình ảnh mô tả thanh trượt. Hoặc bạn có thể tô màu cho nó, đặt đường viền và phi lê */ con trỏ: con trỏ ) .ui-slider .ui-slider-range ( vị trí: tuyệt đối; z-index: 1; cỡ chữ: .7em; hiển thị : khối; đường viền: 0 ; tràn: ẩn; ) /* thanh trượt ngang(chính dải mà thanh trượt chạy dọc theo) */ .ui-slider-horizontal ( Height: 3px; /* đặt chiều cao theo thiết kế */ ) /* định vị các thanh trượt */ .ui-slider-horizontal .ui -slider-handle ( top : -5px; lề trái: -6px; ) .ui-slider-horizontal .ui-slider-range ( top: 0; Height: 100%; ) .ui-slider-horizontal .ui- Slider-range-min ( left: 0; ) .ui-slider-horizontal .ui-slider-range-max ( right: 0; ) /* thiết kế dải dọc theo đó thanh trượt di chuyển */ .ui-widget-content ( border: 1px Solid #D4D4D4; Background : #fff; ) /* thiết kế vùng hoạt động (giữa hai thanh trượt) */ .ui-widget-header ( border: 1px Solid #D4D4D4; Background: #f00; ) /* làm tròn cho thanh trượt */ .ui-corner- all ( -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; )
Một số quy tắc này có thể được kết hợp vì plugin hào phóng thưởng cho các phần tử có nhiều lớp. Ví dụ, bản gốc của tôi
trở thành
Nhưng tôi thích để lại các kiểu này vì chúng có tính linh hoạt cao hơn. Tôi nghĩ bất cứ ai phải tạo kiểu cho thanh trượt dọc bằng mẫu này sẽ cảm ơn tôi.
Thêm đầu vào liên quanBây giờ đến phần thú vị. Hãy thêm hai đầu vào trong đó chúng tôi sẽ hiển thị các giá trị đã chọn trên thanh trượt.
Khi khởi tạo thanh trượt, chúng tôi sử dụng sự kiện dừng và trượt - sự kiện đầu tiên sẽ cung cấp giá trị chính xác khi thanh trượt dừng và sự kiện thứ hai sẽ thêm tính tương tác (giá trị đầu vào sẽ thay đổi theo thời gian thực, đồng bộ với chuyển động của thanh trượt).
Mã cho cả hai sự kiện đều giống nhau - chúng tôi lấy giá trị hiện tại bằng phương thức .slider("values",X) và đặt nó vào đầu vào mong muốn:
JQuery("#slider").slider(( min: 0, max: 1000, value: , range: true, stop: function(event, ui) ( jQuery("input#minCost").val(jQuery("# thanh trượt").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); ), slide: function(event , ui)( jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider" ).slider("giá trị",1)); ) ));
Tất cả những gì còn lại là tổ chức phản hồi. Chúng tôi dạy thanh trượt di chuyển nếu người dùng nhập một giá trị vào đầu vào. Ở đây chúng ta có thể sử dụng sự kiện nhấn phím để thanh trượt phản ứng với từng phím được nhấn hoặc sự kiện thay đổi nếu chúng ta muốn thay đổi có hiệu lực sau khi hoàn thành việc nhập và rời khỏi trường. Một vấn đề về hương vị.
Đồng thời, tôi chèn một kiểm tra xem giá trị trên có nằm ngoài phạm vi không (đối với tôi là 1000) và kiểm tra xem thanh trượt dưới không nhận được giá trị lớn hơn giá trị trên:
JQuery("input#minCost").change(function())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if( ParseInt (value1) > ParseInt(value2))( value1 = value2; jQuery("input#minCost").val(value1); ) jQuery("#slider").slider("values",0,value1); ) ) ; jQuery("input#maxCost").change(function())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if ( value2 > 1000) ( value2 = 1000; jQuery("input#maxCost").val(1000)) if(parseInt(value1) > parseInt(value2))( value2 = value1; jQuery("input#maxCost").val ( value2); ) jQuery("#slider").slider("values",1,value2); ));
Chi tiết cuối cùng là đảm bảo người dùng không thể phá plugin bằng cách nhập chữ hoặc sai vào đầu vào giá trị số. Tôi sẽ không xem xét chi tiết điểm này vì nó không liên quan trực tiếp đến chủ đề của bài viết. Tất nhiên, tôi đề cập đến những người tò mò về nơi thực hiện điều này.
Trong một trong những ấn phẩm sau đây, chúng tôi sẽ làm phức tạp nhiệm vụ. Tôi sẽ chỉ ra cách, dựa trên giải pháp này, bạn có thể thực hiện lựa chọn giá trị với một bước không đồng đều và quy mô khác nhau. Nghĩa là, khi được yêu cầu, chẳng hạn, nửa đầu của thanh trượt có phạm vi giá trị từ 0 đến 100 và nửa thứ hai từ 100 đến 1000.
Những lựa chọn như vậy thường được tìm thấy trong các cửa hàng trực tuyến - điều này rất tiện lợi, vì đối với số lượng nhỏ, việc tùy chỉnh là quan trọng hơn và sự thuận tiện cho người dùng, như bạn biết, là ưu tiên hàng đầu.
Và kết quả của việc sử dụng thanh trượt trong code:
Các thuộc tính sau đã được giới thiệu để hoạt động với thanh trượt:
- max - giá trị tối đa của phần tử (tương ứng với vị trí ngoài cùng bên phải của thanh trượt). Con số.
- min - giá trị tối thiểu của phần tử (tương ứng với vị trí ngoài cùng bên trái của thanh trượt). Con số.
- bước - bước trượt. Con số.
Một ví dụ về việc sử dụng các thuộc tính được trình bày dưới đây.
|
Ngoài ra, giống như bất kỳ phần tử HTML nào, bạn có thể áp dụng kiểu CSS cho kiểu đầu vào="phạm vi".
Cách làm việc với thanh trượt trong JSVì thanh trượt là phần tử Đầu vào nên bạn có thể sử dụng thuộc tính value để đọc giá trị của nó. Trong ví dụ sau, chúng ta sẽ đọc giá trị của một thanh trượt và xuất nó thành một đoạn văn.
function fun1() ( var rng=document.getElementById("r1"); //rng là Đầu vào var p=document.getElementById("one"); // p - đoạn p.innerHTML=rng.value; )
hàm fun1() ( var rng = tài liệu. getElementById('r1"); //rng là Đầu vào var p = tài liệu. getElementById (& #x27;one"); // p - đoạn P. bên trongHTML = rng. giá trị ; |
Lưu ý sự kiện oninput mới. Sự kiện OnInput - được kích hoạt khi có bất kỳ thay đổi nào trong thành phần biểu mẫu, ví dụ: khi nhập một ký tự mới hoặc khi thanh trượt được di chuyển thêm 1px. Không giống như sự kiện OnChange, chỉ được kích hoạt khi phần tử mất tiêu điểm, oninput được kích hoạt khi có bất kỳ thay đổi nào trong phần tử. Sự kiện này thêm tính tương tác vào thanh trượt.
Sự kiện onchange cũng hữu ích khi được sử dụng với phần tử được chọn.
Nhiệm vụ thực tếNhiệm vụ 1. Thay thế sự kiện OnInput trong ví dụ được trình bày bằng sự kiện onchange. Nghiên cứu hành vi của các phần tử đã thay đổi như thế nào. Khi nào ý nghĩa của một đoạn văn được cập nhật?
Nhiệm vụ 2. Đặt thanh trượt ở giá trị tối thiểu là 50 và giá trị tối đa là 150. Nghiên cứu xem giá trị tối thiểu và tối đa nào được hiển thị trong một đoạn văn?
Nhiệm vụ 3. Đặt bước thanh trượt thành 10. Các giá trị trong một đoạn văn thay đổi như thế nào?
Nhiệm vụ 4. Đặt bước thay đổi giá trị thành 7. Làm thế nào để thay đổi giá trị tối đa và tối thiểu?
Chúng tôi tiếp tục làm việc với thanh trượt phạm viChú ý! Các giá trị được đọc từ thuộc tính value là một chuỗi. Đừng quên chuyển đổi chúng thành số bằng hàm phân tích cú pháp (chuỗi của bạn).
Hãy quyết định nhiệm vụ đơn giản: xuất giá trị của thanh trượt thành đầu vào. Để thực hiện việc này, bạn cần chuyển giá trị của thuộc tính Slider.value sang thuộc tính input.value. Một ví dụ đã được biểu diễn ở dưới:
function fun1() ( var rng=document.getElementById("r1"); //rng là một thanh trượt var i1=document.getElementById("i1"); // i1 - input i1.value=rng.value; )
Nhiệm vụ thực tếNhiệm vụ 5. Nghiên cứu công việc của ví dụ trên. Thêm sự kiện oninput="fun2()" vào input type="text". Đối với hàm fun2, hãy lập trình tác vụ nghịch đảo - những giá trị được nhập vào đầu vào sẽ tự động được gán cho thanh trượt.
Để bảo mật nó, hãy thực hiện thêm một nhiệm vụ nữa: sử dụng thanh trượt để thay đổi kích thước khối div. Bố cục của nhiệm vụ được trình bày dưới đây:
Xin chào mọi người, mình quyết định viết một bài về cách tạo kiểu phần tử html 5 với kiểu phạm vi, dạng thanh trượt, tiện lợi và hiện đại. Tôi cũng sẽ hướng dẫn bạn cách làm việc với nó thông qua JavaScript, trên Ví dụ về JQuery. Tôi muốn nói ngay rằng thực tế không có vấn đề gì với kiểu dáng, nhưng nếu bạn cũng cần thực hiện một số hành động với nó thì có đá dưới nước mà tôi sẽ nói về dưới đây. Có một số giải pháp nhưng ngay khi có giải pháp cơ bản chắc chắn tôi sẽ bổ sung vào bài viết.Đi thôi =)
phạm vi loại đầu vào htmlĐể bắt đầu, chúng ta hãy viết Mã HTML, Tôi sẽ thêm hai đầu vào với loại phạm vi, một đầu vào sẽ được hiển thị dưới dạng chế độ xem ban đầu trong trình duyệt và chúng tôi sẽ thay đổi đầu vào còn lại và cung cấp ngay cho nó lớp phạm vi:
Tôi đã tạo một tệp để viết mã JS, một tệp có các biểu định kiểu và được kết nối thư viện jQuery Cả hai đầu vào đều có cùng mức tối đa và giá trị tối thiểu và cũng đặt giá trị ban đầu thành 25
Mở file có style và thiết lập ngay style cho html, body và block bằng lớp wrp:
Hãy đặt kiểu cho các trình duyệt thông thường như Chrome, tất nhiên ở đây hãy đặt kiểu cho class.range:
Vì vậy, chúng tôi dường như đặt lại các kiểu tiêu chuẩn và bạn có thể viết các kiểu của riêng mình cho chính đường đua một cách an toàn.
Chẳng có gì siêu nhiên ở đây cả nên mỗi người tự tạo ra một loại đường chạy tùy thích. Bây giờ, hãy đặt kiểu cho thanh trượt, thứ mà chúng ta kéo hoặc di chuyển như trong trình phát. Để đặt kiểu cho thanh trượt, bạn cần thêm phần tử giả ::-webkit-slider-thumb và cũng đặt lại kiểu và sau đó làm như chúng ta cần
Mọi thứ cũng rõ ràng và đơn giản, người duy nhất có thể không biết về thuộc tính chuyển đổi cuối cùng là thiết lập chuyển đổi hoạt hình giữa các trạng thái, nghĩa là tôi sẽ có một lớp giả :hover và do đó có chuyển tiếp suôn sẻ Tôi đã thêm thuộc tính này Hãy thêm:hover, nhưng cũng:active
Mọi thứ cũng đơn giản và suôn sẻ. Ví dụ: nếu chúng tôi mở nó trong Chrome hoặc trình duyệt Yandex, thì mọi thứ sẽ như bình thường. Đối với các trình duyệt khác, ở tất cả các nơi, chúng tôi đều thêm bộ webkit mà chúng tôi cần, đó là:
- dành cho Mozilla moz,
- cho opera o,
- đối với IE ms, nhưng chúng ta sẽ nói về Internet Explorer sau. Hãy nhớ rằng các kiểu cho mỗi trình duyệt sẽ phải được lặp lại, nếu không nếu bạn kết hợp và viết các phần tử giả cách nhau bằng dấu phẩy thì sẽ không hoạt động. Dưới đây tôi sẽ chỉ ra phần tử giả nào dành cho ai
Thực lòng tôi không biết nó được gọi chính xác là gì, nhưng đây là thanh đi theo thanh trượt của chúng ta khi chúng ta kéo hoặc di chuyển nó, nó có thể là thanh tải, thanh xử lý, thanh tiến trình, tôi không biết loại nào đó. chỉ báo nói chung, nhưng tôi nghĩ bạn hiểu chúng ta đang nói về điều gì, bởi vì chúng ta có cùng bước sóng, nếu trong hình bên dưới nó có màu xanh lam: D Vì vậy, để tạo ra nó, bạn cần có thuộc tính nền hoặc hình nền, ai làm Nó
Vì Trình duyệt Firefox Chúng tôi sử dụng moz thay vì webkit. Tôi đã tô đậm những chỗ mà chúng tôi thay đổi giá trị để thanh di chuyển cùng với giá trị của chính đầu vào. Nếu chúng ta di chuyển bây giờ, dải sẽ không di chuyển, chúng ta sẽ nói về điều đó sau
Như đã hứa, tôi đang viết danh sách những phong cách nào phù hợp với trình duyệt nào
Điều này phù hợp với Chrome, Yandex, Opera và Safari:
Mozilla, nó hơi khác một chút nhưng vẫn đơn giản
Ở đây hoàn toàn khác, bạn sẽ phát điên với những trình duyệt này. Nói chung, IE chia đầu vào của chúng tôi thành ba phần, vì vậy đây là các quy tắc:
Cá nhân mình thì chưa test trên IE, vì sau khi cài xong Windows của mình bị lỗi và mình không làm lại nữa, mình sẽ sửa lại tại đây khi học được điều gì đó mới =)
phạm vi đầu vào JQueryTôi đã viết ở trên rồi, đây là những gì chúng tôi sử dụng
Sơ đồ như sau: nếu chúng ta cài đặt trình xử lý sự kiện “thay đổi” và sử dụng nó để nhận giá trị của đầu vào, sau đó thay đổi thuộc tính css, nó sẽ hoạt động như thế này: di chuyển thanh trượt và nhả chuột, sau đó đường sẽ di chuyển.
Và điều này hợp lý nhưng không hoàn toàn đẹp đẽ, vì vậy tôi đề xuất một giải pháp khác
Mở file script.js hoặc viết vào chính html, không thành vấn đề và viết hàm này:
Mọi thứ đều đơn giản, chúng tôi thực hiện tương tự trong sự kiện thay đổi, nhận giá trị và thay đổi kiểu ở đúng vị trí, chỉ cần lưu ý rằng các giá trị phải theo tỷ lệ phần trăm, vì phạm vi đầu vào của tôi từ 0 đến 100 , Tôi không tính toán bất cứ điều gì, nhưng nếu, ví dụ: từ 0 đến 120, thì tôi sẽ chuyển giá trị kết quả thông qua công thức (val*100)/120, tức là tôi sẽ nhận được phần trăm của số . Tôi nghĩ điều này đã rõ ràng. Tiếp theo, để điều này cuối cùng hoạt động, bạn cần chỉ ra nó trong sự kiện oninput của phần tử nhập hàm này:
Chỉ vậy thôi, bây giờ nó sẽ hoạt động
Chà, bây giờ là những viên sỏi thận mà tôi đã nói ở phần đầu
Điều mấu chốt mà tôi biết hôm nay là tính năng này sẽ không hoạt động trong Mozilla. Tại sao lại không?
Câu trả lời rất đơn giản và nằm trên bề mặt, vì đối với Mozilla, chúng tôi chỉ có thể thay đổi kiểu bằng cách sử dụng phần tử giả, nhưng đối với các phần tử giả JavaScript không tồn tại trong DOM, vì vậy chúng tôi không thể làm việc với nó. Nếu có một nhiệm vụ một lần, chẳng hạn như chỉ thay đổi màu sắc, chúng ta có thể sử dụng lớp thứ hai, nhưng trong trong trường hợp này Các bạn ơi mình chưa tìm ra hay nghĩ ra gì cả, ai biết thì viết nhé =)
Phần kết luận Về nguyên tắc thì chỉ vậy thôi, nhưng khi nào có xe có thêm phần nữa thì nhất định mình sẽ bổ sung vào bài viết. Cảm ơn mọi người, bye =)
