Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Разные стили в нутри OPTION 
:(
    Опции темы
Gold Dragon
Дата 22.10.2014, 12:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71



Есть к примеру код
Код

<select id="oi_list_change" name="oi_list_change">
<option value="8">[ID:8] ВП-400 : гт</option>
<option value="9">[ID:9] ВП-540 : гт</option>
<option value="179">[ID:179] ВП-509 : ки</option>
<option value="180">[ID:180] ВП-514 : ки</option>
<option value="261">[ID:261] АРМ-1 : ки</option>
<option value="262">[ID:262] АРМ-2 : ки</option>
</select>

Необходимо [ID:xxx] сделать другим стилем, например другим цветом.

Вопрос: как?


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
BaNru
Дата 24.10.2014, 01:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 13
Регистрация: 20.9.2014

Репутация: 1
Всего: 1



На CSS нельзя по "тексту" что-то менять.
Вот по value можно
Код
option[value="180"] {
   color:red;
}


Если тебе надо именно по тексту, то это на JS только
http://jsfiddle.net/BaNru/za689v00/ (оба варианта)

Или вот поправил, чуть упростил:
http://jsfiddle.net/BaNru/za689v00/1/

Это сообщение отредактировал(а) BaNru - 24.10.2014, 01:41
PM MAIL   Вверх
_zorn_
Дата 24.10.2014, 01:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 2
Всего: 12



Я думаю тут имеется ввиду стиль на часть текста в оптион.
Например "[ID:8]" красным, а  "ВП-400 : гт" синим.
PM MAIL   Вверх
Gold Dragon
Дата 24.10.2014, 07:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71



Цитата(_zorn_ @  24.10.2014,  02:55 Найти цитируемый пост)
Я думаю тут имеется ввиду стиль на часть текста в оптион.
Например "[ID:8]" красным, а  "ВП-400 : гт" синим. 
Именно! ... вроде так и написал smile

Цитата(BaNru @  24.10.2014,  02:38 Найти цитируемый пост)
На CSS нельзя по "тексту" что-то менять.
не факт, но всё равно без разницы как: хоть на JS, хоть ещё как-то

Есть мысль превратить конструкцию в <ul><li>, но что-то навороченное слишком получается, да и остальной код придутся "латать"



--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
_zorn_
Дата 24.10.2014, 10:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 2
Всего: 12



Можно например так http://jsbin.com/jevagigile/edit?html,css,js,output
Думаю принцип будет понятен.
Код

selects[i].style.display = 'none';
 специально закомментил чтобы понятнее было что происходит

PM MAIL   Вверх
Gold Dragon
Дата 24.10.2014, 12:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71



_zorn_, +1!!! Именно то что искал и хотел...!




--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 24.10.2014, 12:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71



и даже меняет индекс у option smile думал допиливать нужно...

И в качестве развития мысли, хочу (что уж теперь, гулять так гулять smile )
1. Сделать это в виде плагина для jQuery
2. Сделать возможность задавать шаблон (регулярку)

Попробую сам конечно, о не откажусь от помощи.. Не так силён в JS как в PHP  smile 

Можно, например активировать как-то так
Код

$('select#oi_list_change').zornplugin({
       apply : 'style'
});

или
Код

$('select#oi_list_change').zornplugin({
       apply    : 'regular',
       pattern : '\[ID:\d+\]\s*',
       class     : 'dropdown-wrapper'
 });


Это сообщение отредактировал(а) Gold Dragon - 24.10.2014, 12:32


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
_zorn_
Дата 28.10.2014, 04:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 2
Всего: 12



jQuery только недавно начал изучать  smile 
Ну попробую наваять smile
PM MAIL   Вверх
_zorn_
Дата 28.10.2014, 08:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 2
Всего: 12



Готово. Можно еще всяких эффектов навесить вместо обычного toggle но я уже не стал заморачиваться.


Присоединённый файл ( Кол-во скачиваний: 2 )
Присоединённый файл  zbs.rar 1,29 Kb
PM MAIL   Вверх
Gold Dragon
Дата 6.11.2014, 14:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71



_zorn_, всё просто СУПЕР!!!
всё очень просто и главное работает  smile

Добавлено через 7 минут и 10 секунд
маленькое замечание.. при потере фокуса или вызове другого SELECT, текущий должен свернуться.. Как правильно это организовать?


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
_zorn_
Дата 7.11.2014, 03:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 2
Всего: 12



При раскрытии списка запоминать открываемый список в переменную которая изначально пустая.
Соответственно перед раскрытием, если она не пустая, скрывать.


Присоединённый файл ( Кол-во скачиваний: 3 )
Присоединённый файл  zrn.beauty.select.js.rar 0,65 Kb
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1201 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.