Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Scrollbox, jQuery-плагин для стилизации прокрутки
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 12174
Пользователь №: 23195
На форуме: 14 лет, 7 месяцев, 25 дней
Карма: 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. Пока что незадокументировано, надеюсь в будущем осилю составление документации с примерами. Основная проблема - грамотно перевести на английский, чтоб не было стыдно. - Done
В планах на отдаленное будущее: добавить поддержку клавиатуры и тесты. - Done
В планах на ближайшее будущее: переехать на LESS, добавить скрипт сборки для Grunt. - Done

Это сообщение отредактировал Invis1ble - 1.06.2016 - 17:41


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 15860
Пользователь №: 4190
На форуме: 17 лет, 1 месяц, 13 дней
Карма: 490




Invis1ble, посмотрел, штука интересная. И на колесо мыши реагирует, и на "потягивание" ползунка. Но вот на что я сразу лично обратил внимание, что у скролл-бара нету кнопочек "вверх-вниз" sad.gif И на клики выше-ниже ползунка никакой реакции нет. Может я старомоден smile.gif, но мне с ними удобнее.


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 12174
Пользователь №: 23195
На форуме: 14 лет, 7 месяцев, 25 дней
Карма: 441

Трезвый :
15 лет, 6 месяцев, 25 дней


Цитата (sergeiss @ 30.03.2016 - 12:24)
у скролл-бара нету кнопочек "вверх-вниз"  И на клики выше-ниже ползунка никакой реакции нет.

это в планах на реализацию, даже раньше, чем на поддержку клавиатуры smile.gif


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Valick  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 6460
Пользователь №: 35718
На форуме: 12 лет, 4 месяца
Карма: 208




Цитата (Invis1ble @ 30.03.2016 - 07:19)
Пока что незадокументировано, надеюсь в будущем осилю составление документации

не сглазь biggrin.gif


--------------------
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
arbuzmaster  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1123
Пользователь №: 37872
На форуме: 11 лет, 7 месяцев, 23 дня
Карма: 43




Есть еще вот такая штука -jquery.jscrollpane.min.js, в принципе работает, только глючит иногда при формировании на лету (JavaScript), при изначальном формировании (HTML) работает нормально. Обязательно попробую Вашу, может с ней не будет таких проблем.
Запускается вот так:

// scroll
$('.scroll-pane').jScrollPane({
showArrows: false,
verticalGutter: 10,
verticalDragMinHeight: 100,
verticalDragMaxHeight: 100
});


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 12174
Пользователь №: 23195
На форуме: 14 лет, 7 месяцев, 25 дней
Карма: 441

Трезвый :
15 лет, 6 месяцев, 25 дней


Цитата (arbuzmaster @ 30.03.2016 - 16:44)
Есть еще вот такая штука -jquery.jscrollpane.min.js, в принципе работает, только глючит иногда при формировании на лету (JavaScript), при изначальном формировании (HTML) работает нормально. Обязательно попробую Вашу, может с ней не будет таких проблем.

Не совсем понял, о чём ты, но у меня подобных проблем не обнаруживалось с моим плагином.
Попробуй, если найдёшь проблемы - пиши, исправлю.


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 12174
Пользователь №: 23195
На форуме: 14 лет, 7 месяцев, 25 дней
Карма: 441

Трезвый :
15 лет, 6 месяцев, 25 дней


Зарелизил новую версию:
- перевёл исходники с css на less
- добавил скрипт сборки для Grunt
- отрефакторил js-код, переложил задачу биндинга и нормализации события wheel (прокрутка колесом) со своей костыльной реализации на плагин jquery-mousewheel (2.71 KB)


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 12174
Пользователь №: 23195
На форуме: 14 лет, 7 месяцев, 25 дней
Карма: 441

Трезвый :
15 лет, 6 месяцев, 25 дней


Родил документацию.
Тру нэйтив-спикеры, надсмехайтесь надо мной biggrin.gif (а лучше поправьте, где я накосячил)


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 12174
Пользователь №: 23195
На форуме: 14 лет, 7 месяцев, 25 дней
Карма: 441

Трезвый :
15 лет, 6 месяцев, 25 дней


Добавил тесты, пофиксил кучу багов.


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 12174
Пользователь №: 23195
На форуме: 14 лет, 7 месяцев, 25 дней
Карма: 441

Трезвый :
15 лет, 6 месяцев, 25 дней


Зарелизил новую мажорную версию. Основные изменения:
- добавлена возможность горизонтального скроллинга
- улучшен API
- исходники переведены на ES2015
- добавлены новые тесты

Напоминаю, что попробовать в действии можно тут: demo


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса