Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 35
спасибо, полезно.
а то все просто функциями пишу, когда многие вещи можно удобно «вплужить»…
а то все просто функциями пишу, когда многие вещи можно удобно «вплужить»…
Отличное решение. Я где-то с год назад под трэкбар для выбора времени переделал FC-TrackBar.
Эхх, я забыл, что парсер очень не любит слово script в ссылках.
Take two
Take two
Что-то глючит слайдер в ФФ 3.6.8. Когда пытаешься перетащить его мышью, первая реакция браузера — как на попытку перетащить картинку по странице (полупрозрачная картинка и курсор превращается в зачеркнутый круг). Отпускаешь левую кнопку — слайдер начинает двигаться за курсором. И делает это пока не кликнешь снова — я вот уже несколько раз переключился между разными табами, но когда возвращаюсь в ваш тест, слайдер все еще отслеживает мышь.
В google появились пробки? Ура! Больше не придется гуглить адрес яндекса!
При изменении значения курсор оказывается слева от ползунка, морает курсор с дефолтного на pointer когда выходит за приделы «ссылки»(кстати, непонятно зачем используется , для поддержки css hover в недобраузерах?), от ползунка слева-снизу идет выступающая полоска синего цвета(вероятно рудимент ссылки).
В примере «Input field to be converted into time slider» видимо можно вбить время в интуп, но инпут-то задисаблен(что не располагает к его изменению) и не проявляет никакой реации.
Хотелось бы:
— перемещение ползунка по клику на слайдер
— возможность задать шаг
— обработку удерживания нажатой стрелки
P. S. Linux/Firefox 3.6.8
В примере «Input field to be converted into time slider» видимо можно вбить время в интуп, но инпут-то задисаблен(что не располагает к его изменению) и не проявляет никакой реации.
Хотелось бы:
— перемещение ползунка по клику на слайдер
— возможность задать шаг
— обработку удерживания нажатой стрелки
P. S. Linux/Firefox 3.6.8
Ссылкой сделано для возможно навигации с клавиатуры.
рудимент сылки убит, спасибо :)
Обработка удерживания нажатой стрелки — выполнена.
перемещение ползунка по клику на слайдер — при наличии опции clickable: true будет работать.
В общем, версия 1.0 вышла в свет.
Возможность задать шаг появится в следующей версии.
Возможность задать шаг появится в следующей версии.
Рановато для первой версии, остались два самых противных бага:
— при изменении значения курсор оказывается слева от ползунка
— моргает курсор с дефолтного на pointer когда выходит за приделы «ссылки», т. е. при движение влево, хотя возможно пропадет после исправления первого пункта
З. Ы. когда еще есть чего стоит сделать не надо называть версией 1.0, начинать надо с малого, например, 0.1, а перед версией 1.0 оптимизировать код и исправить по возможности все известные баги.
— при изменении значения курсор оказывается слева от ползунка
— моргает курсор с дефолтного на pointer когда выходит за приделы «ссылки», т. е. при движение влево, хотя возможно пропадет после исправления первого пункта
З. Ы. когда еще есть чего стоит сделать не надо называть версией 1.0, начинать надо с малого, например, 0.1, а перед версией 1.0 оптимизировать код и исправить по возможности все известные баги.
Мне не нравится множество проектов версии 0.x.
Этим проектом можно пользоваться, он работает, поэтому стал 1.0.
Хотя в мире ruby, например, куча проектов версии 0.x, но они часто стабильнее проектов версии 1.x.
Похоже, вопрос предпочтений, не более.
Этим проектом можно пользоваться, он работает, поэтому стал 1.0.
Хотя в мире ruby, например, куча проектов версии 0.x, но они часто стабильнее проектов версии 1.x.
Похоже, вопрос предпочтений, не более.
Версии 0.x больше приняты в мире опенсорса(js и ruby не исключение) — это что-то вроде статуса беты(версии 0.0.x — превью), до того как приложение заработало и готово к выпуску ему не дают номер версии, для этапа разработки гораздо удобрее ревизии из системы контроля версий(альфы), так что одно наличие номера версии говорит о некой стабильности. Версия 1.0 обычно сообщает о стабилизации api и последущей поддержки совместимости, а версия 2.0 о значительно переписаном коде.
Начитать с 1.x любят виндузятники, для комерческих приложений это правильно(которые в теории выпускают готовый продукт), но любительские приложения которые выкладывают как только заработает — недостаточно оттестированы, отсюда и отсутствие стабильности. Еще они часто считают что после 1.9 должно идти 2.0, это лишь пораждает проблемы, в итоге версии 2.0 оказываются еще не готовы к использованию.
Начитать с 1.x любят виндузятники, для комерческих приложений это правильно(которые в теории выпускают готовый продукт), но любительские приложения которые выкладывают как только заработает — недостаточно оттестированы, отсюда и отсутствие стабильности. Еще они часто считают что после 1.9 должно идти 2.0, это лишь пораждает проблемы, в итоге версии 2.0 оказываются еще не готовы к использованию.
Вы изобрели <input type=«range»>?
«At time of writing, the latest versions of Safari, Chrome, and Opera all do this.» — ни ФФ, ни ИЕ в списке поддерживающих нет. Автор же предложил решение, которое в них работает.
Можно было использовать этот элемент и его атрибуты для управления плагином, если браузер изначально не поддерживает <input type=«range»>. Таким образом сделаны многие кроссбраузерные плейсхолдеры.
Вообще-то это материал, обучающий созданию плагинов для jQuery ;)
Для себя сделал шаблон, по которому уже который год клепаю jQuery плагины — шаблон оказался удачным.
Поясню на вашем примере:
Любой jQuery плагин можно разделить на такие 3 части, в итоге мы имеем:
1. Возможность менять опции у уже созданных слайдеров и рендерить их с учетом новых опций
2. Доступ к свойствам и методам каждого отдельного слайдера извне через $('...').data('timeSlider') — например по нажатию какой-то кнопки на странице устанавливаем значение слайдера или имитируем клик на стрелке:
3. Существенная экономия памяти при большом количестве сложных плагинов на странице — у нас все методы слайдера прописаны в прототипе и не копируются в памяти с каждой новой копией слайдера.
Поясню на вашем примере:
// 1 -----------------------------------------------------
$.extend($.fn, {
timeSlider: function(options){
return this.each(function(){
var $this = $(this);
// если к этому элементу уже применен timeSlider плагин, апдейтим опции и перерисовываем его
if($this.data('timeSlider')){
var timeSlider = $this.data('timeSlider');
$.extend(true, popup.timeSlider, options);
// перерисовка
timeSlider.render();
}else $this.data('timeSlider', new TimeSlider(this, options));
});
}
});
// 2 -----------------------------------------------------
TimeSlider = function(elem, options){
this.elem = $(elem);
// совмещаем дефолтные опции с пришедшими извне
this.settings = $.extend(true, {
//... default options ...
}, options);
// далее генерируем DOM вашего слайдера, не забывая про this
this.container = $('<div class="timeslider-container" unselectable="on"></div>');
this.downArrow = $('<div class="timeslider-arrow timeslider-down-arrow" unselectable="on"></div>');
this.upArrow = $('<div class="timeslider-arrow timeslider-up-arrow" unselectable="on"></div>');
........
this.render();
};
// 3 -----------------------------------------------------
// все методы слайдера выносим в прототип
$.extend(TimeSlider.prototype, {
updateSlider: function(){...}
updateInput: function(){...}
updateArrows: function(){...}
pleaseSet: function(){...}
render: function(){...}
});Любой jQuery плагин можно разделить на такие 3 части, в итоге мы имеем:
1. Возможность менять опции у уже созданных слайдеров и рендерить их с учетом новых опций
2. Доступ к свойствам и методам каждого отдельного слайдера извне через $('...').data('timeSlider') — например по нажатию какой-то кнопки на странице устанавливаем значение слайдера или имитируем клик на стрелке:
$('#someButton').click(function(){
$('#slider1').data('timeSlider').downArrow.click();
});3. Существенная экономия памяти при большом количестве сложных плагинов на странице — у нас все методы слайдера прописаны в прототипе и не копируются в памяти с каждой новой копией слайдера.
Ваш подход более красив.
С другой стороны, при создании органов управления особо экономить на переносе методов в прототип невыгодно.
Да, небольшая мелочь: у Вас API по умолчанию односторонний, у меня же возвращаются значения.
В общем, мне ваш подход нравится. Надо попробовать переделать :)
С другой стороны, при создании органов управления особо экономить на переносе методов в прототип невыгодно.
Да, небольшая мелочь: у Вас API по умолчанию односторонний, у меня же возвращаются значения.
В общем, мне ваш подход нравится. Надо попробовать переделать :)
Преобразовал этот плагин, чтобы он стал чуть ближе по структуре к предложенному вами шаблону.
Пока он завязан, как и раньше, на замыкания (я предпочитаю такой стиль), но теперь его можно дописывать и в более классическом стиле :)
Пока он завязан, как и раньше, на замыкания (я предпочитаю такой стиль), но теперь его можно дописывать и в более классическом стиле :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Пишем свой плагин для jQuery