<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Стилизация select на JavaScript

Стилизация select на JavaScript

Кто серьёзно занимается вёрсткой страниц, знает, что возможности стилизации select в CSS крайне сильно ограничены. Но очень часто в дизайн стандартный select не вписывается вообще никак, поэтому приходится делать стилизацию select через JavaScript. Фактически, в этой статье мы с Вами создадим свой собственный select с помощью JavaScript.

Есть масса готовых плагинов, в том числе и на jQuery, которые позволяют всё это сделать. Но если Вам не нужно что-то сверхсложное, то проще сделать всё самому с нуля на чистом JavaScript.

Первым делом, давайте создадим HTML-структуру нашего будущего select:

<form name="form" action="#" method="post">
  <noscript>
    <select name="my_select">
      <option value="1">Элемент 1</option>
      <option value="2">Элемент 2</option>
      <option value="3">Элемент 3</option>
    </select>
  </noscript>
  <div class="select">
    <p data-value="1" onclick="select(this)" class="active">Элемент 1</p>
    <p data-value="2" onclick="select(this)">Элемент 2</p>
    <p data-value="3" onclick="select(this)">Элемент 3</p>
    <input type="hidden" name="my_select" id="my_select" value="" />
  </div>
</form>

Как видите, тега select тут и близко нет. Теперь мы можем как угодно стилизовать наш собственный select с помощью CSS:

.select {
  background-color: #0ee;
  border-radius: 10px;
  padding: 10px 0;
  width: 200px;
}
.select p {
  cursor: pointer;
  margin: 0;
  padding: 5px 20px;
}
.select p.active {
  background-color: #ee0;
}

Безусловно, Вы здесь можете сделать всё, что пожелаете. И, наконец, надо превратить внешний вид в функциональность select, то есть выбор и подстветка только одного элемента из нескольких, а также последующая отправка вместе с формой. Для этого мы воспользуемся JavaScript:

function select(element) {
  var value = element.getAttribute("data-value"); // Считываем значение выбранного элемента
  var nodes = element.parentNode.childNodes; // Получаем все остальные элементы
  for (var i = 0; i < nodes.length; i++) {
    /* Отфильтровываем посторонние элементы text и input */
    if (nodes[i] instanceof HTMLParagraphElement) {
      /* Добавляем active у выбранного элемента, стирая данный класс у всех остальных */
      if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
      else nodes[i].className = "";
    }
  }
  document.getElementById("my_select").value = value; // Устанавливаем в hidden-поле выбранное значение
}

Ключевым моментом реализации функциональности select является hidden-поле, в которое записывается значение из нашего select. И именно это значение будет отправлено при отправке формы.

Вот таким нехитрым образом делается абсолютно любая стилизация select на JavaScript. Если использовать jQuery, то код будет ещё проще.

Безусловно, стандартный select обладает большей функциональностью. Например, он реагирует на tab, также можно в нём перебирать элементы стрелками на клавиатуре. Но всё это Вы так же можете реализовать при необходимости на JavaScript.

И последняя рекомендация. В коде был использован тег noscript, и это было неслучайно. Поскольку не у всех JavaScript включён, и чтобы форма была вообще рабочей для таких пользователей, нужно вывести хотя бы стандартный select. А все, у кого JavaScript включён, увидят наш красивый select.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

lev_100rus lev_100rus 22.09.2013 15:37:09

Когда Вы дизайн сайта поменяете? Говорили, что летом, но уже сентябрь и всё как было, так и есть. А то старый приелся уже, неудобен, да и вёрстка чего-то ломается в некоторых местах.

Ответить

Admin Admin 01.10.2013 21:24:04

Было много другой работы. Сам хочу давно сменить, но пока всё некогда.

Ответить

lev_100rus lev_100rus 27.09.2013 16:58:55

Михаил, а что такое data-value? data-description, data-title и прочее? Где можно почитать, или Вы сами объясните?

Ответить

Admin Admin 27.09.2013 21:45:16

Это data-* аттрибуты html5. Они тут исключительно для удобства и упрощения использования js.

Ответить

EvgeTrofi EvgeTrofi 09.08.2014 22:04:30

Спасибо за помощь! Отличная статья!

Ответить

qwer23 qwer23 10.11.2015 11:10:52

Здравствуйте, подскажите, данный способ уже не актуален? у меня сворачивание-разворачивание не работает(

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.