Looking for some free JS plugins with incredible effects? We found exactly what you need. These 20 free JS plugins are truly unique and most of all they’re free to use! Save time with these great free JS plugins.

Font-To-Width is a script that takes advantage of large type families to fit pieces of text snugly within their containers. Unlike other text-fitting tools like FitText.js ,this one does not scale the font-size, instead it chooses a width or weight variant according to what fits best, and then allows for letter- and word-spacing adjustments as needed.

jQuery Tip Cards

jQuery Tip Cards is a plugin for creating a card layout that let your user flip through it like you see on Google Tips .

Adaptive Background is a jQuery plugin for extracting dominant colors from images and applying it to its parent.


This is an interesting snippet for creating a nice flippin’ 3D countdown animation with CSS and Javascript.


Scattered Polaroids

Here’s a flat-style Polaroid gallery effect where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides.

This is a tutorial for creating a “look inside” effect for book previews created with the BookBlock script. It shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

scrollReveal.js is a javascript plugin for creating nice animations and maintain how elements fade in, triggered when they enter the viewport.


ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one.


Offline.js is a library to automatically alert your users when they’ve lost internet connectivity. It captures AJAX requests which were made while the connection was down, and remakes them when it’s back up, so your app reacts perfectly. It has a number of beautiful themes and requires no configuration.


At.js is a github-like textarea autocomplete library supporting ContentEditable mode too. It depends on Caret.js.


fullPage.js is a jQuery plugin for creating stunning fullscreen scrolling websites as if they were slides. You can move vertically and horizontally inside the pages clicking on the icons or using the arrows of your keyboard.


FlowType.js is a javascript plugin for automatically adjust font-size and line-height in relation to an element width.


Vex is a modern dialog library which is highly configurable, easily customizable, and gets out of the way. This has a clear and simple API, works on mobile devices, and can be customised to match your style in seconds.


Here is an awesome jQuery plugin for creating an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.


BackgroundCheck is a javascript plugin for automatically switching to a darker or a lighter version of an element depending on the brightness of images behind it.


Parallax.js

Parallax.js is a small, simple JavaScript library that reacts to the orientation of a smart device, offsetting layers depending on their depth within a scene.

Favico.js – Animated badges for favicons

Favico.js is a plugin for animating your favicon with badges. You can customize type of animation, background color and text colour.

This is an iTunes-style coverflow made with CSS3 and some lines of Javascript.

Here is a wonderful “jelly” scroll effect for websites and apps made with Javascript.

This free snippet is a cool and simple parallax effect made with some lines of CSS and jQuery.


10 лет назад, когда jQuery только зарождалась, браузерная экосистема была очень разношерстной и каждый из существовавших тогда продуктов по своему боролся со сложностью управления DOM-элементами. Амбициозной задачей, которую поставили перед собой разработчики jQuery, была разработка универсального подхода к решению этих проблем и создание API, который бы одинаково хорошо работал в любой ситуации.

Насколько им это удалось судить вам, но спустя 10 лет своего существования, jQuery остается одной из самых популярных библиотек JavaScript.

Сам JavaScript сейчас совершенно зрелый продукт, хорошо документированный и поддерживаемый всеми современными браузерами. Современное браузерное сообщество тоже более консолидировано и, в большинстве случаев, можно быть уверенным, что если, скажем, страница корректно отображается в Crome, то так же она будет выглядеть и в Firefox. querySelectors тоже поддерживаются практически всеми современными браузерами.

Казалось бы, история развития jQuery движется к закату - зачем перегружать страницы и тратить лишние циклы процессора, если большинство задач можно решить стандартными средствами языка? С другой стороны, за такой долгий для компьютерной индустрии период разработано огромное количество решений, которые можно просто взять и использовать, здесь и сейчас.

Я думаю, этот выбор должен делать сам разработчик в каждой конкретной ситуации ориентируясь не на моду и тенденции, а на здравый смысл и перспективы развития своего творения.

В этом обзоре я собрал все известные мне бесплатные плагины jQuery , которые сейчас активно развиваются или которые хотя бы раз обновлялись за прошедший год. Некоторые из них я активно применял и применяю в своей практике, некоторые я знаю только поверхностно, но они впечатлили меня своими возможностями. Среди них есть исключительно неординарные, выполненные с большой фантазией. И даже если вы не найдете способ использовать их в своих проектах, быть может они вдохновят вас на создание своих собственных, еще более невероятных решений.

multiscroll.jsИнтересное решение привлечь внимание посетителя - скроллинг страницы выполнен в виде двух панелей, одна из которых скользит вверх, а вторая вниз , открывая следующий блок. Также отлично работает на всех, даже весьма устаревших браузерах.

jquery.email-autocomplete.jsЭлектронные адреса приходится вводить очень часто и, несмотря на то, что это всего лишь полтора десятка символов, часто возникает желание ускорить этот процесс. jquery.email-autocomplete.js имеет собственный список доменов популярных почтовых сервисов на основании которого он предлагает автодополнение адреса. Пользователь может принять эту подсказку, нажав клавишу Tab или стрелку вправо, или же продолжить вводить дальше вручную. Плагин хорошо работает и в мобильных версиях сайта. Однако, придется немного допилить плагин, чтобы он начал работать с отечественными почтовыми сервисами.


tinyDatePickerВ 5 кБ этого плагина втиснуты немаленькие возможности. Календари, планировщики, бронирование товаров и услуг - далеко не полный перечень, где можно использовать tinyDatePicker. Быстрый, легкий, масштабируемый - его можно легко интегрировать в Bootstrap или любой другой фреймворк.


