Записки самоучки

Август 12, 2006

OPTION disabled в IE. Решение или компромис?

Filed under: Броузеры,Глюки,Это жизнь — 4matic @ 2:24 пп

Как оказалось IE — это единственный броузер, который не обрабатывает ситуацию, когда <OPTION disabled>. Я когда-то об этом слышал, но не мой мозг не принял эту информацию, как важную. Так как я человек ленивый, и времени практически нет, то я сразу же прогугилил сабж. И сразу же нашел информативную статью, которая описывает ситуацию, в которую попадет кодер, когда он решит в ИЕ организовать подобное сабжу. Адрес ссылки Select, Option, Disabled And The JavaScript Solution

Процитирую только основные моменты:

    • Суть проблемы:

    • Attempt: use the CSS pseudo :hover against the <option> element.
      Problem: Internet Explorer doesn’t support the :hover pseudo class on arbitrary elements.
    • Attempt: Wrap the contents of the <option> element in an anchor and use the :hover on that instead.
      Problem: The <select> tag is considered a replaced element, which means the tag is replaced with your operating systems equivalent. As a by product, no other HTML element is valid within the <option> tag.
    • Attempt: Use the JavaScript onmouseover and onmouseout events on the <option> element to make the element appear as though it was disabled.
      Problem: Internet Explorer doesn’t support the onmouseover and onmouseout events against an <option> element.
    • Attempt: Use the JavaScript onclick event on the <option> element to check if the disabled attribute has been applied, act accordingly if it has been.
      Problem: Again, Internet Explorer doesn’t support the onclick event againt the <option> element.
    • Attempt: Use the JavaScript onclick event against the <select> element, to again check if an <option> has the disabled attribute in use.
      Problem: Internet Explorer doesn’t support the onclick event against a <select> element.
    • Решение:
      To make this work, an event and two functions are used. They are listed here so you can glance over them:

      
      window.onload = function() {
      if (document.getElementsByTagName) {
      var s = document.getElementsByTagName("select");
      if (s.length > 0) {
      window.select_current = new Array();
      for (var i=0, select; select = s[i]; i++) {
      select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }
      select.onchange = function(){ restore(this); }
      emulate(select);
      }
      }
      }
      }
      

      The restore function returns the selected item to its previous selection, if the newly selected item is disabled.

      
      function restore(e) {
      if (e.options[e.selectedIndex].disabled) {
      e.selectedIndex = window.select_current[e.id];
      }
      }

      The emulate function changes the font colour of all options in a <select> element with the disabled attribute set. The colours used on lines 4 and 7 are CSS2 colour names, which are considered system colours. System colours reflect what your current computer settings are, so they should change with your current desktop theme (at least that is my interpretation of it).

      
      function emulate(e) {
      for (var i=0, option; option = e.options[i]; i++) {
      if (option.disabled) {
      option.style.color = "graytext";
      }
      else {
      option.style.color = "menutext";
      }
      }
      }

Перейдя по указнной выше ссылке, вы можете прочесть весь ход мыслей автора решения, а так же комментарии с подобными решениями. Я бы хотел озвучить минусы данного решения. Я считаю, что данный вариант — это компромис, а не решение проблемы. Решение одно — это полная эмуляция работы выпадающего списка. Объясню, почему я так думаю.

Очень часто люди бывают невнимательными. То ли человек забегался, то ли над душой кто-то стоит, но очень часто невнимательность — это следствие уверенности в действиях, доведенных до автоматизма. Пример для понимания — данная ситуация. Человек открывает выпадающий список, видит, что некоторые элементы затенены, а некоторые нет. 50 на 50,что человек понимает, что затемненные элементы — недоступны для выбора. А, ведь, действительно — это правда: элемент в данный момент доступен для выбора. Под выбором я подразумеваю момент, когда список раскрыт, и, наведя мышь, элемент становится подсвеченным, т.е. по нему можно кликнуть и выбрать. Другими словами клиенту позволено ошибиться, что бы ошибку исправила программа. Клиент не знает, что будет дальше, он на автомате выбирает то, что ему нужно и доступно. При данном решении клиент выбирает, что ему надо; и он может не обратить внимание, что реально выбранное им значение было изменено на предыдущее.

Я считаю, что интерфейс должен быть максимально информативным и интуитивным для клиента в каждый момент времени. Что бы клиент не работал с интерфейсом методом проб и ошибок, что бы процесс автоматизации пользователя был основан на личном опыте, а не на логике программиста, который создал интерфейс.

Я понимаю, что автор решения хотел сделать быстрое, простое решение. Я понимаю, что данное решение может быть применено в миллионах интерфейсах, но я так же понимаю, что данное решение может вызвать большое кол-во ошибок.

Применительно к моей ситуации. Клиент отмечает строки в корзине, и выбирает, что сделать с выбранными позициями. Мой выпадающий список содержит варианты: «Удалить выбранные позиции из корзины», «Отправить выбранные позиции в заказ». Причем, в заказ нельзя отправлять товар с нулевым количеством, т.е. когда клиент отметил строки с нулевым количеством – отправка в заказ должна быть невозможной. Если я воспользуюсь вариантом, предложенным автором, то есть шанс, что позиции, которые должны быть удалены – попадут в заказ.

Я сначала принял решение автора, но потом подумал и решил, что я буду оставлять в списке только те элементы, которые могут быть доступны для каждой конкретной ситуации. Конечно, может возникнуть ситуация, когда пользователь выделит позиции с нулевым количеством, и будет упорно искать способ отправить позиции в заказ. В процессе поиска он найдет текст, в котором написано, что нужно сделать, что бы отправить позиции в заказ. Я понимаю, что это не лучший вариант решения – это опять компромисс. Но этот компромисс позволит избежать последствия ошибок, которые может вызвать клиент, работая с корзиной на автомате.

Еще я подумал, что у многих клиентов может быть склероз, и они будут постоянно забывать, почему пропала кнопка отправки заказа. Я сейчас думаю, как дать понять клиенту, что нужно сделать, что бы отправить заказ. Я не думаю над тем, что мне сделать, что бы в ответ на неправильные действия клиента программно исправлять его ошибки или постоянно выдавать предупреждения.

P.S. Не воспользовался решением полной эмуляции списка, потому что слишком много ньюансов для полной и корректной эмуляции + время + ресурсы.

3 комментария »

  1. воть и я к этим граблям пришел🙂
    Слава великому ИЕ!

    комментарий от Azazel — Январь 30, 2008 @ 12:29 пп

  2. и я))
    я нашел решение проще (для конкретно, моего случая)

    var old_option=false;//внешняя переменная для хранения «option’a»

    var form = document.getElementById(«ID»);//форма

    if(«условие») {old_option = form.my_select[3];form.my_select.removeChild(form.my_select[3]);}
    else {if(old_option){form.my_select.appendChild(old_option);old_option=false;}}

    где, my_select имя «селекта», [3] позиция элемента «option» в my_select.
    Конечно, не очень красиво, но задачу решил)

    комментарий от vito — Ноябрь 13, 2008 @ 4:35 пп

  3. http://www.inquirium.net/blog/entry_157.php
    гляньте сюда, решение проблемы с помощью

    комментарий от alexykot — Март 13, 2009 @ 1:19 пп


RSS feed for comments on this post. TrackBack URI

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

Блог на WordPress.com.

%d такие блоггеры, как: