Покращуємо елемент select

При роботі над проектом кожен розробник прагнути отримати однаковий вигляд сайту в різних браузерах. На жаль, більшість основних елементів - стандартні органи управління браузера - майже завжди важко стилізувати.

В даному уроці ми побудуємо скрипт, який буде перетворювати звичайний елемент select в більш стильний і функціональний орган управління.

Почнемо з розмітки HTML. в даному уроці будемо використовувати розмітку HTML5, яка має деякі корисні особливості, такі як атрибути даних, за допомогою яких можна додавати довільні дані до розмітки на сторінці.

Атрибути data використовуються для об'єднання інформації в елементах option. У них розміщується ікона продукту і текстовий опис з форматуванням. Обидва даних пункту будуть виводитися в поліпшеної версії елемента select.

Довільний атрибут data-skip в першому елементі сигналізує нашому скрипту, що даний пункт не треба включати в генерований список. Ви можете просто перевірити існування атрибутів data-icon і data-html-text і пропустити елемент, якщо потрібно.

Внизу ми включаємо бібліотеку jQuery версії 1.4.3 (останній версії на момент написання уроку) і наш скрипт script.js. який буде розбиратися пізніше.

При обробці події document.ready jQuery перевіряє елемент select. і, використовуючи атрибути даних, будує розмітку, яка додається відразу за елементом select.

Будується невпорядкований список з елементами li. які представляють кожен пункт option з елемента select. А сам елемент select буде представлений елементом div з класом .selectBox.

js / script.js

Після завантаження сторінки, скрипт сканує опції елемента select і генерує розмітку, відповідну атрибутам даних HTML5, які містяться в пунктах елемента select. Так як використовується jQuery 1.4.3, то доступ до значень в даних атрибутах можливий за допомогою методу jQuery data (). Це дійсно корисна опція, яка істотно полегшує доступ до прив'язаним даними.

Оригінальний елемент select зберігається, він буде прихований за допомогою методу hide (). Це важливо, тому що всі зміни відображаються і в ньому. Таким чином, коли ви використовуєте елемент select в формі, значення будуть коректно збережені і передані вашому скрипту-обробника.

Тепер наш код на місці і варто поглянути на код CSS3.

Ми використовували мінімум розмітки HTML для виведення елемента вибору і організації випадають пунктів. Якщо обмежувати проект використанням тільки попередніх CSS3 технологій, то доведеться використовувати значно більше елементів div і span.

css / styles.css

На даний момент множинні фонові зображення підтримуються в Firefox, Safari, Chrome і Opera. Для Internet Explorer і старих версій браузерів, визначається обхідний варіант, який просто виводить звичайний фон. При розборі документа CSS браузер, який не розуміє інструкції для множинних фонових зображень, просто ігнорує їх і використовує звичайний варіант.

Властивість box-sizing. яке використовується в класі .dropDown. визначає, як рамочка додається до загального розміру елемента. Зазвичай рамочка збільшує загальну ширину елемента на 2px і руйнує все вирівнювання. Присвоївши властивості box-sizing значення border-box. ми запобігаємо збільшення загальної ширини, так як рамочка буде розміщуватися всередині елемента.

висновок

В даному уроці продемонстровані деякі особливості jQuery 1.4.3 і CSS3. Розроблений скрипт зберігає оригінальний елемент select на сторінці і змінює його відповідно до дій користувача. Таким чином, форма містить правильні значення, які можуть бути коректно оброблені іншими частинами проекту.

Сьогодні ми хотіли б поділитися кількома ідеями стосується ефекту блочного розкриття, яку ви можете використовувати для своїх проектів.

Якщо ви хочете істотно підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки уберегтися від цілого ряду хакерських атак, а й організувати перенаправлення, а також вирішити завдання пов'язані з кешем.

Material Design - це набирає обертів тренд від Google. У даній збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.

Ефекти на те й існують щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.

Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб дизайнерів за минулий місяць.

businessmilliarder

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!