jQuery Примеры | Zolin Digital
- 1-2 мин.
- 394
Вы можете просто использовать JavaScript-метод location.reload() для обновления или перезагрузки страницы. Этот метод дополнительно принимает логический параметр true или false. Если указан параметр true, это вызывает постоянную перезагрузку страницы с сервера. Но, если установлен false (по умолчанию) или не указан, браузер может перезагрузить страницу из своего кеша. Давайте посмотрим на пример, чтобы понять, как работает…
- 2-3 мин.
- 3320
Вы можете использовать jQuery-метод css(), чтобы изменить значение свойства CSS display на none, block или любое другое значение.
- 1-2 мин.
- 133
В следующем примере показано, как отображать и скрывать элементы <div> на основе раскрывающегося списка или выбранного параметра в поле <select> с помощью jQuery-метода change() в сочетании с методами show() и hide(). Блоки <div> в этом примере по умолчанию скрыты с помощью CSS-свойства display, для которого установлено значение none.
- 201
Вы можете просто использовать JavaScript-метод window.
matchMedia() для обнаружения мобильного устройства на основе медиа-запроса CSS. Это лучший и самый надежный способ обнаружения мобильных устройств. Следующий пример покажет вам, как на самом деле работает этот метод: Метод matchMedia() поддерживается во всех основных современных браузерах, таких как Chrome, Firefox, Internet Explorer (версия 10 и выше) и т. д.
- 1-2 мин.
- 202
Вы можете использовать селекторы атрибутов CSS, чтобы найти элемент HTML на основе его значения data-attribute с помощью jQuery. Селекторы атрибутов предоставляют очень эффективный способ выбора элементов. Давайте посмотрим на следующий пример, чтобы понять, как это работает:
- 156
Чтобы установить CSS-свойство background-image элемента с помощью jQuery-метода CSS(), вам необходимо указать полное значение свойства, используя функциональную нотацию url().
Например, если у вас есть URL-адрес изображения, хранящийся в переменной JavaScript, тогда в методе CSS() вам нужно установить значение примерно так, чтобы оно работало:
- 1-2 мин.
- 198
Вы можете использовать jQuery-метод click() в сочетании с методом on(), чтобы скрыть раскрывающееся меню, когда пользователь щелкает за пределами элемента триггера. Давайте посмотрим на следующий пример, чтобы понять, как это работает:
- 78
Вы можете использовать jQuery-метод delay() для вызова функции после некоторого ожидания. Просто передайте этой функции целое число, чтобы установить временной интервал задержки в миллисекундах. Давайте посмотрим на пример, чтобы понять, как работает этот метод:
- 405
Вы можете рассчитать или найти количество слов в строке с помощью JavaScript-метода split().
Этот метод просто разбивает строку на массив подстрок по указанному символу. В следующем примере мы также использовали метод trim() для удаления начальных и конечных пробелов из строки перед подсчетом количества слов.
- 1-2 мин.
- 451
Вы можете использовать метод val(), чтобы проверить пусты ли входные данные в jQuery. В следующем примере вокруг полей ввода будет добавлен красный контур, если на нем есть фокус, но не заполнен.
- 1-2 мин.
- 147
Вы можете привязать событие ввода к текстовому полю input используя метод on(), чтобы обнаруживать любые изменения в нем. В следующем примере будет отображаться введенное значение, когда вы вводите что-то в поле ввода.
- 529
Вы можете использовать JavaScript-метод substring() для удаления первого символа из строки. Типичный пример — удаление символа решетки (#) из идентификатора фрагмента. Давайте посмотрим на пример, чтобы понять, как работает этот метод:
Красивый select и multiselect с помощью Chosen
05.05.2012
Для выбора нескольких видеокарт, в нашем каталоге используется плагин Chosen. А обычный select но с тем же плагином можно увидеть на вкладке добавления новой видеокарты. В этой заметке мы рассмотрим как подключить данный плагин.
Где взять?
Скачать его совершенно бесплатно можно на githab.
Там же есть и довольно большой пример использования Chosen.
В примере рассмотрен как обычный, так и мультиселект, с использованием различных параметров плагина.
А сейчас нас сейчас интересует то, как подключить плагин к нашей странице.
Подключаем
А делается это легко.
После скачивания zip архива, распакуем его и из всей небольшой кучки файлов нам понадобится только папка chosen. В ней всего 6 файлов, нам будут нужны только следующие:
— chosen.css
— chosen.jquery.min.js
— chosen-sprite.png
Остальные можно спокойно удалить, зачем нам лишние файлы, правда?
Но это ещё не всё, для работы плагина необходим jQuery, если в вашем проекте он ещё не используется, то пора его подключать.
Первым делом необходимо указать путь до стилевого файла chosen.css.
А в конце нашей страницы необходимо подключить jquery.
js и chosen.jquery.min.js, а так же «включить» плагин.
//Подключаем jQuery
//Подключаем chosen.jquery.min.js
//Включаем плагин
Всё, Chosen подключен.
Применяем
Для того, что бы обычный select:
ATI/AMD
NVIDIA
превратился в красивый и более функциональный вариант, который вы можете посмотреть вот тут,
необходимо применить к select класс chzn-select, и для данного примера у нас получится следующий код:
ATI/AMD
NVIDIA
Для реализации множественного выбора, ничего нового изобретать не нужно, за это отвечает всё тот же параметр multiple.
Что бы при множественном выборе пользователю было понятно что делать, можно установить текст по умолчанию:
data-placeholder='Тут какой то текст'
Прописывать это надо всё в том же select.