[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: jquery-плагин для стилизации прокрутки
Страницы: 1, 2, 3, 4
Invis1ble
Всем привет.
Возникла задача организовать вывод контента без классической пагинации - подгружать при прокрутке ajax'ом + реализация и стилизация фейкового скролла.
Перепробовав несколько готовых плагинов, понял, что в большинстве отсутствует одна простая и в то же время необходимая мне фича - вызов коллбэка при достижении скроллом определенной точки. В тех же плагинах, где была реализована эта часть были другие минусы - либо они тянули кучу мертвого кода (например jQuery UI ~300КБ (!!) ради одного лишь dnd), либо безбожно глючили в определенных браузерах (например в Opera), но в основном и то и другое...
Короче поковырявшись пару дней я понял, что проще написать мне свой.
Итак, когда думаю цель плагина ясна - прошу оценить его работу, а также (если не очень лень smile.gif) сделать code review - возможно у вас возникнут полезные замечания по оптимизации либо исправлению потенциальных багов. Особая просьба протестить в старых браузерах вроде ie7, 8, старый FF и т.п., если есть такая возможность.
Впоследствии код будет выложен на github под лицензией MIT во имя общего блага и счастья smile.gif

Спасибо smile.gif

PS. Если есть вопросы по API - пишите smile.gif

UPDATE
исходники на github: https://github.com/Invis1ble/scrollbox

UPDATE от 28.03.2016
добавлена поддержка устройств с тачскрином
актуальное на текущий момент демо тут: https://invis1ble.github.io/scrollbox ( http://bit.ly/1oglsk2 )

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

johniek_comp
Invis1ble
и где ajax?

_____________
user posted image
Invis1ble
johniek_comp
аякса нет, он в демо не нужен smile.gif вместо аякс-запроса и получения данных с сервера идет простое добавление тестовых дивов по setTimeout() при событии reach.scrollbox

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Oyeme
Выложи на github позже протестирую deeply wink.gif
Сама реализация мне нравиться, cool.gif

Invis1ble
Oyeme
ок, ночью выложу, щас спать... со вчера кодил smile.gif

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

johniek_comp
Invis1ble
а если в диве всего то пару предложений будет?

_____________
user posted image
Dezigo
Довольно приятный стиль Вашего кода.
Мне нравиться. smile.gif
Invis1ble
Выложил на гитхаб
https://github.com/Invis1ble/scrollbox

johniek_comp
Цитата
а если в диве всего то пару предложений будет?

то все будет ок smile.gif если контент целиком помещается в контейнер - полоса прокрутки не появится. Я ведь не зря выложил на jsfiddle, а чтобы можно было поэксперементировать wink.gif
вот тут случай, когда контента мало:
http://jsfiddle.net/yq2Cn/1/
http://jsfiddle.net/yq2Cn/1/embedded/result/

Dezigo
Спасибо rolleyes.gif

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

johniek_comp
Invis1ble
но дивы не появляются, а я хочу их видеть...

_____________
user posted image
Invis1ble
johniek_comp
Цитата
но дивы не появляются, а я хочу их видеть...

так добавь из кода их, в чем проблема-то? biggrin.gif
или я не понял тебя...



Спустя 4 минуты, 24 секунды Invis1ble написал(а):
Еще раз: задача плагина заключается не в добавлении контента, а в предоставлении возможности стороннему коду ловить событие, когда юзер прокрутил до определенной точки. Сторонний код сам решает, как ему реагировать на это событие.

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

johniek_comp
Invis1ble
контент маленький, скролл не нужен, и должны загрузится дивы, так получается что я не увижу инфу никогда

_____________
user posted image
Invis1ble
johniek_comp
Представь ситуацию:
1. юзер заходит в личные сообщения
2. сообщений очень много, выводятся только последние 15, причем высота блока, в который выводятся сообщения меньше, чем общая высота 15 сообщений
3. появляется скролл
4. юзер скроллит вниз, при достижении скажем 100px от низа блока тригеррится событие
5. код ловит событие и делает ajax-запрос
6. после загрузки доп. данных с сервера вставляются более старые сообщения в блок (тестовые дивы в демо)
7. код вызывает scrollbox('update') для перерасчета высоты и позиции полосы прокрутки *
8. PROFIT!

---------
* - эту часть можно реализовать более грамотно (и удобно с точки зрения стороннего кода), например ловить в плагине dommutation-события браузера. Но я не стал реализовывать таким образом в угоду старых браузеров, которые не триггерят такие события.

PS. Т.е. если сообщения полностью помещаются в контейнер по высоте, то очевидно, что и подгружать с сервера нечего smile.gif

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

johniek_comp
Invis1ble
ну если с базы дергать только 15 последних, и заведомо делать их больше по размеру чем высота блока (что бы появился скролл) тогда да - красава!

_____________
user posted image
Invis1ble
Цитата
ну если с базы дергать только 15 последних, и заведомо делать их больше по размеру чем высота блока (что бы появился скролл)

именно

Как будет свободное время, нужно будет составить более-менее вменяемое README, описывающее все нюансы и апи и закоммитить. Проблемка в том, что с английским у меня туговато... (

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Invis1ble
Ну что, фронтэндщики? Неужели никто не раскритикует код? huh.gif

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.