1. Trang chủ
  2. Câu hỏi và trả lời
  3. Giao diện người dùng jQuery Slider - Các cải tiến

Giao diện người dùng jQuery Slider - Các cải tiến

2009-04-30 42 views
5

Tôi đã thử jQuery Slider và sử dụng một ví dụ để phát xung quanh.Giao diện người dùng jQuery Slider - Các cải tiến

EDIT: Tôi muốn có thanh trượt hiển thị các giá trị, như thước kẻ, để tăng khả năng sử dụng. Như bây giờ, tôi thấy khó khăn để vượt qua bài kiểm tra khả năng sử dụng. Mọi người phàn nàn rằng họ muốn biết họ đang chọn giá trị nào trước khi họ bắt đầu trượt.

Bất kỳ ý tưởng nào về cách tôi có thể đạt được điều này? Theo như tôi đã tìm kiếm, tôi không thể tìm hiểu liệu tính năng này đã tồn tại hay về cách thực hiện điều này.

<html> 
<head> 
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
<style type="text/css"> 
    #slider { margin: 10px; } 
</style> 
<script type="text/javascript"> 
    $(function() { 
     $("#slider").slider({   
      value: 50, 
      min: 0, 
      max: 99, 
      step: 1, 
      slide: function(event, ui) { 
       $("#amount").val('$' + ui.value); 
      } 
     }); 
     $("#amount").val('$' + $("#slider").slider("value")); 
    }); 
</script> 
</head> 
<body style="font-size:62.5%;"> 
<div id="slider"></div> 
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</body> 
</html>

Nguồn

2009-04-30 Vijay Dev

Trả lời

5

Tôi đã tìm thấy ví dụ về Thanh trượt giao diện người dùng JQuery tùy chỉnh hiển thị dấu băm.

jQuery UI Slider from a Select Element

Điều này sẽ cung cấp cho bạn một điểm khởi đầu tốt. Hãy cho tôi biết nếu bạn cần sự giúp đỡ.

Nguồn

2009-05-01 04:53:07 bchang

0

Tôi đã giữ đầu vào đồng bộ với thanh trượt như vậy

<div id='support_slider' class='slider' alt='" + pct + "'></div> 
<input id='support_input' class='input' alt='" + pct + "' value='" + pct + "' size='1'/> 

$("#support_slider").slider({ 
    //animate: true, 
    min: 0, 
    max: 10, 
    value: pct, 
    slide: function(event, ui) { 
      set_sliders_and_input($(this), $(this).next(), $(this).next().attr("value"), ui.value); 
    } 
}); 

$("#support_input").keyup(function(event) { 
    set_sliders_and_input($(this).prev(), $(this), $(this).attr("alt"), $(this).attr("value")); 
}); 

function set_sliders_and_input(slider, input, oldv, newv) { 
    if (newv < 0 || newv > 100) return false; 
    var diff = oldv - newv; 
    input.attr("value", newv).attr("alt", newv); 
    slider.slider('option', 'value', newv); 
    GM_setValue('support_pct', newv); 
    return true; 
}

Nguồn

2009-05-01 16:32:33

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

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