ReadRemaining.jsМногим из нас всегда катастрофически не хватает времени. Я всегда завидовал людям, которые умеют правильно им распоряжаться. Наверное, к таким относится автор плагина ReadRemaining.js. Кому же еще могла прийти в голову мысль вывести рядом с текстом информацию о том, сколько времени вам понадобится, чтобы прочитать его . И по мере прокрутки текста пересчитывать это время, основываясь на скорости чтения конкретного пользователя.

Весьма оригинальный плагин который, я думаю, понравится посетителям, если у вас много длинного текстового материала.

TooltipsterКлассическая всплывающая подсказка (tooltip) с большим набором функций и опций. Сам элемент может располагаться где угодно по отношению к родительскому элементу и содержать какие угодно элементы. Главное, не переборщить с его применением, используйте его только там где это действительно необходимо.

AddelНесмотря на созвучное название, этот плагин не имеет никакого отношения к певице Адель. Его название происходит от английских слов ADd-DELete (добавить и удалить) и отражает его назначение - динамически добавлять или скрывать HTML-элементы , в первую очередь элементы форм. Управление гибкое и интуитивно понятное.

Chart.jsАктивно развивающийся плагин, позволяющий выводить различные типы диаграмм (всего 8 типов, в том числе смешанные). Отлично работает на всех современных браузерах и имеет плавную и симпатичную анимацию при изменении данных.


jQuery Flip-QuoteОчень интересный плагин, который делает две вещи. Во-первых, вращает блоки цитат , присутствующие на странице, в тот момент когда блок становится видимым (отлично привлекает внимание). Во-вторых, при нажатии на этот блок происходит подсветка цитаты в тексте , что позволяет быстро найти ее в общем потоке материала. Оказывается, цитаты тоже можно сделать занимательными!

Algolia PlacesБыстрый поиск с автодополнением почтовых адресов, городов, маршрутов и всего, что связано с локациями по всему миру благодаря интеграции с базой данных OpenStreetMap. Очень полезный плагин для интернет-магазинов.

HideSeekПростой, но функциональный плагин «живого» поиска . Умеет производить поиск, основываясь на различных критериях, выполнять определенные действия после нахождения искомых данных и многое другое.

TimedropperСуществует огромное количество удобных решений для ввода определенного момента времени. Однако Timedropper выделяется среди них простотой и легким управлением. Изменение часов и минут при помощи этого забавного язычка действительно удобно. Он имеет несколько параметров настройки, таких как: формат времени (12 или 24-часовой) , цвет циферблата, теста, фона, а также возможность изменять показания часов и минут при помощи колесика мыши. Кстати, имеется аналогичный плагин для задания даты.

LoryСлайдер , написанный на чистом JavaScript. Минималистический, но поддерживающий управление жестами, задание фиксированного элемента, отображение управляющих элементов-кнопок и одновременное отображение нескольких изображений, в том числе разной ширины.

CurrencyFormatter.jsОчень простенький и маленький скрипт, выполняющий отображение числовых значений в денежном формате . Добавляет точки, пробелы для разделения разрядов и символ валюты. Поддерживает 155 валют мира.

Shave.jsJavascript , который аккуратно обрежет текст , не помещающийся в контейнер заданной высоты. Занимает всего 1,5 кБ и не требует сторонних библиотек.

jQuery LinechartБиблиотека для построения диаграмм различных видов и довольно большим количеством исходных данных. Написан на HTML/CSS/JS , однако есть версия и на базе Angular.js

FreewallНевероятно красивый jQuery плагин для создания плиточного интерфейса в самых разных стилях: Windows Metro, Pinterest, обычном плоском или иерархическом, с перетаскиваемыми и динамически добавляемыми элементами. Отлично работает как на мобильных браузерах, так и на десктопных, включая IE8. Действительно универсальный инструмент!

rowGrid.jsКрошечный плагин, который располагает изображения или другие элементы ровными рядами одинаковой высоты , подбирая размер и зазоры между ними так, что каждый ряд идеально вписывается в ширину окна. Правда, все объекты должны быть одинаковой высоты.

SlidebarsSlidebars добавляет на страницу сайта меню или боковую панель , которые скользящим движением появляются или скрываются по нажатию курсором на управляющую кнопку. Версия 2 этого плагина была полностью переписана и теперь может содержать неограниченное количество самых разных элементов. Имеет полноценный API, возможность подключения собственных callback-функций и подписку на события.


pagePiling.jsОчень напоминает рассмотренный в данном обзоре плагин multiscroll.js, но страница не разбивается на две панели, а смещается целиком. Можно изменять направление смещения и скорость. Хороший выбор для одностраничного сайта, который будет одинаково хорошо выглядеть и на мобильный устройствах и на больших экранах.

AnimsitionОсновной целью Animsition является воплощение в одном плагине большого и разнообразного набора различных транзитивных эффектов. Среди них затухание и проявление, вращение, отражение, зуммирование и т.п. (всего 58 штук).

ZooMoveМне не нравится динамическое зуммирование изображений при наведении курсора - я нахожу этот эффект слишком раздражающим. Но если уж вы хотите его непременно использовать, то лучше взять для этой цели ZooMove. Такого гладкого и плавного масштабирования и скроллинга не даст ни один другой плагин.

RippleriaЛегковесный плагин, создающий волновой эффект (похожий на рябь на поверхности воды) на любом DOM-элементе: кнопке, элементе DIV, картинке. Очень легко настраивается и управляется.

FlickityБыстрый, адаптивный и управляемый жестами слайдер . Внешне - довольно обычный, но с невероятно тщательно написанной и структурированной документацией. Полноценный, и продуманный API.


UnsliderОчень маленький и простой слайдер , имеющий несколько параметров, позволяющих разнообразить его поведение: различные направления движения (горизонтальное и вертикальное), циклическая (бесконечная) прокрутка, автозапуск.

