script.aculo.us - Tạo Thanh trượt

Thanh trượt là các rãnh mỏng có một hoặc nhiều tay cầm trên chúng mà người dùng có thể kéo dọc theo đường.

Mục tiêu của thanh trượt là cung cấp một phương thức nhập thay thế để xác định một giá trị số; thanh trượt đại diện cho một phạm vi và trượt một chốt dọc theo đường đi sẽ xác định một giá trị trong phạm vi này.

Thanh trượt có thể theo hướng ngang hoặc dọc. Khi nằm ngang, phần cuối bên trái của bản nhạc thường đại diện cho giá trị thấp nhất, trong khi theo hướng dọc, phần cuối của bản chiếu thường là giá trị thấp nhất.

Để sử dụng khả năng trượt của script.aculo.us, bạn sẽ cần tải mô-đun slider.js cùng với mô-đun prototype.js. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ như thế này -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

Tạo điều khiển thanh trượt

Việc tạo thanh trượt, như thường lệ, là vấn đề xây dựng một đối tượng tùy chỉnh trên một vài phần tử hiện có trong DOM của trang của bạn. Bạn sẽ cần hai yếu tố ở đây, một cho tay cầm và một cho bản nhạc như sau:

new Control.Slider(handle, track [ , options ] );

Phần tử track thường là <div> và phần tử xử lý là <div> hoặc <span> trong phần tử track. Cả hai đều có thể được chuyển bằng id = hoặc bằng tham chiếu DOM trực tiếp, như thường lệ.

Tùy chọn thanh trượt

Bạn có thể sử dụng một hoặc nhiều tùy chọn sau khi tạo đối tượng Slider của mình.

Sr.No	Tùy chọn & Mô tả
1	Axis Xác định hướng của điều khiển là ngang hoặc dọc . Hướng mặc định là nằm ngang .
2	Range Xác định phạm vi của các giá trị thanh trượt như một thể hiện của đối tượng Prototype ObjectRange. Mặc định từ 0 đến 1.
3	Values Xác định bộ giá trị rời rạc mà thanh trượt có thể nhận được. Nếu bị bỏ qua, tất cả các giá trị trong phạm vi có thể được đặt.
4	sliderValue Đặt giá trị ban đầu của thanh trượt. Nếu bị bỏ qua, giá trị được biểu thị bằng cạnh ngoài cùng bên trái (hoặc trên cùng) của thanh trượt là giá trị ban đầu.
5	Disabled Nếu đúng, nó tạo ra một trang chiếu bị tắt ban đầu. Rõ ràng là mặc định là sai.
6	setValue Sẽ cập nhật giá trị của thanh trượt và do đó di chuyển tay cầm thanh trượt đến vị trí thích hợp.
7	setDisabled Sẽ đặt thanh trượt ở trạng thái vô hiệu hóa (đã tắt = true).
số 8	setEnabled Sẽ đặt thanh trượt ở trạng thái đã bật (đã tắt = sai).

Bạn có thể cung cấp các lệnh gọi lại sau trong tham số tùy chọn -

Sr.No	Tùy chọn & Mô tả
1	onSlide Được gọi bất cứ khi nào Thanh trượt được di chuyển bằng cách kéo. Hàm được gọi nhận giá trị thanh trượt làm tham số của nó.
2	onChange Được gọi bất cứ khi nào Thanh trượt đã di chuyển xong hoặc thay đổi giá trị của nó thông qua hàm Giá trị setSlider. Hàm được gọi nhận giá trị thanh trượt làm tham số của nó.

Ví dụ về thanh trượt

<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){ $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v; } }); new Control.Slider('handle2' , 'track2', { range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v; } onSlide: function(v) { $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

Điểm cần lưu ý:

Bạn có thể thay đổi hình ảnh thanh trượt của bất kỳ thanh trượt nào bằng CSS. Sử dụng thuộc tính CSS background-image: url (track.gif) và background-repeat: no-repeat để đặt hình ảnh thanh trượt.
Giá trị phạm vi có thể được chỉ định bằng cách sử dụng $R(minValue, MaxValue). For example, $R (1, 100).
Giá trị phạm vi có thể được chỉ định theo các giá trị cụ thể. Ví dụ giá trị: [1,25,50,75,100]. Trong trường hợp này, thanh trượt sẽ chỉ đạt được các giá trị rời rạc được liệt kê khi tay cầm được di chuyển.
Tại bất kỳ thời điểm nào, giá trị của thanh trượt có thể được đặt dưới sự điều khiển của chương trình bằng cách gọi phương thức setValue () của cá thể thanh trượt, như trong: sliderInstance.setValue (50);

Điều này sẽ tạo ra kết quả sau: