[Плагин] Красивый <select> от JS - Форум администраторов игровых серверов
Форум администраторов игровых серверов StormWall - Защита от DDos атак
Регистрация Мнения Справка Пользователи Календарь Все разделы прочитаны
Вернуться   Форум администраторов игровых серверов > Полезное / Common > Программирование / Programming > PHP

PHP Форум как для начинающих программистов на PHP так и для профессионалов этого дела. Если нужно создать скрипт, функцию и т.д, но не знаете как, спросите у нас и мы вам подскажем. Здесь вы найдете примеры скриптов которые вы сможете использовать на сайтах своих серверов (онлайн, регистрация, семь печатей, топ игроков). Так же много книг и статей.
Описание темы:наподобие win8 (шара)

Ответ
Опции темы
Непрочитано 02.03.2013, 15:24   #1
Аватар для Dementor
Герой

Автор темы (Топик Стартер) [Плагин] Красивый <select> от JS




Создавал свой текстовый редактор и решил создать к нему красивый тэг <select> на основе JaveScript. Плагин работает с поддержкой jQuery (моя текущая версия 1.9.1). Я подробно расскажу как им пользоваться.

1. Вместо привычного тега <select> мы создадим следующие:

Сюда мы записываем значение нашего select (он скрыт). Обратите внимание! Значение атрибута id имеет значение 'name_value', где name - это имя ID-а нашего select-а, а '_value' - это обязательная приставка для различия и родственности!
Код HTML:
<input type="hidden" id="name_value">
А это и есть наш select с именем ID-а 'name'.
Код HTML:
<div id="name" class="select"></div>
Классу 'select', который мы так же указали выше, назначим основной стиль тега select.

 
/* оформляем всех select (это уже есть в архиве) */
.select { 
	cursor: default;
	height: 16px;
	font-size: 11px;
	font-family: Tahoma;
	background-color: #fff;
	padding: 0px 5px 0px 5px;
	border: 1px solid #fff;
	background-image: url([url]http://127.0.0.1/DEVOLOPERS/editor/arrowSelect.png);[/url]
	background-repeat: no-repeat;
	background-position: 100% 0%;
}
 
.select:hover { border: 1px solid #316ac5; background-position: 100% 50%; }
.select:active { background-position: 100% 100%; }
 
Code: CSS

Но если Вы хотите назначить определенный стиль конкретному селекту,
то просто создайте id в стилях с именем id-а вашего select-а, он заменит стиль.
Пример:


 
#name {
	cursor: pointer;
	background-color: #00ff00;
	...
}
 
Code: CSS

2. Далее мы должны создать наш select для JS и внесьти в него значение с именами


 
/* создали массив значение=>имя */
var nameOptions = [];
nameOptions['val_1'] = 'Вариант 1';
nameOptions['val_2'] = 'Вариант 2';
nameOptions['val_3'] = 'Вариант 3';
nameOptions['val_4'] = 'Вариант 4';
nameOptions['val_5'] = 'Вариант 5';
nameOptions['val_6'] = 'Вариант 6';
nameOptions['val_7'] = 'Вариант 7';
nameOptions['val_8'] = 'Вариант 8';
nameOptions['val_9'] = 'Вариант 9';
nameOptions['val_10'] = 'Вариант 10';
 
/* создаем select
1 арг. - значение имя тега по умолчанию для пользователей
2 арг. - имя идентификатора (ID) нашего select'а
3 арг. - имя массива со нашими значениями
4 арг. - ширина тега
5 арг. - длина выкатного поля (поле с вариантами, которое выкатывается при клике)
6 арг. - код для исполнения (альтернатива событию onChange, т. к. его нельзя использовать здесь)
7 арг. - если true - то выбранный вариант будет выделяться (т. е. ему будет назначен стиль, и пользователь будет видеть выбранный вариант).
         Если false - то будет происходить просто изменение значения, но какой вариант вы выбрали, он не будет отображать.
*/
tagSelect('Выберите вариант', 'name', nameOptions, 40, 150, "my_function('value')", true);
 
Code: Javascript

3. Рассмотрим оформление "вариантов" и "выбранного варианта" (оно так же уже присутствует в архиве)


 
/* select_options_field, select_var - это зарезервированные имена! */
 
/* оформляем поле с вариантами */
#select_options_field { 
	position: absolute;
	border: 1px solid #0000ff;
	margin: 3px 0px 0px -6px;
	background-color: #fff;
	padding: 2px;
	/* height: 150px; */
	/* width: 100px; */
	overflow-y: scroll;
	cursor: default;
	display: none;
}
 
/* оформляем "вариант" */
#select_var { padding: 1px 5px 1px 5px; font-size: 14px; }
#select_var:hover { border: 1px solid #316ac5; background-color: #c1d2ee; color: #316ac5; }
#select_var:active { background-color: #98b5e2; }
 
/* оформляем "выбранный вариант" */
#select_var_pick { padding: 1px 5px 1px 5px; font-size: 14px;background-color: #BBDAEE; } 
 
/* 
А теперь внимание! Если Вы хотите оформить конкретные "варианты/выбранный вариант" select-а, 
то Вы создаете новый класс с именем основным именем + '_for_{ID}', где ID = идентификатор Вашего селекта
Пример:
.select_options_field_for_{ID} { !important }
.select_var_for_{ID} { !important }
.select_var_for_{ID}:hover { !important }
.select_var_for_{ID}:active { !important }
Так же не забывайте указывать "!important" !!! Иначе изменение стиля не произойдет!
*/
 
Code: CSS

Ну вроде бы и все! Скрипт проверен в IE. Если есть какие-то вопросы задавайте здесь.

Скриншот (выкат плавный):

Dementor вне форума Ответить с цитированием
Сказали спасибо:
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Красивый дизайн сайта flaksa Движки сайтов (CMS) 2 25.03.2013 00:18
[Продам] Красивый дизайн сайта flaksa Рынок / Marketplace 3 13.02.2013 19:31
Продам красивый дизайн с flash Fen1ks_1 Рынок / Marketplace 0 17.03.2011 19:21
[Продам] Красивый Дизайн На Тему Lineage2 AlexDiFi Рынок / Marketplace 13 27.12.2010 21:30
[Продам] Красивый дизайн в светлых тонах PekpyT Рынок / Marketplace 2 04.06.2010 16:35


© 2007–2024 «Форум администраторов игровых серверов»
Защита сайта от DDoS атак — StormWall
Работает на Булке неизвестной версии с переводом от zCarot
Текущее время: 03:22. Часовой пояс GMT +3.

Вверх