Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2012, 17:02
Интересующийся
Отправить личное сообщение для klev2004 Посмотреть профиль Найти все сообщения от klev2004
 
Регистрация: 05.04.2012
Сообщений: 25

Изображения в <select>
Занимаюсь реализацией выпадающего списка флагов стран. За основу взял идею отсюда:
http://archives.kh.ua/battle1.htm
Немного переиначил под себя и исправил вывод изображения в поле сразу после открытия страницы. Но вот обнаружил досадную проблему - изображения в выпадающем списке видно только в FF. В IE, Opera и GC не работает.
Помогите найти решение проблемы.

<style type="text/css">
    .icon {
        height: 36px;
        width:  36px;
        background-repeat: no-repeat;
        padding-top: 1px;
        padding-bottom: 1px;
        background-position: right;
    }


</style>

<script type="text/javascript" language="javascript">
 function doIcon( pVal)
 {
  var obj = document.getElementById( 'imgCombo');
  var img = 'imgselect/' + pVal + '.gif';
  obj.style.background = "url( '" + img + "') no-repeat";
 }
</script>

<form>
 <select id='imgCombo' onChange="javascript: doIcon( this.value );" style="width: 65px;" class="icon">
                 <option style="background-image: url(imgselect/01.gif);" class="icon" value="01">2</option> 
                 <option style="background-image: url(imgselect/02.gif);" class="icon" value="02">3</option> 
                 <option style="background-image: url(imgselect/03.gif);" class="icon" value="03">4</option>
                 <option style="background-image: url(imgselect/04.gif);" class="icon" value="04">5</option>
                 <option style="background-image: url(imgselect/05.gif);" class="icon" value="05">4</option>
                 <option style="background-image: url(imgselect/06.gif);" class="icon" value="06">4</option>
 </select>
</form>
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2012, 17:11
Аватар для Джэксон
Аспирант
Отправить личное сообщение для Джэксон Посмотреть профиль Найти все сообщения от Джэксон
 
Регистрация: 21.05.2012
Сообщений: 89

Скажите, а зачем переделывать то, что уже работает?
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2012, 17:30
Интересующийся
Отправить личное сообщение для klev2004 Посмотреть профиль Найти все сообщения от klev2004
 
Регистрация: 05.04.2012
Сообщений: 25

Сообщение от Джэксон
Скажите, а зачем переделывать то, что уже работает?
Оно работает только в Firefox. В остальных браузерах не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2012, 17:43
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

klev2004,
Проще делать список через li - c занесением по клику кода флага в единственный input type=text , a c li мон выпендривацо как угодно и фоном флажки или рядом изо
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2012, 18:35
Интересующийся
Отправить личное сообщение для klev2004 Посмотреть профиль Найти все сообщения от klev2004
 
Регистрация: 05.04.2012
Сообщений: 25

Такое чувство, что параметр background: url(...); не должен работать в <select><option>
Кто что скажет по этому поводу?

Найдено такое свойство:
select
{
-webkit-appearance: none;
}
Благодаря ему, изображение стало показываться в select в свернутом виде. В открытом списке выбора изображений все еще нет.

Последний раз редактировалось klev2004, 15.06.2012 в 18:38.
Ответить с цитированием
  #6 (permalink)  
Старый 15.06.2012, 18:41
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от klev2004
Дизайн предполагает именно выпадающий список флагов.
Интересно как если браузер не поддерживает эту возможность?
Чем вам методика использующаяся в джиквери ui не подходит?
Делаете выпадающий список или что там у вас обеспечивающее функциональность без подключения js,а затем стилизуете его заменой на li и селекторов css если необходимо

Последний раз редактировалось dmitriymar, 15.06.2012 в 18:46.
Ответить с цитированием
  #7 (permalink)  
Старый 15.06.2012, 19:29
Интересующийся
Отправить личное сообщение для klev2004 Посмотреть профиль Найти все сообщения от klev2004
 
Регистрация: 05.04.2012
Сообщений: 25

dmitriymar, спасибо за наводку, пока не понимаю о чем говорите, погуглю.
Ответить с цитированием
  #8 (permalink)  
Старый 15.06.2012, 19:31
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

мне кажется об этом:
http://harvesthq.github.com/chosen/
Ответить с цитированием
  #9 (permalink)  
Старый 15.06.2012, 20:32
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

http://www.books.ru/books/jquery-pod...script-619339/
книга есть в свободной скачке
раздел jquery UI -там есть подробное описание как в джиквери организовываются подобные пользовательские элементы -рассматривается общий механизм их формирования без привязки к джиквери
Ответить с цитированием
  #10 (permalink)  
Старый 15.06.2012, 20:53
Аватар для cmd
cmd cmd вне форума
Профессор
Отправить личное сообщение для cmd Посмотреть профиль Найти все сообщения от cmd
 
Регистрация: 19.03.2011
Сообщений: 177

<select> редендится браузером и применять к нему какие-то свойство (даже элементарные свойства css) часто-густо бесполезно некроссбраузено. Гуглите "имитация select" или типа того, если хотите посмотреть рабочие примеры.
__________________
Cogito, ergo sum
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DropDown menu в части изображения Hardip Элементы интерфейса 1 20.04.2012 00:20
Проблема: Jquery - эффект раскрытия LightBox для изображения. woody2 jQuery 0 16.09.2011 00:10
Проверка размера изображения Bizarre Общие вопросы Javascript 4 09.03.2011 18:02
отрисовка изображения по произвольным координатам Th0m@$ Events/DOM/Window 14 23.01.2010 16:04
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28