Пользовательский интерфейс jQuery Slider - Улучшения - PullRequest
Новая
       13

Пользовательский интерфейс jQuery Slider - Улучшения

5 голосов
/ 30 апреля 2009

Я пробовал jQuery Slider и использовал пример, чтобы поиграть.

EDIT: Я хотел бы, чтобы ползунок отображал значения, как линейка, для повышения удобства использования. Как и сейчас, мне сложно пройти юзабилити-тестирование. Люди жалуются, что хотят знать, какую ценность они выбирают, прежде чем они начнут скользить.

Есть идеи, как мне этого добиться? Насколько я искал, я не мог узнать, существует ли эта функция или как это сделать. 

<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>

Ответы [ 3 ]

5 голосов
/ 01 мая 2009

Я нашел пример пользовательского слайдера пользовательского интерфейса JQuery, который отображает хеш-метки.

jQuery UI Slider из выбранного элемента

Это должно дать вам хорошую отправную точку. Дайте мне знать, если вам нужна помощь.

0 голосов
/ 04 августа 2009

Это должно помочь, он показывает значения рядом с ручкой. довольно аккуратно!:

http://www.keepthewebweird.com/creating-a-nice-slider-with-jquery-ui/

Смотрите учебник !! По какой-то причине демо немного отключено.

0 голосов
/ 01 мая 2009

Я синхронизировал ввод с ползунком вот так 

<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;
}
...