jQuery

Как в Bower установить Fancybox
Как в Bower установить Fancybox

Для того чтобы установить jQuery скрипт галерении (попап окна) Fancybox, выполните следующую команду в консоле:

bower i fancybox

Но прежде чем устанавливать библиотеку, убедитесь что у вас установлен nodejs и npm. Как это сделать, вы можете прочесть в этой статье.

Как сделать простые табы плагином на jQuery
Как сделать простые табы плагином на jQuery

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

  1. Стили. Они останутся не измены, мы их просто перенесем из html документа в файл «jquery.tab-light.css».
  2. JavaScript. Его код перенесем в файл «jquery.tab-light.js»

Так же, не забудьте подключить выше описанные файлы в ваш html документ.

Второе. Назовем наш плагин «tabLight» (т. е. простой). Данное название мы будет использовать в JS коде.

читать полностью...

Как в jQuery раскрыть Autocomplete кликнув по кнопке
Как в jQuery раскрыть Autocomplete кликнув по кнопке

Фреймворк jQuery, в своем арсенале имеет такой компонент как Autocomplete. Отображающий подсказки (варианты ввода) непосредственно под полем ввода текста, по мере его набора. По аналогии автокомплита как в поисковых системах google и яндекс.

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

Предлагаю детальнее рассмотреть решение данной задачи. И первое что нам нужно сделать, это подключить все необходимые скрипты и библиотеки:

<link rel="stylesheet" href="../bower_components/jquery-ui/themes/base/all.css">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>

читать полностью...