
![]() |
Здравствуйте Гость ( Вход | Регистрация ) |
|
|
|
![]() ![]() ![]() |
![]() |
۩
Дата
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 12174 Пользователь №: 23195 На форуме: Карма: 441 Трезвый : 15 лет, 6 месяцев, 25 дней ![]() |
Как известно, стилизация стандартных управляющих элементов браузеров - головная боль многих frontend-разработчиков. Многим из вас, наверное, приходилось реализовывать нестандартные checkbox'ы, select'ы и прочие
Разработчики браузеров не хотят внедрять вменяемую поддержку стилизации/кастомизации через css, ссылаясь на консистентность графического интерфейса. Однако, это идёт вразрез с воспаленными фантазиями web-дизайнеров, которые порой рисуют такое, что хочется И тут к нам на помощь приходит javascript. На сегодняшний день существует масса скриптов и плагинов, которые позволяют буквально в несколько строк изменить внешний вид элемента и при этом сохранить его функциональность (а иногда даже улучшить). Качество и размер этих скриптов варьируются в очень широких пределах, попадается как откровенный говнокод, так и шедевры, в которые вложены сотни и тысячи человекочасов. 3 года назад мне понадобилось реализовать нестандартную полосу прокрутки и я привычно пошёл гуглить. Однако, спустя несколько дней поисков и проверок, я пришёл к выводу, что для этого дела нет ничего качественного, были сырые недоделки с багами, отсутствовала какая-либо нужная мне функциональность или они весили слишком много. В общем, я решил написать свой скрипт с преферансом и танцовщицами. А так как я активно работал с jquery, то оформить я его решил в виде плагина к ней. Ладно, заканчиваю графоманствовать и перехожу к сути. Плагин: https://github.com/Invis1ble/scrollbox Демо: https://invis1ble.github.io/scrollbox/ Поддержка: IE7+, Opera (старая и новая), Chrome, Safari, Firefox, Chrome for Android и др. Лицензия MIT. Внешний вид полностью настраивается через стили. Есть API. В планах на отдаленное будущее: добавить поддержку клавиатуры Это сообщение отредактировал Invis1ble - 1.06.2016 - 17:41 -------------------- |
![]() |
|
![]() ![]() Сидел он, дум великих полон - и вдаль глядел ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 15860 Пользователь №: 4190 На форуме: Карма: 490 ![]() |
Invis1ble, посмотрел, штука интересная. И на колесо мыши реагирует, и на "потягивание" ползунка. Но вот на что я сразу лично обратил внимание, что у скролл-бара нету кнопочек "вверх-вниз"
![]() ![]() -------------------- * Хэлп по PHP
* Описалово по JavaScript * Хэлп и СУБД для PostgreSQL * Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги. * "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С) ![]() |
![]() |
۩
Дата
|
||
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 12174 Пользователь №: 23195 На форуме: Карма: 441 Трезвый : 15 лет, 6 месяцев, 25 дней ![]() |
это в планах на реализацию, даже раньше, чем на поддержку клавиатуры ![]() -------------------- |
||
![]() |
|||
![]() Здесь живет ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Форумчанин ![]() Сообщений: 6460 Пользователь №: 35718 На форуме: Карма: 208 ![]() |
не сглазь ![]() -------------------- |
||
![]() |
|
![]() ![]() Новичок ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Форумчанин ![]() Сообщений: 1123 Пользователь №: 37872 На форуме: Карма: 43 ![]() |
Есть еще вот такая штука -jquery.jscrollpane.min.js, в принципе работает, только глючит иногда при формировании на лету (JavaScript), при изначальном формировании (HTML) работает нормально. Обязательно попробую Вашу, может с ней не будет таких проблем.
Запускается вот так:
-------------------- |
![]() |
۩
Дата
|
||
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 12174 Пользователь №: 23195 На форуме: Карма: 441 Трезвый : 15 лет, 6 месяцев, 25 дней ![]() |
Не совсем понял, о чём ты, но у меня подобных проблем не обнаруживалось с моим плагином. Попробуй, если найдёшь проблемы - пиши, исправлю. -------------------- |
||
![]() |
۩
Дата
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 12174 Пользователь №: 23195 На форуме: Карма: 441 Трезвый : 15 лет, 6 месяцев, 25 дней ![]() |
Зарелизил новую версию:
- перевёл исходники с css на less - добавил скрипт сборки для Grunt - отрефакторил js-код, переложил задачу биндинга и нормализации события wheel (прокрутка колесом) со своей костыльной реализации на плагин jquery-mousewheel (2.71 KB) -------------------- |
![]() |
۩
Дата
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 12174 Пользователь №: 23195 На форуме: Карма: 441 Трезвый : 15 лет, 6 месяцев, 25 дней ![]() |
-------------------- |
![]() |
۩
Дата
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 12174 Пользователь №: 23195 На форуме: Карма: 441 Трезвый : 15 лет, 6 месяцев, 25 дней ![]() |
Добавил тесты, пофиксил кучу багов.
-------------------- |
![]() |
۩
Дата
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Профиль Группа: Эксперт ![]() Сообщений: 12174 Пользователь №: 23195 На форуме: Карма: 441 Трезвый : 15 лет, 6 месяцев, 25 дней ![]() |
Зарелизил новую мажорную версию. Основные изменения:
- добавлена возможность горизонтального скроллинга - улучшен API - исходники переведены на ES2015 - добавлены новые тесты Напоминаю, что попробовать в действии можно тут: demo -------------------- |
![]() |
![]() ![]() ![]() |