Lightcase.jsВыдающийся lightbox с CSS3 анимацией . Работает с DIV, изображениями, текстом, flash-объектами, video и iframe. Пока не поддерживает jQuery 3, но разработчики обещают исправить это в ближайших релизах.


PhotoSwipeЗамечательная галерея изображений с управлением как клавиатурой на дестопных браузерах, так и жестами на мобильных. Имеется возможность установить задержку загрузки фотографий, пока полностью не загрузится сама страница. И все это удовольствие имеет размер всего 14 кБ.


StripStrip - это lightbox, который занимает некоторую область страницы, оставляя саму страницу не только частично видимой, но и доступной для взаимодействия с ней. Кроме того может одновременно работать и как слайдер. К тому же, наряду с изображениями, поддерживает и видеоконтент с Youtube и Vimeo .

Turntable.jsНевероятно эффектный подход к демонстрации продукта, особенно если это физический объект. Фактически, плагин очень простой и всего лишь демонстрирует набор изображений. Однако благодаря возможности управлять процессом при помощи колеса мыши или жестов на экране при условии, что набор представляет собой изображения одного объекта, снятого с разных углов зрения у зрителя возникает полная иллюзия его вращения.

Vide.jsПожалуй, самый простой способ добавить фоновое видео на страницу сайта - это воспользоваться плагином Vide.js. Он работает на всех современных браузерах, начиная с IE9+. На iOS и Android, которые не всегда воспроизводят фоновое видео, будет показан стоп-кадр.


TrianglifyЕсли вы не хотите нагружать страницу фоновым видео, а статическое изображение кажется банальным, попробуйте триангулярность ! Это уникальные геометрические треугольные узоры , которые придадут некую индивидуальность вашему дизайну. Плагин позволяет менять цвет, размер ячеек и дисперсию. Вы даже сможете написать собственную реализацию алгоритма и использовать его в Trianglify.

LazeeMenuЕсли у вас на сайте большое иерархическое меню, которое вы хотите сохранить простым и понятным то LazeeMenu несомненно пригодится вам. Он преобразует вложенные ненумерованные списки в удобное выпадающее меню .

Web-tickerБегущая строка , похожая на те, которые часто можно увидеть на экране телевизора в выпусках новостей - последние события, биржевые котировки, погода… Да мало ли, что там можно разместить! Так, что если вам нравится такой способ подачи информации - возьмите Web-ticker на заметку.

InputmaskUser experience в действии. Вы помните те времена, когда приходилось заново вводить в форму данные из-за ошибки. Причем ошибка обнаруживалась только после ответа сервера. Забудьте об этом! Inputmask не просто контролирует и отображает визуально правильность вводимых данных , он еще и препятствует введению неправильных. Попробуйте, например, ввести 13-й месяц в поле даты. Маски могут быть самые разные - даты, телефоны, e-mail и даже регулярные выражения .

Индивидуальный или компилированный

Если вы загрузили последнюю версию Bootstrap, оба файла bootstrap.js и bootstrap.min.js содержат все плагины, перечисленные на странице.

Атрибуты данных

Вы можете использовать исключительно все плагины Bootstrap с использованием разметки API, не написав ни одной строки JavaScript. API — это первый класс Bootstrap, он должен быть вашим первым решением при выборе плагина.

Это говорит о том, что в некоторых ситуациях желательно выключить полную функциональность. По этой причине мы также предоставляем возможность отключить атрибут данных API путем отсоединения всех событий`’data-api’`. Это выглядит подобным образом:

  • $ (‘body’ ). off (‘.data-api’ )

    • Кроме того, чтобы выбрать специальный плагин, просто поместите название плагина в поле ввода имён вместе с названием data-api, как показано в примере:

  • $ (‘body’ ). off (‘.alert.data-api’ )
    • Программный API

    Мы также уверены в том, что вам следует использовать абсолютно все плагины Bootstrap, применяя JavaScript API. Все доступные API — это единичные методы, образующие цепочку, они выполняют целые серии действий.

  • $ («.btn.danger» ). button («toggle» ). addClass («fat» )

    • Все методы должны принимать дополнительный объект опций, строку, которая нацелена на конкретный метод, или ничего (что включает в себя плагин с функциями по умолчанию):

  • $ («#myModal» ). modal () // инициализированный по умолчанию
  • $ («#myModal» ). modal ({ keyboard : false }) // инициализированный без клавиатуры
  • $ («#myModal» ). modal (‘show’ ) // инициализированный, и немедленно запускает показ

    • В каждом плагине можно увидеть конструктор необработанных данных. Это вы найдете в свойствах конструктора. $.fn.popover.Constructor . Если вы хотите вызвать какой-либо определенный плагин, извлеките его прямо из элемента: $("").data("popover") .

    События

    Bootstrap использует обыкновенные события для большинства уникальных действий плагинов. В большинстве случаев, они встречаются в форме инфинитива и в форме причастия прошедшего времени — началом события вызывается инфинитив (ex. show) , а его форма прошедшего времени (ex. shown) вызывается завершением действия.

    Все инфинитивные события предотвращают использование функций по умолчанию. Это обеспечивает возможность остановить выполнение действия перед тем, как оно начнется.

  • $ (‘#myModal’ ). on (‘show’ , функция (e ) {
  • if (! данные ) return e . Отменить функции по умолчанию () // Отменить показ
    • Переходы bootstrap-transition.js О переходах

    Для простого эффекта перехода добавьте элемент bootstrap-transition.js к другим файлам JS. Если вы используете компилированный минимизированный элемент bootstrap.js, нет нужды добавлять этот элемент — он уже есть.

    Варианты использования

    Немного примеров плагина перехода:

    • Скольжение или затенение модальных элементов
    • Затенение вкладок
    • Затенение сообщений
    • Скольжение элементов «Карусели»
    Модальные элементы bootstrap-modal.js Примеры

    Модальные элементы — это хорошо налаженные, но гибкие, с окнами подсказок, с минимальными функциональными требованиями и толковыми настройками по умолчанию.

    Статичный пример

    Модальный элемент отображается с заголовком, телом, и набором действий в нижнем колонтитуле.

  • ×
  • Заголовок модального элемента

  • Некое изящное тело……

  • Закрыть
  • Сохранить изменения
    • Демонстрация

    Переключите модальный элемент JavaScript нажатием кнопки внизу. Элемент соскользнет вниз и появится поверх затененной страницы.

    Заголовки модальных элементов Текст в модальном элементе

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

    Информационный блок Статические блоки

    Доступны четыре опции: top, right, bottom, and left aligned.

    Popover top Popover right

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover bottom

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover left

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Нет разметки, поскольку информационные блоки (popovers) сгенерированы посредством JavaScript и содержимым в атрибуте data .

    Демонстрация Использование

    Разрешение использования информационных блоков (popovers) посредством JavaScript:

  • $ (‘#example’ ). popover (options )
    • Опции

    Опции могут быть заданы через data-атрибуты или JavaScript. Для data-атрибутов прибавьте название опции к data- , как и к data-animation="" .

    Название тип по умолчанию описание
    animation boolean true Затеняет информационные блоки с помощью CSS
    html boolean true Вставляет html в информационные блоки. В значении false, метод jquery text будет использоваться для вставки содержимого в dom. Используйте текст, чтобы не волноваться об атаках XSS.
    placement string|function ‘right’ Позиционирование информационного блока — top | bottom | left | right
    selector string false Если имеется селектор, объекты popover (информационные блоки) будут направлены на соответствующие цели.
    trigger string ‘click’ Задает тип события при котором происходит показ/скрытие информационного блока — click | hover | focus | manual
    title string | function » Значение информационного блока по умолчанию если тег `title` не указан
    content string | function » Значение информационного блока по умолчанию если атрибут `data-content` не указан
    delay number | object 0 Задержка перед показом/скрытием информационного блока в миллисекундах (ms) — не применяется для trigger с типом manual

    Если задано число, то задержка применяется в обоих случаях — для показа и для скрытия.

    Структура объекта: delay: { show: 500, hide: 100 }

    Внимание!
    Опции для нестандартных подсказок могут быть заданы через data-атрибуты.

    Разметка

    В указании параметров участвуют data-api всплывающих подсказок (Tooltip) и информационных блоков (Popover). Если вы хотите их использовать, просто укажите опцию селектора.

    Методы $().popover(options)

    Добавляет всплывающие контент к элементам.

    .popover(‘show’)

    Запускает показ всплывающего контента.

  • $ (‘#element’ ). popover (‘show’ )
    • .popover(‘hide’)

    Скрывает элемент с всплывающим контентом.

  • $ (‘#element’ ). popover (‘hide’ )
    • .popover(‘toggle’)

    Переключает показ/скрытие всплывающего контента.

  • $ (‘#element’ ). popover (‘toggle’ )
    • .popover(‘destroy’)

    Скрывает и разрушает элемент всплывающего контента.

  • $ (‘#element’ ). popover (‘destroy’ )
    • Сообщения bootstrap-alert.js Примеры сообщений

    Плагин сообщений добавляет сообщению функцию скрытия.

    x
    Ёлы-палы! Посмотри-ка на себя, ты не очень хорошо выглядишь.

    Какой ужас! У вас ошибка!

    Измените данные и попробуйте ввести их снова. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    Использование

    Добавьте скрытие сообщений посредством JavaScript:

  • $ («.alert» ). alert ()
    • Разметка

    Просто добавьте data-dismiss="alert" в вашу закрывающую кнопку чтобы автоматически задать ей функцию закрытия сообщения..

  • ×
    • Методы $().alert()

    Добавляет функционал скрипта ко всем сообщениям на странице. Для анимации ваших сообщений добавьте к ним классы.fade и.in .

    .alert(‘close’)

    Закрывает сообщение.

  • $ («.alert» ). alert (‘close’ )
    • События

    Класс сообщений Bootstrap имеет несколько событий при закрытии сообщения.

  • $ (‘#my-alert’ ). bind (‘closed’ , function () {
  • // Сделайте что-нибудь…
    • Кнопки bootstrap-button.js Примеры использования

    Расширьте функционал кнопок. Контролируйте состояние кнопок или создавайте группы кнопок..

    Состояние

    Состояние загрузки

  • Состояние загрузки
    • Переключатель

    Добавьте переключатель=»button» для активизации переключения в отдельной кнопке.

    Отдельный переключатель

  • Отдельный переключатель
    • Флажок (чек-бокс)

    Добавьте=»buttons-checkbox» для указания стиля чек-бокса..

    Слева Посредине Справа

  • Слева
  • Посредине
  • Справа
    • Радио

    Добавьте «buttons-radio» для указания радио-стиля.

    Слева Посредине Справа

  • Слева
  • Посредине
  • Справа
    • Использование

    Активируйте кнопки посредством JavaScript:

  • $ (‘.nav-tabs’ ). кнопка ()
    • Разметка

    Data-атрибуты объединены с плагином кнопок. Изучите пример ниже с несколькими вариантами..

    Опции Методы $().button(‘toggle’)

    Активирует нажатое состояние. Придает кнопке внешний вид активированной кнопки.

    Внимание
    Вы также можете установить переключение кнопки, используя атрибут data-toggle .

  • …
    • $().button(‘loading’)

    Переводит кнопку в состояние загрузки — делает кнопку недоступной и изменяет текст на загрузочный текст. Текст отображаемый при нажатии кнопки должен быть в атрибуте data-loading-text у элемента button.

  • …

    • Внимание!
    Firefox сохраняет недоступное состояние кнопки после выполнения скрипта. Для решения проблемы используйте autocomplete="off" .

    $().button(‘reset’)

    Возвращает кнопкам исходное состояние — заменяет текст на оргинальный.

    $().button(string)

    Возвращает кнопкам исходное состояние — заменяет текст на любое заданное значение.

  • …
  • $ (‘.btn’ ). button (‘complete’ )
    • Сворачивание bootstrap-collapse.js Подробно

    Основные стили и гибкая поддержка сворачиваемых компонентов, таких, как навигация или «гармошка».

    * Требуется плагин Transitions.

    Пример «гармошки»

    Используя плагин collapse, мы создали простой пример в виде «гармошки» из группы горизонтальных вкладок::

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

  • Collapsible Group Item #1
  • Anim pariatur cliche…
  • Collapsible Group Item #2
  • Anim pariatur cliche…

    • Вы также можете использовать плагин без разметки «гармошки». Создайте кнопку-переключателя для расширения или сворачивания другого элемента.

  • simple collapsible
  • …
    • Использование Посредством data-атрибутов

    Просто добавьте data-toggle="collapse" и data-target к элементу для автоматической активации плагина. Атрибут data-target в качестве значения принимает css-селектор. Не забудьте добавить класс collapse к сворачиваемым элементам. Для создания по умолчанию раскрытого элемента добавьте дополнительный класс in .

    Для управления группой элементов как в примере выше, добавьте атрибут с селектором родительского элемента data-parent="#selector" . Вернитесь к примеру выше для рассмотрении в действии.

    Посредством JavaScript

    Активируйте самостоятельно:

  • $ («.collapse» ). collapse ()
    • Опции

    Опции могут быть заданы с помощью data-атрибутов или JavaScript. Для дата-атрибутов добавьте название опции к data- , как и к data-parent="" .

    Методы .collapse(options)

    Активирует содержимое как сворачиваемый элемент. Принимает дополнительные опции в виде object .

  • $ (‘#myCollapsible’ ). collapse ({
  • toggle : false
    • .collapse(‘toggle’)

    Переключает показ/скрытие элемента.

    .collapse(‘show’)

    Показывает (раскрывает) все элементы.

    .collapse(‘hide’)

    Скрывает все элементы.

    События

    Класс collapse от Bootstrap имеет ряд доступных событий.

    Событие Описание …
  • …
  • ‹
  • ›

    • Внимание!
    Используя данную «карусель», удалите наши изображения и вставьте ваши собственные.

    Использование Посредством data-атрибутов Посредством JavaScript

    Вызывает «карусель» вручную:

  • $ (‘.carousel’ ). carousel ()
    • Опции

    Опции могут быть заданы через data-атрибуты или JavaScript. Для data-атрибутов добавьте название опции к data- , как и к data-interval="" .

    Методы .carousel(options)

    Инициализирует «карусель» с дополнительными опциями object и начинает показ слайдов.

  • $ (‘.carousel’ ). carousel ({
  • interval : 2000
    • .carousel(‘cycle’)

    Запускает цикл слева направо.

    .carousel(‘pause’)

    Останавливает показ элементов.

    .carousel(number)

    Переход на указанный элемент (Начиная с 0, по аналогии с массивом).

    .carousel(‘prev’)

    Переход к предыдущему элементу.

    .carousel(‘next’)

    Переход к следующему элементу.

    События

    «Карусель» Bootstrap имеет два события:

    Опережающий ввод с клавиатуры bootstrap-typeahead.js Пример

    Основной плагин для быстрого создания строки поиска с опережающим вводом с клавиатуры для текста любой формы.

    • Использование Посредством data-атрибутов

    Добавьте data-атрибуты для регистрации элемента опережающего ввода с клавиатуры, как показано в примере выше.

    Посредством JavaScript

    Вызовите опцию опережающего набора с клавиатуры при помощи:

  • $ (‘.typeahead’ ). typeahead ()
    • Опции

    Опции могут быть заданы посредством data-атрибутов или JavaScript. Для data-атрибутов добавьте название опции к data- , как и к data-source="" .

    show Срабатывает немедленно при вызове метода show .
    shown Срабатывает немедленно после показа элемента и завершения сворачивания. (Для завершения ожидается переход (transitions) в css).
    hide Срабатывает немедленно при вызове метода hide .
    Название тип по умолчанию описание
    source array, function Источник с искомыми значениями. Может быть массивом или функцией. Функция задается двумя значениями, значение query в поле ввода и обратный вызов process . Функция может использоваться одновременно, возвращая исходные данные или не совпадать во времени — через единичное значение обратного вызова process .
    items number 8 Максимальное количество показываемых значений в выпадающем меню..
    minLength number 1 Минимальное количество символов, необходимое для запуска предложения автозаполнения
    matcher function case insensitive Метод используется для поиска совпадений. Принимает только одно значение — item . Доступ к текущему запросу можно получить через this.query . Возвращает true , если значение совпало.
    sorter function exact match,
    case sensitive,
    case insensitive     		Метод используется для сортировки совпадающих значений. Принимает только одно значение — items . Доступ к текущему запросу можно получить через this.query .
    highlighter function highlights all default matches Метод используется для выделения совпавших значений. Принимает только одно значение item . Возвращает html.
    Методы .typeahead(options)

    Инициализирует опережающий ввод с клавиатуры.

    Аффикс bootstrap-affix.js Пример

    Вложенная навигация слева как демонстрация плагина Аффикс.

    Использование Посредством data-атрибутов

    Чтобы легко применить аффикс к любому элементу, просто добавьте data-spy="affix" к элементу, за которым нужно следить. Затем используйте смещение, чтобы обозначить позицию элемента во включенном и выключенном режимах.

  • …

    • Внимание!
    Вы должны управлять позицией элемента и поведением его непосредственного родительского элемента. Позиция управляется посредством affix , affix-top , и affix-bottom . Обязательно проверьте потенциально сворачиваемый родительский элемент при активном аффиксе и его содержимое при нормальном протекании процесса на странице.

    Посредством JavaScript

    Вызовите плагин Аффикс посредством JavaScript:

  • $ (‘#navbar’ ). affix ()
    • Методы .affix(‘refresh’)

    Используя аффикс в конъюнкции с добавлением или удалением элементов в DOM, вы можете вызвать метод обновления:

  • $ (‘’ ). each (function () {
  • $ (this ). affix (‘refresh’ )
    • Опции

    Опции могут быть заданы посредством data-атрибутов или JavaScript. Для data-атрибутов добавьте название опции к data- , как и к data-offset-top="200" .

    Одним из важнейших факторов успешности ваших веб-сайтов является возможность пользователей взаимодействовать с вашим приложением. Возможность пользователям оставлять комментарии или оставлять отзывы – это одни из самых важных кирпичиков в фундаменте взаимосвязи с веб-приложением. Стоит также отметить возможность оценивать статьи посредством простого 5-звездочного метода, или же возможность отвечать на опросы. Ниже вы найдете подборку javascript (jQuery, Prototype, MooTools…) плагинов и обучающих статей , с помощью которых вы сможете внести интерактивных дух в ваш веб-сайт.

    Плагины javascript для внедрения рейтинговой системы

    ColorRating представляет собой (всего 5кб CSS/JS/PHP) Ajax и PHP-скрипт создания 5-звездочных рейтингов, которым не нужно базы данных или административной панели, так как скрипт поставляется со своей базой SQLite, что делает процесс внедрения не сложнее, как если бы вы просто распаковывали файлы из архива. Скрипт также очень привлекательно отображается для пользователей, у которых нет поддержки javascript.


    Плагин jQuery Rater был разработан не на основе модели подтверждения форм, которая обычно требует верстки, включающей в себя список опций. К сожалению, это означает, что такую модель рейтинга будет немного сложно поддерживать, так как для подтверждения рейтинга нужна поддержка ajax-запросов.
    Разработчик обещает, что плагин был написан ради облегчения процесса внедрения поддержки ajax-сценариев на стороне клиентов. Относительно стороны сервера все намного проще, так как верстка не меняется после того, как пользователь оставил оценку. Плагин даже поддерживает несколько пользователей, оставляющих оценки, одновременно.


    Виджет Star Rating представляет собой плагин для jQuery, с помощью которого вы можете внедрить систему звездного рейтинга, который управляется набором радио-кнопок.
    С помощью этого плагина вы сможете создать интерфейс, основанный на стандартных элементах форм, что означает то, что функционал будет работать, даже если javascript отключен.


    Starbox позволяет вам без труда создавать все типы блоков рейтинга, используя изображения в формате PNG. Starbox можно по праву считать лучшим плагином данного типа в нашей статье. Библиотека разработана в платформе для создания javascript в Prototype, и вы сможете добавить несколько дополнительных эффектов с помощью Scriptaculous.


    RabidRatings представляет собой привлекательную систему рейтингов, которая позволит вашим пользователям виртуально оценить что-нибудь на вашем сайте.
    Процесс установки очень прост – вам просто нужно указать данные соединения PHP с базой данных, и включить PHP-тэг в страницу, где вам нужен элемент рейтинга.
    Большинство виджетов рейтинга на AJAX используют целые и половинки звездочек с эффектом при наведении курсора мыши. RabidRatings использует перевернутое альфа-прозрачное PNG-изображение как фон, за счет чего достигается эффект более детального рейтинга (типа 1.23 звездочки), плюс привлекательный визуальный эффект.


    Control.Rating применяется в виде одной строки кода к любому из тэгов div, span или table, за счет чего вы сможете полностью оформить виджет с помощью CSS. Каждый пункт может опционально отправлять запрос Ajax, когда его значение выставлено на set, или же может взаимодействовать с полями ввода текста, или выбирать элементы, которые присутствуют на вашей странице. Плагин использует 4 (возможно настроить) классовых имена для определения положения каждой ссылки: rating_off, rating_half, rating_on и rating_selected.


    Звездный виджет представляет собой простой класс, который позволит вам интегрировать звездный рейтинг в формы на ваших сайтах с небольшим знанием javascript.
    Этот виджет автоматически встроит элементы звездного рейтинга в ваш HTML там, где вы разместите отрывок кода. Вы можете без труда использовать их без знаний написания кода javascript или Ajax.


    Первое, что мы хотим отметить в данном плагине – это то, что он больше не поддерживается разработчиком. Это стоит того, чтобы этот плагин занял свое место в нашей статье. Стоит также отметить, что это, наверное, лучший скрипт рейтинга, который был скачал уже более 208.000 раз. Этот непримечательный скрипт (хотя страница, все же, будет перезагружаться) был разработан на PHP и MySQL, и вы можете установить цифру максимального рейтинга (4, 5 или 10).


    Плагин GD Star Rating дает вам возможность внедрить систему рейтингов в страницы, сообщения и комментарии в Wordpress. Вы можете установить различные варианты отображения звезд рейтинга, а также добавить виджет в меню для отображения лучших рейтингов и других статистик, сгенерированных плагином.


    Этот плагин предоставляет вам легкий путь, который позволит вашим пользователям оставлять оценки везде в пределах CakePHP. Плагин предоставляет поддержку Prototype и jQuery, отлично интегрируется с AJAX, а так же будет работать во всех браузерах.

    This version of Skript is not maintained any more (since 2014).

    Please download new releases from the SkriptLang fork .

    Updated documentation for can be found .

    Skript is a plugin that allows you to customize Minecraft"s mechanics with simple scripts written in plain English sentences. You can easily create complex custom commands, triggers that execute effects under certain conditions, and scripts that just run periodically - all without having to know even the slightest bit about programming! The (hopefully) intuitive language has the advantage that you don"t even need to learn much to be able to use Skript.

    To get an idea of what is possible with Skript consider taking a look at the where users of this plugin share the scripts they have written themselves, improving their servers without the need for a plugin developer. Skript can also be used to replace smaller plugins, allowing you to shorten your likely long plugin list. An incomplete list of replaceable plugins can be found on the .

    Notice

    I"m back from my hiatus, but I will likely not be able to update Skript until I can download a recent build of CraftBukkit to fix new bugs. Also, with the future of Bukkit uncertain and no official Minecraft API in sight, I don"t know how actively I"ll update this plugin.

    Introduction

    To write a script you simply have to write down what you want Skript to do when some conditions are met. This is a simple "event → condition(s) → effect(s)" syntax, which could look like the following example:

    # This example informs the player when he mines stone on mine of stone : send "You just mined stone!" to player

    Each script can contain many so-called triggers which each start with an event and have a list of as many conditions and effects as you want. The event determines when the conditions are checked, and if all are met, the effects are executed in order. Take a look at the following example which has everything:

    # A simple lightning strike/smite/Thor"s hammer script: # the trigger has an event: on leftclick with a golden axe : # a condition: player has the permission "thor" # and some effects : strike lightning at the targeted block broadcast "Fear the mighty Thor!"

    Custom commands can be defined similarly, e.g. the following defines a powerful " /item " command that can be used like " /item 5 diamond swords of sharpness 5 and a cake ":

    Command /item : description: Spawn yourself some items permission: skript.item trigger: give argument to the player

    Furthermore Skript also features more complex script elements like loops and conditional statements, which are described in the documentation . Skript also supports variables that can persistently store information globally, per player, per block, etc., and has a wide range of expressions that you can use in conditions, effects, messages and variable names.

    A notable feature of Skript are aliases, which are names for Minecraft"s items and blocks. Each alias can consist of multiple IDs and data values and allow you to use any item"s or block"s name in scripts instead of having to use their IDs like many plugins force you to. Along with the ability to define enchanted items you can create some of the possibly most powerful "/item" commands for Bukkit with just a few lines! (two example commands are included in the download)

    Need help? Documentation

    To learn more about writing scripts please read the documentation on my website. There are also lists of all possible events , conditions , effects , expressions and types with examples for each of them.

    The Team
    • : Manager & programmer of Skript
    • : Helps programming by adding new features
    • : Wrote some tutorials and moderates the forums
    • : Submits tons of bug reports
    • : Made the old Skript banner and a signature image
    • : Expert in Skript and Skript accessories. The glue that holds everyone together
    Features Natural syntax As you might already have noticed writing scripts is not very difficult. You can write (almost) normal english sentences and Skript will try to interpret them. If Skript doesn"t understand something, please check your spelling and/or refer to the documentation to find out how to write your sentence to make Skript understand it. Custom Commands Skript can be used to define custom commands. These commands can use Skript"s syntax which allows to make very user-friendly commands, like one of the most powerful /item commands available, and any other command you or others come up with. Skript also has a setting to try to interpret all unknown commands as effects. This basically allows to use any effects you can put into triggers as a command. A short introdution on how to create custom commands can be found on my website . Please note that Skript is not well suited for creating aliases of other plugins" commands or for creating a command that executes multiple other commands. I suggest to use or some other plugin for this purpose. Inventory Menus Using SkQuery (An addon for Skript), you can create dynamic inventory menus found in many popular plugins. Want a couple items to display that will do different things such as warps and console commands? This becomes an easy task. Slots can be formatted to do nothing, run a console command and close the menu, or even run a console command and keep the menu open (Usefull for dynamic updating menus that change based on selections) Chat Formatting/Json Capability Again, using SkQuery (An addon for Skript), you can completely customize how your chat looks from prefix to suffix to player"s name to the actual message itself. In addition, you can add JSON formatting to your chat in game... Want to highlight a player"s name and display a location? A rank? A specific class they have selected? Want to click someones name and have kick/ban/mute/message inventory menu to appear? Easy! Independent Scripts Triggers can be put into multiple files, and each file is treated independently. This means that you can easily use triggers made by other people by simply copy&pasting their files into the scripts directory. Scripts are thus like small plugins for Skript with the advantage of being able to edit them easily. You can find some scripts on the , and you can also post your own. Please read the before posting a file. Item and Block Aliases Aliases help to make the config more user-friendly by using comprehensive names for items and blocks, e.g. you can write " bonemeal " instead of " 351:15 ", or " any hoe " instead of listing all hoe types. Aliases support data value ranges and can even consist of multiple types. You can easily define your own aliases, e.g. " blacklisted = TNT, bedrock, obsidian, monster spawner, lava, lava bucket " and there are also many useful predefined aliases in the main config. Error Handling Skript automatically logs errors in the scripts to the console, e.g. if it can"t understand a line of a trigger. It will not cease operation, but simply skip the invalid parts of the scripts, be it a whole trigger (e.g. if the event is invalid) or just a single condition (e.g. if there"s a typo in the condition"s name). This might lead to unexpected behaviour, so always check for errors in the console after you have changed something. If you use the " /skript reload " command all errors will be sent to the player who used the command (or printed to the console if the command was used from there). Automatic Update Skript can detect new versions and update itself, either by a command (/skript update) or automatically when the server starts. You can turn the automatic check on or off, configure whether to check for updates only, and choose whether to download them as well in the config file. If a new version is found, all players with the permission " skript.admin " will get notified of the new version. As Simple or as Complicated as You Want To Go Want to create a message that displays after the player logs in? Sure, easy, 2 lines, done in a flash. Want to create a completely custom, unique experience that will WOW your users and astound them? Sure, it"s more complex, but it"s all worth it to see your users blown away by the customizability of your creations. See a user complain that something doesn"t work right? Fix the code, reload the skript (Without restarting the server) and watch them be so confused as to how it was already fixed. Extensible Java developers can add their own conditions, effects and variables using a provided API . Many users have completed addons, and these addons contribute IMMENSE amounts of conditions, expressions and triggers. Some give you access to items in item frames, some let you create scoreboards, and some even let you send resource packs to players. These are just some of the addons available Future Features More events/effects/conditions/expressions/loops/etc. I"m always looking for ideas ;) Triggers which are executed when a player presses a specific button, steps on a predefined pressure plate, etc. This sounds awesome but will definitely take a while. Full list of planned features: https://github.com/Njol/Skript/issues?labels=new+feature&state=open What I"m currently working on: https://github.com/Njol/Skript/issues/assigned/Njol?state=open Permissions

    Skript works without permissions plugins, but It also provides some permission in case you use one:

    Skript.admin Grants access to the /skript command. skript.effectcommands Allows to use effects as commands if effect commands are enabled in the config.

    You can also use the " Has/doesn"t have the permission "permission.here" " condition in scripts to check whether a player has/doesn"t have a certain permission. You can even create your own permissions this way, but you should note that " mypermissions.* " does not give all permission that start with " mypermissions. " (The exception to this rule are other plugins" " * " permissions and any permissions starting with " skript. ").

    Download Donations

    If you like the plugin feel free to make a donation :)

    Changelog v2.1.1 (11 March 2014) Main Change Fixed most (if not all) database issues. Please still create a backup of the old variables table just to play it safe. Part of the fix required to save and load all variables on the main server thread, i.e. performance may suffer. Improvements Changed the updater to adhere to the new Bukkit guidelines Improved the automatic config updating Should be compatible with Java 6 again Decreased chances of errors due to improved automatic code analysis Added a workaround to be able to remove a player"s tool in a click event Added workaround to make Skript more compatible with mods that dynamically change enums via reflection. If they do this improperly Skript will still not be compatible with them however. Added some 1.7 block to the code Improved/fixed visual effects Improved expression lists Added an error on an unsuccessful hook into another plugin Improved regions support Added expression "me" that can only be used in effect commands Improved documentation generation Improved effect commands Added "luck" and "lure" enchantments now that Bukkit supports them Fixes Fixed configs only working with tabs. You can now use any indentation again, and even use different types in one file. Fixed some other minor config related issues Fixed error reporting not reporting the whole error Fixed the pressure plate event to also fire for golden and iron pressure plates Fixed a few issues with custom language files Fixed "neither ... nor ..." not working as expected Fixed some log-related errors and fixed some log messages that didn"t appear at all Fixed not complaining about storing an entity or other non-serialisable data in list variables Fixed the Bukkit command registration hack to work in 1.7.2 R0.4 as well Fixed effect command to use english Code Related Slightly improved directions Minor performance improvements Added draft for sound support Removed script caching completely, as it never worked anyway. This might break addons. Added some more comments to the API 2.1 (17 December 2013) Note this release includes two changes to how variables are saved, thus please test saving and loading variables on a test server before updating Skript on your main server (especially if you"re using a database - but make sure to configure the test server to access a different database!) added support for multiple databases (this also allows to define variables that won"t be saved at all) variables are no longer saved as text but in binary Improved support for regions plugins: supported plugins: WorldGuard, Factions, PreciousStones, and GriefPrevention new expressions: members/owner(s) of %region%, regions at %location%, block in %region%, the region new event: on region enter/exit new condition: %player% is member/owner of %region%, %region% contains %location% use regions in scripts like "region "region name", or save them to variables and use the variables instead New Expressions experience, index of %text% in %text%, join/split %text% by/at %text%, length of %text%, subtext of %text% between %number% and %number%, first/last %number% characters of %text%, max stack size of %item%, line %number% of lore of %item% New Effects play effect (plays entity and particle effects), force %entity% to dismount Fixes and Improvements dropped items, falling blocks, and thrown potions can now have item types (e.g. falling dirt, dropped arrow) horse variants (mules, donkeys, etc.) can now be distinguished. colours and decorations are not supported yet. pigs can now be equipped with saddles, and horses can be equipped with saddles, horse armour, and chests added ability to shoot projectiles from any location, not just from entities added ability to directly change the id of an item or block added warning when using "items in {var::*}" added ability to change the passenger of a vehicle and vice versa "on experience spawn" is now called when fishing as well the shooter of a projectile can now be changed biomes can now be changed added a warning if a variable is assigned a value that cannot be saved "colour of ..." might now work with more items (e.g. stained glass), but this depends on Bukkit improved localisation, mostly in regards to aliases improved changing expressions improved all expressions that have multiple time states when used with expression lists to return the expected value improved the "parse" expression several small improvements to parsing fixed "" in text not working and many bug fixes

    Older changelog can be found in the respective