Сайт, который имеет оригинальный внешний вид, выделяется на фоне остальных. Поэтому кнопки CSS важны. Возможно, их даже тривиально реализовать с использованием базовых событий CSS и jQuery . Однако создание любой качественной работы требует тщательного изучения ингредиентов.
Этот учебник является прямой выдержкой из моей учебной электронной книги . Это из Редакции 3, над которой я сейчас работаю по состоянию на 26 июля 2012 года. Книга содержит все 3 части этого урока. Я решил разделить его на 3 части и поделиться им со всеми бесплатно на jQuery4U, чтобы люди узнали о моей работе.
В этом уроке мы создадим пользовательские кнопки CSS, которые могут выглядеть следующим образом:
Или как насчет кнопок панели навигации, как эти?
Показанные здесь кнопки в 3 раза больше оригинального размера.
Эти наборы могут быть выполнены с использованием простых стилей CSS. Но самый важный компонент красивой кнопки — это внимание к деталям . Мы не можем небрежно наносить градиенты и цвета на кнопку. Есть что-то тонкое в том, как человеческий глаз улавливает мельчайшие детали.
Эти наборы могут быть выполнены с использованием простых стилей CSS. Но самый важный компонент красивой кнопки — это внимание к деталям . Мы не можем небрежно наносить градиенты и цвета на кнопку. Есть что-то тонкое в том, как человеческий глаз улавливает мельчайшие детали.
Но сначала немного истории.
В прошлом, когда речь шла о создании кнопок, наш выбор был ограничен HTML и тегом и удалите границу изображения, установив его атрибут border в ноль, как в border = 0 .
Эти методы все еще работают. Но у них много недостатков. Например, в старых версиях Windows (которые все еще используются сегодня) кнопка по умолчанию будет отображаться в виде простой кнопки серого цвета. В более новых операционных системах Windows встроенная кнопка выглядит лучше, но она не всегда соответствует теме настраиваемого веб-сайта или пользовательского интерфейса, который вы разрабатываете.
С текстом с использованием базового шрифта, такого как Arial или Verdana, который является почти единственной вещью, которую вы можете изменить в стандартных кнопках HTML, мы застряли с ограничениями собственного дизайна кнопок.
Но мы больше не в 1990-х. Эти недостатки с тех пор развились. Современные кнопки создаются с использованием стилей CSS , jQuery и Ajax . Элементы HTML и CSS кнопки, конечно же, представляют ее визуальный стиль. jQuery используется для динамического изменения внешнего вида кнопки в зависимости от того, находится ли курсор мыши над или вне элемента HTML кнопки.
И, наконец, Ajax используется для выполнения некоторой функции на сервере после нажатия кнопки (например, файл PHP, который возвращает значение). Конечно, действие, которое происходит при нажатии кнопки, могло быть просто функцией JavaScript на стороне клиента. Фактически, это, вероятно, то, для чего используется большинство кнопок. Однако связывание действий кнопок с событиями Ajax, которые запускают какой-либо тип сценария, не является редкостью. Кнопки бывают разных типов и вкусов. Что должно происходить при нажатии кнопки, обычно определяется в функции, известной как функция обратного вызова .
$ (« Div #my_button »). click ( function () { / * Сделай что-нибудь * / } );
Здесь функция обратного вызова подсвечивается светло-желтым цветом. Как видите, он передается методу click в jQuery в качестве единственного аргумента.
Выбор базового элемента: DIV или A
Давайте создадим правило. Все элементы, которые являются кнопками, будут наследовать CSS-класс «button». Другими словами, чтобы веб-страница рассматривала HTML-элемент как кнопку, мы применим класс с именем «button» к этому элементу, используя атрибут class, как в:
<a class = «button»> или < div class = « button »>
Это должно быть так? Конечно, нет. Но вы разработчик, вы создаете эти правила. Для целей этого урока я решил сделать это таким образом, но это определенно не универсальное правило, созданное из железа или камня для создания CSS-кнопок.
Кнопка, которую мы собираемся создать, будет иметь базовый элемент. Мы можем использовать любые блокировки (обычно для кнопок с позицией: абсолютный ) или встроенные элементы (для кнопок с позицией: относительный ), такие как
Иногда имеет смысл сделать кнопку из тега (которая создает гиперссылку) и просто изменить ее стиль на кнопку и отключить функцию HREF. Вы можете подумать, что это удобный выбор, потому что по умолчанию тег уже кликабелен. Однако это не является хорошей причиной для выбора тега для создания кнопок вообще. На самом деле кликабельность тега по умолчанию должна быть полностью отключена, если мы хотим, чтобы он служил в качестве кнопки CSS.
Позже вы увидите, что мы переопределим все события кнопок с помощью метода jbuery .bind () вместо использования атрибутов href или onclick . Делая это таким образом, вы можете легко переключиться на DIV позже, если на самом деле вы столкнетесь с конфликтом стилей CSS, который связан с конфликтами имен тегов элементов.
Давайте сравним два HTML-тега, которые можно использовать для стимулирования создания HTML-кнопок:
<a href = «#» class = «button»> Хорошо, a >
< div class = «button»> Хорошо, div >
Как правило, мы должны зарезервировать тег специально для гиперссылок, чтобы избежать столкновения стилей CSS между гиперссылками и кнопками, которые могут быть добавлены позже в нашем проекте.
Однако мы можем создать специальную кнопку и ссылаться на нее по имени класса. Такая кнопка может быть создана с использованием стиля A .button {…}, как в <A href = «#« class = «button«> Хорошо A > »), если мы обещаем себе, что все кнопки будут созданы таким образом ( чтобы Держите наши CSS файлы организованными и с ними легче работать ).
Работая над серьезным веб-проектом, вы должны сделать все возможное, чтобы кнопки, созданные с помощью тега, работали одинаково и выглядели одинаково во всех браузерах. Хотя я стараюсь поддерживать хотя бы некоторую межбраузерную совместимость в моих руководствах, вы можете сказать, что это руководство в основном ограничено Chrome, Firefox, Safari и последней версией браузера Internet Explorer.
Написание отдельного учебника для каждого браузера может помешать представленным здесь фундаментальным концепциям, и я думаю, что можно написать целую книгу, рассказывающую о различиях между браузерами.
Держите вещи простыми в корне
Мы только что представили несколько основных принципов построения кнопок CSS. Давайте продолжим исследовать эту тему с акцентом на использование тега A в качестве базового элемента кнопки. Весь этот урок был вдохновлен последними уроками из моей электронной книги, которые вы можете найти на моем сайте.
Прошлой ночью мы прекратили наше обсуждение с выбором тега A или DIV для наших кнопок. Но тег A требует большего внимания, прежде чем мы сможем использовать его в качестве кнопки CSS.
Теги DIV не должны иметь дело с атрибутом HREF. Помимо этого два тега будут давать идентичные результаты. Однако, чтобы это было правдой в нашем скрипте, есть несколько вещей, которые вы должны знать о теге.
Работа с A и HREF
Тег имеет печально известный атрибут HREF, который используется для указания места назначения гиперссылки. Но мы не хотим, чтобы кнопка, созданная с помощью тега, переходила на веб-страницу. Другими словами, мы хотим, чтобы наша универсальная кнопка могла реагировать на событие нажатия. Но мы не хотим делать это, используя атрибут onclick. В конце концов, это учебник по jQuery, а jQuery предлагает удобство использования событий, которые доступны в одной точке нашего кода JavaScript. Возможность доступа к важному коду из единой точки в нашем скрипте сэкономит время работы над нашим приложением в долгосрочной перспективе.
jQuery позволяет нам связывать события с нашими кнопками, и этот код всегда будет храниться в одном и том же месте во время инициализации нашей веб-страницы (скажем, в событии $ (document) .ready ). Это избавит нас от необходимости переходить от одного onclick элемент к другому по всей части HTML нашего веб-приложения. И когда в будущем придет время изменить функциональность кнопок, мы всегда сможем сослаться на это единственное место в нашем коде. И избавь себя от головной боли.
Давайте теперь поговорим подробнее об атрибуте HREF. Как мы только что обсудили, мы будем использовать события jQuery вместо атрибутов onclick и HREF. Это означает, что нам нужно найти способ полностью отключить HREF.
Вы, вероятно, уже знаете, что когда вместо предоставления URL мы можем использовать символ числа #, за которым следует произвольное имя привязки (например, #Paris ) в качестве значения HREF. Это заставит вертикальную полосу прокрутки «перепрыгнуть» в точку привязки «Paris» на вашем сайте. Другими словами
Нажав на эту ссылку: перейдите в Париж, страница перейдет в место, помеченное этим кодом:
Мы можем просто использовать только символ #, как в « Возврат в начало страницы», и, таким образом, увидев, что имя привязки не указано вообще, веб-страница вернется в самое начало.
Это функция гиперссылки по умолчанию. Но мы хотим, чтобы это было полностью отключено для нашей кнопки. Мы не хотим, чтобы кнопка переходила на какие-либо URL или якоря. И мы определенно не хотим, чтобы наша кнопка возвращалась в самый верх страницы при нажатии. Но мы хотим, чтобы что-то происходило при нажатии кнопки с использованием события jQuery . Мы обсудим это на мгновение. А пока давайте полностью отключим функциональность HREF, выполнив одно из следующих действий:
1. Используйте JavaScript: верните false; в качестве значения HREF, как в href = «javascript: return false;«
2. Укажите return: false в качестве значения атрибута onclick, как в onclick = «return false;«
3. Полностью удалите атрибут HREF. Пример Хорошо
Все 3 метода отключат функцию HREF по умолчанию для тега A.
Возможно, вы не ожидали, что техника 3 сработает. Но в моих тестах это работало без проблем в Chrome, Firefox и Internet Explorer. Другими словами, вообще не указывая атрибут HREF, мы говорим HTML, что это просто якорь, а не гиперссылка.
Поведение тега A зависит от наличия атрибута HREF внутри тега. При этом он ведет себя как гиперссылка. Без этого он ведет себя как якорь. По сути, пропуская HREF, мы превращаем якорь в кнопку, а не в гиперссылку.
Значок указателя курсора также зависит от наличия атрибута HREF внутри тега. Когда вы наводите курсор мыши на тег HREF-less, он больше не превращается в правильный курсор-указатель. Он превратится в курсор выбора текста. Но это не проблема. Мы можем снова добавить правильный курсор курсора мыши обратно, применяя стиль CSS к нашим кнопкам, как показано ниже:
A.button { курсор : указатель ; } / * Возвращение указателя мыши в A без HREF * /
Это работает. Но ждать. Давайте позаботимся о еще одной вещи. Тег, используемый для кнопок, может по-прежнему отображаться как гиперссылка. Это означает, что он будет отображать подчеркивание текста под названием кнопки, которое является текстом, напечатанным внутри кнопки. Это, конечно, не случилось бы с DIV. Но чтобы этого не происходило в теге A, давайте также удалим текстовые декорации, применяя следующий стиль CSS для всех кнопок, класс которых «button»:
A.button { text-украшение : нет ; }
Как только мы обработаем тег HREF, применяя вышеупомянутые стили CSS к нашим кнопкам на основе A-тега, мы в значительной степени останемся с эквивалентом тега DIV. На этом этапе этот урезанный тег будет вести себя так же, как кнопка на основе DIV.
С этого момента, учитывая, что мы понимаем изменения, которые мы только что внесли в тег A, мы можем продолжить обсуждение создания пользовательских кнопок таким образом, чтобы они одинаково точно применялись к тегам A и DIV.
Выбор тега DIV в качестве базового элемента для наших кнопок избавляет нас от необходимости «подготавливать» тег A для превращения его в кнопку. Какой тег вы будете использовать в своем веб-приложении для создания кнопок CSS, зависит от вас. Просто убедитесь, что вы придерживаетесь одного тега, чтобы избежать осложнений позже.
Какой бы тег вы ни использовали для создания своих кнопок, ясно одно. Мы просто будем использовать метод jQuery .click (…) или «привязать» действие click с помощью метода .bind (…) к анонимной функции обратного вызова, которая будет выполнять код при нажатии кнопки.
Я думаю, что у нас достаточно знаний, чтобы начать экспериментировать с кодом.
Давайте пройдемся по процессу шаг за шагом и создадим несколько кнопок. Во-первых, нам нужно определить HTML и CSS. Мы уже обсуждали, что кнопка будет определяться с использованием элементов A или DIV. В любом случае, обратите внимание, что class = ”button” присутствует.
Кроме того, вы можете использовать тег DIV. Обратите внимание на отсутствие атрибута onclick в любом случае.
CSS-стили кнопок
Теперь давайте напишем CSS. Чтобы добавить интерактивность нашей кнопке, мы хотим иметь как минимум 3 различных стиля CSS для событий mouseover , mouseout и mousedown .
Стиль по умолчанию
Сначала нам нужно определить основной стиль CSS, который будет описывать цвет, стиль рамки и градиент кнопки. Это стиль по умолчанию, который будет применяться ко всем кнопкам:
Кнопка, отображаемая здесь, в несколько раз больше для ясности. Это на самом деле довольно маленький, и граница составляет всего 1px. Но таким образом мы можем видеть, какой код CSS относится к какой части кнопки.
Мы только что говорили о теге A и определили стиль по умолчанию для наших кнопок CSS. Теперь мы можем завершить наше обсуждение последней частью этого руководства, в которой рассказывается о реализации событий мыши jQuery. Вам также будет предоставлен полный исходный код для кнопок в самом низу этой статьи.
Наша цель — сопоставить кнопку с темой остальной части сайта. Это полностью зависит от вас и вашего чувства дизайна. Давайте посмотрим, как border-radius может изменить внешний вид или «ощущение» всей кнопки.
Помимо трех приведенных выше примеров, использование значения border-radius , намного превышающего половину высоты кнопки, приведет к углу, образующему идеальный круг, в результате чего обе стороны кнопки будут идеально круглыми. Вот почему в стиле по умолчанию мы начали с того, что я установил border-radius в значение 32px. Половина высоты нашей кнопки намного меньше, чем это, потому что это просто элемент А. Но если мы предоставим значение, которое больше половины высоты HTML-элемента, округлость кнопки достигнет своего максимума и остановится там, выглядя как половина идеального круга.
Стиль кнопок — это личный выбор. Вы можете изменить значение border-radius на что угодно. Просто экспериментируйте с разными значениями, пока не добьетесь того, что выглядит хорошо.
На ховер
Когда мы наводим указатель мыши на кнопку, мы хотим, чтобы кнопка изменила свой внешний вид. Один из лучших способов добиться этого тонкого эффекта — слегка изменить цвет рамки, цвет шрифта и добавить тень с помощью свойства box-shadow :
Класс .buttonOn не должен определять все значения класса по умолчанию, поскольку он просто унаследует все их от A.button . Что нам нужно сделать, это перезаписать некоторые значения. Я указал новое свойство box-shadow и перезаписанные свойства красным цветом.
Новый цвет #bbbbbb , вероятно, не очень далеко от #cccccc оригинальной кнопки. Но вы должны верить мне, что эти тонкие настройки делают использование кнопки более элегантным.
Идея состоит в том, чтобы применить тонкие изменения. Поэтому хорошей привычкой является избегать изменения свойств стиля с одного предела на другой только потому, что мы навели курсор мыши на кнопку. То же самое касается цвета шрифта. Мы применяем тонкое, почти невидимое изменение при наведении.
Прижатый
И, наконец, нам нужен третий стиль, который применяется к кнопке при нажатии кнопки мыши. Я экспериментировал с обратным градиентом. Однако кнопка в этом состоянии выглядела намного элегантнее, если бы я просто сделал фон сплошным серым цветом.
Проведя несколько экспериментов с CSS, я определил, что оптимальные стили для всех трех состояний должны выглядеть примерно так, как показано ниже. Пока мы пришли к этим трем стилям:
Конечно, нам не нужно останавливаться на достигнутом. Вы можете продолжить применять дальнейшие изменения, чтобы кнопки соответствовали теме вашего сайта. Но это очень хорошая база для начала.
Пока что мы кратко обсудили код CSS для создания трех разных состояний кнопок. Я даже упомянул свойство линейного градиента в самом первом примере. Но даже если свойство CSS linear-Gradient является стандартом WC3, оно не будет работать в Chrome.
Я хотел найти способ легко создавать градиенты без необходимости определять решения, которые работали во всех браузерах вручную. Более того, мне нужно было решение, которое дало бы одинаковые результаты во всех браузерах . После быстрого поиска в Google я нашел то, что искал.
CSS-градиент кода для фона кнопок был создан с помощью этого чрезвычайно мощного онлайн- инструмента CSS-градиента . Это гарантирует, что градиент выглядит одинаково во всех браузерах. Кроме того, вы можете просто скопировать и вставить сгенерированный код в ваш файл CSS.
Вместо того, чтобы загромождать страницу списком исходного кода для всего CSS, позвольте мне дать вам ссылку на фактический файл button.css, который описывает стили, которые мы обсуждали в этом разделе.
Скачать buttons.css
Теперь, когда мы определили A.button , .Hover и .Pressed, мы можем использовать jQuery для программирования логики наших кнопок. Мы обсуждали события jQuery ранее в книге. Но в дополнение к событиям мы будем использовать методы jQuery .addClass и .removeClass для динамического добавления и удаления классов CSS, которые мы только что создали, когда происходит событие мыши (например, mouseover ).
Прикрепление событий мыши к кнопкам
Давайте рассмотрим очень простую систему событий jQuery, которая будет переключать CSS-классы наших кнопок в зависимости от того, находится ли мышь в нажатом или выключенном состоянии.
$ (документ). готов (функция () {
// Что должно происходить со всеми элементами .button, когда мышь находится над элементом?
( «Кнопка«) . $. наведение мыши (function () {
// Добавить .Hover
$ (это). addClass («Hover»);
});
// Что должно происходить со всеми элементами .button, когда мышь находится за пределами элемента?
( «Кнопка») . $. mouseout (function () {
// Удалить .Hover, а также удалить .Pressed, если он присутствовал в предыдущем действии.
$ (это). removeClass («Hover»). removeClass («нажата»);
}
// Что должно происходить со всеми элементами .button при нажатии кнопки мыши?
( «Кнопка») . $. mousedown (function () {
// Добавить класс .Pressed
$ (это). addClass («нажата»);
}
// И наконец, что происходит, когда мышь отпущена?
( «Кнопка») . $. mouseup (функция ()
{
// Удалить класс .Pressed
$ (это). removeClass («нажата»);
});
}); // Конец $ (документ) .ready
Мы просто связали события mouseover , mouseout , mousedown и mouseup с ранее созданными стилями кнопок CSS и позаботились о всех особых случаях. Например, обратите внимание, что событие mouseout также удаляет класс .Pressed с кнопки. Это необходимо, потому что, когда курсор мыши покидает элемент кнопки из нажатого состояния, важно снова вернуть кнопку в ее стиль по умолчанию. Если бы мы этого не сделали, кнопка продолжала бы выглядеть так, как будто она все еще нажата, даже если на ней больше нет курсоров мыши.
Выполнение этого кода внутри $ (document) .ready (…) важно, потому что нам нужно присоединить эти события только один раз. Мы используем .addClass и .removeClass соответственно внутри каждого обратного вызова .
С этого момента вы можете физически изменять стиль CSS каждой кнопки, и функциональность останется прежней. Если вам нужно, чтобы кнопки выглядели не так, как в этом примере, вы легко сможете изменить их, не теряя функциональность события.
И, наконец, вот полная рабочая демонстрация.
Посмотреть демонстрацию кнопок CSS
Найти больше в моей книге учебников jquery