10 jQuery скриптов для улучшения интерфейса

Original author: Mirko Humbert
  • Translation
С рассветом WEB 2.0 получили развитие и javascript фрэймворки, позволяющие вебмастеру делать динамические элементы сайта гораздо быстрее и проще. Одним из таких фреймворков является jQuery, получивший огромную популярность за свою простоту и невероятно малый вес. Итак, представляю вашему вниманию 10 наиболее полезных скриптов jQuery для улучшения интерфейса вашего сайта.

Thickbox
Описание: Нужен для обращения внимания пользователя на какой-либо текст, изображение или веб-форму через модальное окно.
Когда и где используется: Когда надо отобразить пользователю больше информации, показать увеличенное изображение, задать несколько вопросов веб-формой, либо отобразить форму входа, но при этом не хотите, чтоб пользователь покидал страницу.
Скрипт, пример, документация
Плагин к WordPress


Tabulations
Описание: Позволяет отображать содержимое страницы в табах.
Когда и где используется: Когда вы хотите освободить место на экране, предоставив быстрый доступ к скрытой информации. Часто используется в виджетах к различным премиум темам WordPress.
Скрипт, пример, документация
Плагин к WordPress


Coda slider
Описание: Создает слайдер, как на скриншоте с сайта Coda.
Когда и где используется: Как и в случае с Coda`ой, этот скрипт отлично подходит для представления продуктов или сервисов, сгруппированными по разделам. Пользователи получают возможность быстрого обзора, а также интуитивно понятную навигацию.
Скрипт, пример, документация
Тема к WordPress


Galleria
Описание: Galleria – javascript галерея, написанная в jQuery. Загружает изображения одно за другим и отображает к ним эскизы.
Когда и где используется: Чтобы показать фотографии какого-либо события или продукта, например.
Скрипт, пример, документация


jTip
Описание: Подсказки, реализованные в jQuery.
Когда и где используется: Когда требуется дать больше информации об объекте в контексте статьи или реализовать подсказки пользователю в различных веб-формах.
Скрипт, пример, документация
Плагин к WordPress


Stylesheet switcher
Описание: Позволяет посетителям на вашем сайте самостоятельно менять стили оформления «в один клик».
Когда и где используется: Когда вы хотите позволить пользователю выбирать шрифты различного размера, отображать информацию, оформленную для мобильного телефона либо для вывода на печать, позволить ему настраивать цвета. Stylesheet switcher может реально помочь повысить удобство вашего сайта.
Скрипт, пример, документация
Плагин к WordPress


jQuery Accordion menu
Описание: Позволяет создавать динамические меню.
Скрипт, пример, документация
Плагин к WordPress


Slider Gallery
Описание: Представляет продукты/изображения в виде прокручиваемой галереи.
Когда и где используется: Когда вы хотите уместить все элементы в сайдбаре, но не хватает места под все опции.
Скрипт, пример, документация


Form Validation
Описание: Проверяйте веб-формы при помощи Form Validation, чтобы избежать неверно заполненных полей.
Когда и где используется: В большинстве форм. Это помогает пользователям понять, где именно они неверно заполнили поля, подсвечивая их ошибки.
Скрипт, пример, документация


jGrowl
Описание: Выводит сообщения в браузере также, как Growl в MacOSX
Когда и где используется: Если вы сообщаете пользователю о действии, но не хотите чтоб он покидал текущую страницу/обновлял ее. Это отличный способ подтвердить действия выполненные пользователем, например регистрация. Также можно использовать jGrowl в различных магазинах и т.п. для подтверждения добавления товара в корзину или подтверждения транзакции.
Скрипт, пример, документация
Share post

Comments 34

    +27
    0
    спасибо за перевод, хороша работа
    и актуально тоже
      0
      Спасибо за подборку! правда уже давно о них знаю)
        –4
        Спасибо за подборку! правда уже давно о них знаю)
          +3
          Блог о CSS, jQuery и ещё всяком другом. Здесь много пишут об этом.
            +18
            +2
            Хорошая подборка, спасибо.
            Неплохие обзоры различных плагинов есть кстати на сайте linkexchanger.su
              –2
              cпасибо за jGrowl
              уже написал свой вывод системных сообщений
              пойду менять на плагин
                +1
                лучше свой оставь
              • UFO just landed and posted this here
                  0
                  самое интересное, что каждый раз в теме «rand(1,500) скриптов/плагинов… для jquery» нахожу хотя бы один да селе не известный мне плагин
                    0
                    Script, пример, документация

                    смесь русского и английского немного глаза режет.
                      0
                      Thnx, fixed.
                      –6
                      пасипа
                        0
                        автору огромное спасибо. Особенно за Galleria. Я давно что то такое искал, правда думал что такое только на Flash реализуемо. Но синтаксис, да и вообще сама структура языка ActionScript меня сильно озадачила и отпугнула. А тут на понятном, и доступном JQuery просто супер!!!
                          –1
                          Автор респект! полезные штучки!
                            –2
                            А на Хабре, похоже, в случае ошибок тот самый Грол вылезает.
                              0
                              Нет, не «Грол» — вы посмотрите, что подключается — mootools, а jQuery не видно.
                                0
                                Я имею в виду не jGrowl, а Growl в более общем смысле, как интерфейсное решение.
                                Кстати, хотел почитать про него подробнее на growl.info, а там всё запрещено (403).
                                  0
                                  а вы в гугл кеш посмотрите ))
                              –1
                              спасибо.
                                +3
                                Thickbox — отстой ещё тот. Пришлось напильником обрабатывать, чтобы нормально заработал, в некоторых случаях. Тоесть, лезть в код, что крайне не желательно. Не говоря о том, что обновлялся последний раз бог знает когда. Но и он меня устраивал, пока не нашел другую библиотеку.

                                Предлагаю NyroModal — более продвинутую и надёжную, хотя, не на столько же простую в используовании, библиотеку lightbox'а.
                                И эта библиотека не без греха, но по крайней мере удалось всё, что нужно сделать не модифицируя код, а только конфигами и настройками CSS, и автор её развивает…
                                  0
                                  Автор статьи молодец спасибо! Реально много нового и интересного узнал!
                                    0
                                    Напиши о том, как бороться проблемой «Вперед — назад» пр использовании jQueryень благодарен
                                        0
                                        37, 45, 10 супер-мега клёвых скриптов! ой ой йой йой! сколько много! Блин. Надоело. Почему бы не взять и не покапать весь jQuery туториал чтобы увидеть всё что можно на нём делать? Беда прям какая-то…
                                          0
                                          Большое спасибо! Единственное чего у меня в коллекции не было это jGrowl — отличный плагин!
                                            0
                                            Спасибо за гровл!
                                              0
                                              Автору спасибо! Очень полезные дополнения. В частности, очень понравилась галерея.

                                              Only users with full accounts can post comments. Log in, please.