Как сделать кнопку в jquery
Обновлено: 05.07.2024
Не мне рассказывать вам про преимущества использования асинхронного метода в таких случаях.
Но делать сайт полностью 100% на AJAX… по-моему не стоит даже и думать об этом и я не имею ввиду индексируемость у поисковиков, где-то в документации google даже есть отличная статья как сделать свой AJAX-сайт нормально индексируемым. Всё дело в удобстве.
Короче это было что-то вроде вступления))
Начну пожалуй с примера кнопки:
Как видите, это самая обычная POST-форма, уверен, что вы знаете, как работать с такими формами через PHP.
При помощи скрытых полей и будут передаваться все необходимые параметры.
Теперь CSS, это кстати те же самые стили, которые я использовал в примере выше, конечно же вы можете оформить кнопку и по-своему.
и jQuery: (только не забудьте перед этим подключить саму библиотеку)
Обратите внимание на файл follow.php, он должен находиться в той же папке, что и js-файл, в противном случае следует указать абсолютный путь.
Ну вот и всё готово, на самом деле ничего сложного, больше всего кода — это CSS-стили)) Я надеюсь, что вы знаете, что куда вставлять.
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
В сегодняшнем уроке мы на практике рассмотрим то, как можно создать простую, но очень красивую кнопку для поиска, всего лишь с помощью CSS3 и jQuery.
Готовая кнопка будет выглядеть примерно так:
Для создания такой красивой анимированной кнопки для окна поиска мы будем использовать следующие инструменты:
- HTML – для структуры документа
- CSS3 – для стилевого оформления и анимации движения
- jQuery – для реагирования на нажатие кнопок
Некоторое время назад разработчики анимировали HTML элементы, изменяя значения CSS свойств с помощью JavaScript. Этот подход уже устарел. Сегодня же, благодаря CSS3, мы можем анимировать элементы на странице намного быстрее, проще, а результаты будут действительно впечатляющими!
Итак, давайте приступим к практике!
Шаг №1: Создание HTML каркаса
Прежде всего, создадим контейнер div с классом search-form . В нем будет располагаться наша форма поиска.
Обратите внимание:
Вот так примерно выглядит наша HTML структура:
Шаг №2: Добавление стилевого оформления с помощью CSS3
Прежде всего, чтобы центрировать элемент формы поиска по центру страницы, мы используем position: absolute; и делаем сверху и слева отступ в 50%.
Далее, используя CSS3 свойство transform: translate(x, y) , где x и y равны -50% , мы находим центр текущего положения элемента на странице.
Теперь рассмотрим стили для контейнера, в котором располагается поле input для ввода текста:
Блок с классом .input-holder имеет 2 различных перехода, один из которых использует предопределенную функцию easy-in-out (которая применяется, когда вы закрываете окно поиска), а второй использует функцию cubic-bezier (которая применяется при открытии окна).
Дальше рассмотрим стили для остальных элементов формы поиска:
Как упоминалось выше, блок .search-input имеет абсолютное позиционирование, растянутое на 100%. Это означает, что он принимает значение своего родительского блока.
Для анимации у нас есть 2 состояния.
Состояние при открытии блока:
Когда открывается блок .input-holder , мы меняем непрозрачность с 0 на 1 и трансформируем из translate(0, 60px); в translate(0, 10px) . Что касается свойства перехода (transition), оно наследуется от предыдущего состояния.
Состояние при закрытии блока:
Когда блок .input-holder закрывается, мы применяем несколько свойств CSS3 к блоку .search-input :
Блоки .search-icon и .close используют те же методы для перехода, которые описаны выше, но с некоторыми отличиями. Например, такими как использование свойства перехода в сочетании с transform: rotate(x deg); . Это позволяет нам вращать наш элемент вокруг его собственного центра.
Рекомендуем вам дополнительно почитать информацию, которая касается использования псевдо-классов ::before и ::after для создания мини-иконок. Также обратите особое внимание на документацию и уроки по функции cubic-bezier. В сети Интернет есть масса таких уроков. В будущем мы планируем провести детальный анализ такой документации на нашем сайте.
Шаг №3: Добавление скрипта jQuery, который будет реагировать на изменение состояния кнопок
Для этого шага вам понадобится подключить (если вы еще не подключили) библиотеку jQuery.
Можете использовать CDN версию библиотеки. Для этого добавьте в секцию следующий код:
Обратите внимание, что у нашей основной оболочки .search-form есть класс .active , который добавляется скриптом, и ему присваиваются отдельные CSS стили. Этот класс мы будем использовать для переключения между состояниями основного дочернего элемента.
Мы используем функцию searchToggle() , которая добавляет (или удаляет класс) .active основному блоку .search-form нашей формы поиска.
Код выглядит следующим образом:
Ниже представлено демо, которое наглядно покажет вам, как работает наша замечательная анимированная кнопка для поиска:
Краткий итог
Создавать анимацию с помощью CSS3 можно весело и просто!
Надеемся, что вам понравился сегодняшний практический урок, и вы нашли его полезным.
Если у вас есть какие-либо вопросы или предложения по данной теме, вы можете оставить их в разделе комментариев ниже.
Раз мы определились для чего она нам нужна, давайте приступим к её реализации. Если вы хотите сразу посмотреть готовый код с примером — добро пожаловать на codepen .
HTML код для нашей кнопки достаточно простой. Мы всего лишь создаем
, в который мы поместим иконку стрелки вверх. Я буду использовать svg-код иконки, но вы можете использовать картинку, как всегда, с помощью тега
CSS часть конпки
Так же важно показывать кнопку только после начала скролла, ведь от неё нет никакого смысла, если пользователь и так находиться вверху страницы. Для этого скроем кнопку за экраном с помощью bottom: -50px, и добавим для неё класс active, у которого bottom равно 50px. С помощью jQuery будем добавлять этот класс после начала скроллинга.
Javascript (jQuery) часть кода
Как и говорилось выше, показывать кнопку будем только после начала прокрутки. Для того, что бы после нажатия кнопки возвращать экран на верх сайта с анимацией — будем использовать код с этого урока .
Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их на Youtube канале, или пишите мне в Telegram, с радостью помогу.
Например, событие click возникает при клике пользователем на DOM-элементе. Кроме click , в браузере генерируются множество других событий. Более детально познакомиться с ними можно в этой статье. Здесь же мы остановимся на рассмотрение методов, которые предоставляет библиотека jQuery для работы с ними.
Обработка событий с помощью методов jQuery
Перед тем как переходить к добавлению элементам обработчиков событий, эти элементы сначала необходимо получить. Узнать о том, как найти нужные элементы на странице можно в статье jQuery - Выбор элементов.
В jQuery повесить событие (слушатель событий) на определённый элемент можно с помощью функций on и one , а также кратких записей on .
Функция one отличается от on только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции on событие click для всех элементов с классом btn :
Вышеприведённый код, записанный с использованием короткой записи функции on :
Дополнительная информация о событии
При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта Event в обработчик события осуществляется всегда посредством первого аргумента.
Пространство имён
В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Пространство имён - это очень удобная вещь. Она используется, например, когда вам необходимо вызвать не все события, а только с определённым именем.
Также с его помощью очень просто удалять определённые события:
Описание и примеры использования функций trigger и off рассматриваются в статье немного ниже.
Передача дополнительных данных в обработчик
При необходимости вы можете передать данные в обработчик события (посредством указания дополнительного аргумента в функции on ). Доступ к переданным данным внутри обработчика осуществляется через объект Event .
Осуществляется это так (пример):
Как повесить несколько событий на один элемент
Пример использования одного обработчика для нескольких (2 или более) событий:
Для каждого события своя функция:
Пример использования в jQuery несколько обработчиков (функций) на одно событие:
Например, узнать в какой очерёдности будут выполняться события можно так:
Программный вызов события
Для вызова события из кода в jQuery есть 2 метода:
- trigger - вызывает указанное событие у элемента.
- triggerHandler - вызывает обработчик события, при этом само событие не происходит.
jQuery - Событие загрузки страницы (ready)
Процесс добавления к некоторому элементу обработчика события обычно осуществляется после загрузки страницы, т.е. когда DOM дерево документа уже построено. Иначе при написании обработчиков, вы можете обратиться к элементам, которых ещё нет на странице.
Самая короткая запись события загрузки страницы в jQuery выглядит так:
Но, можно использовать и более длинную запись:
jQuery - Событие загрузки (load)
Событие load браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: image , script , iframe и window .
Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):
jQuery - События мыши
В jQuery для отслеживания действий мыши наиболее часто используют следующие события:
- mousedown
- mouseup
- click
- mousemove
- wheel
- hover
- mouseenter
- mouseover
- mouseleave
- mouseout
jQuery - Событие клик (click)
Событие click является сложным событием, оно возникает после генерирования событий mousedown и mouseup . Событие mousedown возникает, когда указатель находится над элементом и кнопка мыши нажата. Событие mouseup происходит, когда указатель находится над элементом и кнопка мыши отпущена. Событие click генерируется, когда курсор находится над элементом, и клавиша мыши нажата и отпущена. Эти события могут получать любые HTML элементы.
Например, повесим обработчик на событие onclick элемента window . При наступлении данного события обработчик будет выводить номер нажатой клавиши и координаты курсора:
Например, повесим событие onclick на все элементы с классом btn :
Краткая запись события по клику:
Например, разберем, как можно скрыть блок через некоторое время после события click :
jQuery - Событие при наведении (hover)
Событие при поднесении курсора является сложным и состоит из 2 событий:
- вхождения (mouseenter, mouseover);
- покидания (mouseleave, mouseout).
События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.
Например, изменим цвет элемента списка при поднесении к нему курсора:
Те же самые действия, но использованиям mouseover и mouseout :
Данные методы необязательно использовать вместе, их можно также применять по отдельности.
Например, подсчитаем количество посещений элемента при наступлении события "Навести мышью":
Вместо использования mouseenter и mouseleave можно использовать событие hover .
Например, перепишем вышеприведённый пример, используя hover :
При использовании события hover в jQuery, первый обработчик используется для задания действий при вхождении курсора в элемент ( mouseenter ), а второй - при покидании ( mouseleave ).
Если указать событию hover один обработчик, то он будет выполняться как для обработки наведения мыши, так и для её покидания.
jQuery - Событие движения мыши
Событие mousemove посылается элементу, когда указатель мыши перемещается внутри него. Любой HTML элемент может получать это событие.
jQuery - Событие колёсика мыши (wheel)
Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:
Данное событие в отличие от scroll генерируется браузером только для колёсика мышки, при этом неважно прокручивается элемент или нет, т.е. с ним можно работать на элементах с overflow , равным hidden . Еще одно отличие заключается в том, что wheel генерируется до прокрутки, а scroll - после неё.
jQuery – События клавиатуры
При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:
- keydown (клавиша нажата, но ещё не отпущена);
- keypress (событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события keydown и keyup позволяют узнать только о коде клавиши, но не символа);
- keyup (генерируется браузером при отпускании клавиши).
Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:
Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:
Пример, как можно прослушать сочетание клавиш Ctrl+Enter :
Пример, с использованием событий keydown и keyup :
jQuery – События элементов формы
В jQuery можно выделить следующие события для элементов формы и не только:
- focus (focusin)
- blur (focusout)
- change
- input (для текстовых элементов формы)
- select
- submit
jQuery - События получения и потери фокуса
Событие focus посылается элементу, когда он получает фокус. Данное событие генерируется для элементов input , select и ссылок ( a href=". " ), а также любых других элементов, у которых установлено свойство tabindex . Получение элементом фокуса обычно осуществляется посредством клика или нажатия клавиши Tab на клавиатуре. Событие focus не всплывает.
Кроме focus есть ещё похожее событие, называется оно focusin . В отличие от focus данное событие всплывает, и оно может, например, использоваться для обнаружения события фокуса родительскими элементами.
Событие blur посылается элементу, когда он теряет фокус. Так же как и focus , событие blur имеет похожее событие focusout . Данное событие отличается от blur тем, что оно может всплывать. Это возможность можно использовать, например, для получения его на родительских элементах, а не только на том элементе, который его вызвал ( target ).
Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:
Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:
jQuery - Событие изменения (change)
Событие change предназначено для регистрации изменения значения элементов input , textarea и select . Для элементов select , checkboxes , и radio кнопок данное событие возникает сразу (т.е. как только пользователь делает какой-то выбор). Но для других элементов данное событие не будет происходить до тех пор, пока этот элемент не потеряет фокус.
Пример использования события change для слежения за состоянием элемента checkbox . Доступность кнопки будет определять в зависимости от того в каком состоянии ( checked или нет) находиться флажок:
Пример, в котором рассмотрим, как получить значение элемента select при его изменении:
Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:
Пример программного вызова события change для элемента select :
Пример использования события изменения change для получения значения элемента input :
Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.
Пример, использования события ввода для получения значения элемента input :
Пример, в котором представлен один из способов получения значения элемента textarea :
Пример, в котором рассмотрим, как с помощью события change получить значение выбранного элемента input с type , равным radio :
jQuery - Событие выбора (select)
Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type="text" или textarea выделяет текст.
jQuery – Событие отправки формы (submit)
Пример, использования события submit :
Программный вызов отправки формы:
jQuery - Событие прокрутки (scroll)
Для отслеживания состояния скроллинга в jQuery используется событие scroll .
Например, повесим на событие прокрутки страницы функцию, которая будет отображать элемент с классом scrollup , если величина прокрутки больше 200px и скрывать его, если значение прокрутки меньше этой величины.
jQuery - Событие изменения размеров окна (resize)
Для прослушивания события изменения окна браузера используется resize :
Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:
jQuery - Отмена стандартного поведения события
Некоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте href . Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод preventDefault объекта event .
Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service :
Что такое всплытие и как его остановить
Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:
В jQuery бывают сценарии, когда в представленной цепочке у какого-нибудь элемента то же есть обработчик для этого события, который выполнять не нужно. И чтобы это событие не распространилось на этот элемент, его необходимо остановить. Для этого в обработчике нужного элемента необходимо вызвать метод stopPropagation объекта event . После вызова этого метода событие остановится, и не будет всплывать.
Например, необходимо чтобы при поднесении курсора к элементу с классом mark , его содержимое становилось оранжевым цветом.
В данном случае если не указывать метод stopPropagation , то при поднесении курсора к элементу span с классом mark данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в span , но и всего абзаца.
Если вам необходимо отменить стандартное поведение браузера и остановить всплытие события, то в jQuery вместо вызова двух этих методов можно просто вернуть в качестве результата функции значение false .
Добавление событий к динамически созданным объектам
Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции on :
Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является document . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция on может программно отобрать среди элементов (элемента, который вызвал это событие ( target ) и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции on обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.
Например, добавим событие к элементу, которого ещё нет на странице:
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):
jQuery - Удалить обработчик события
Удаление обработчиков события осуществляется с помощью метода off . При этом с помощью него можно удалить только те обработчики, которые добавлены посредством метода on .
Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.
Например, отключим все обработчики у элементов с классом link:
Например, удалим событие click у всех элементов с классом link :
Специальный селектор ( ** ) позволяет удалить только делегированные события с сохранением не делегированных:
Удалить только указанные делегированные события (с помощью селектора):
Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show :
Создание пользовательского события
Для создания пользовательских событий в jQuery используются методы on и trigger .
Принцип создания специального события jQuery рассмотрим посредством следующего примера:
Читайте также: