подсказка для следования за дескриптором ползунка jQuery?
Я задаюсь вопросом, было ли возможно присоединить подсказку к дескриптору ползунка? Моя текущая функция ползунка:
$('#slider').slider({
max: 18,
animate: 'slow',
orientation: 'vertical',
slide: function(e,ui) {
$('#storage').html(storage[ui.value-1]);
$('#ram').html(ram[ui.value-1]);
$('#bandwidth').html(bandwidth[ui.value-1]);
$('#cpu').html(cpu[ui.value-1]);
$('#price').html(price[ui.value-1]);
}
});
Я хочу взять это и применить подсказку для следования за дескриптором. Этим повторно управляли бы так или иначе определить положение и динамично обновить положение подсказки на основе положения ползунка?
2 ответа
На самом деле использование атрибута title - это более простой способ (идея belugabob)
$(function() {
$("#slider").slider()
.find(".ui-slider-handle")
.attr("title", "Slide Me")
});
Однако, если вы хотите полный контроль, используйте этот пример
Предварительный просмотр: http://jsbin.com/eluqi3/166/edit
$(function() {
var $slideMe = $("<div/>")
.css({ position : 'absolute' , top : 10, left : 0 })
.text("Slide Me!")
.hide()
$("#slider").slider()
.find(".ui-slider-handle")
.append($slideMe)
.hover(function()
{ $slideMe.show()},
function()
{ $slideMe.hide()}
)
});
Практически любому элементу HTML можно назначить всплывающую подсказку, присвоив ему атрибут «заголовок», где требуемый текст является значением атрибута.
В случае вашего слайдера, можете ли вы надежно найти HTML-элемент, используемый для рисования ручки слайдера? Если это так, просто добавьте атрибут title, и вы будете в бизнесе.
РЕДАКТИРОВАТЬ: Как и в целом, разумное использование атрибута title может сделать ваши страницы более аккуратными - добавляя контекстно-зависимую информацию, вы не занимаетесь пространством экрана до тех пор, пока она действительно не понадобится, и поможете тем, кто не знаком с пользовательским интерфейсом. вашего сайта.