HTML 5 Custom Controls - PullRequest
Новая
       8

HTML 5 Custom Controls

2 голосов
/ 15 июля 2011

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

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

Тогда, как насчет полос прокрутки?Они сложны и содержат более одного изображения для каждого состояния.

С уважением,

Ответы [ 2 ]

3 голосов
/ 15 июля 2011

Для элементов управления формы;используйте псевдоклассы :active и :hover в CSS и замените фон кнопок и элементов формы изображениями.В этом превосходном учебном пособии вы руководствуетесь созданием настраиваемой формы поиска с использованием HTML5 и CSS3 с помощью этих методов.

Для полос прокрутки либо вообще не изменяйте их стиль (особенно если выговорить о полосах прокрутки окна просмотра, так как они являются частью браузера , а не вашего сайта, и пользователи ожидают, что они будут выглядеть определенным образом. Если вам абсолютно необходимо изменить их, просто используйте постепенно улучшающийся JavaScript (возможно, используяjQuery), чтобы сначала скрыть полосы прокрутки (настройка overflow: hidden), затем вставить button и input type="range" (или не-HTML5 элементы, если важна поддержка браузера) в DOM, стилизовать их так, как вы хотите, и перехватить их click события для прокрутки любой нужной прокрутки. много плагинов jQuery, которые делают это для вас .

2 голосов
/ 15 июля 2011

Часто вам приходится накладывать слои над этими элементами управления или создавать элементы управления с нуля. Глядя на то, как JQuery UI отображает определенные элементы управления, можно понять, как это можно сделать. Самый простой способ - просто использовать пользовательский интерфейс JQuery и использовать themeroller или настраиваемый CSS для стилизации элементов управления. Нелегко выполнить некоторые из этих задач самостоятельно.

http://jqueryui.com/

...