Xpoint
   [напомнить пароль]

Иконки у элементов меню типа checkbox

2006-03-16 15:53:57 [обр] Денис Ибаев aka Dionys [досье]

Я создаю меню с чекбоксами:

<menupopup>
  <menuitem id="google-search-checkbox"
      label="Google"
      class="menuitem-iconic"
      type="checkbox"
      checked="true"/>
  <menuitem id="yahoo-search-checkbox"
      label="Yahoo"
      class="menuitem-iconic"
      type="checkbox"
      checked="true"/>
</menupopup>

Указываю для элементов меню стиль:

#google-search-checkbox {
    list-style-image: url("chrome://extension/skin/google_icon.gif");
}
#yahoo-search-checkbox {
    list-style-image: url("chrome://extension/skin/yahoo_icon.gif");
}

После чего у элементов меню появляются иконки, но они закрывают собой флажки, и становится не видно какой из флажков выставлен. Как сделать, чтобы флажки не перекрывались иконками? А еще лучше, как переместить флажки на правую сторону пунктов меню?

спустя 20 минут [обр] Владимир Палант [досье]

Боюсь, что прямыми способами это не реализуется. Эти флажки как раз и есть картинки, которые отображаются рядом с пунктом меню. Обычно вы можете их разве что заменить, но не добавить собственные. Ну разве что воссоздать анонимное содержимое menuitem:

<menuitem id="google-search-checkbox"
    type="checkbox"
    checked="true">
  <hbox class="menu-iconic-left">
    <image class="menu-iconic-icon"/>  <!-- флажок -->
  </hbox>
  <image class="menu-icon"/>           <!-- собственная картинка -->
  <label value="Google" class="menu-iconic-text" flex="1" crop="right"/>
</menuitem>

И в стилях:

#google-search-checkbox .menu-icon {
  list-style-image: url("chrome://extension/skin/google_icon.gif");
}

Но реально стилей потребуется больше, чтобы всё это нормально выглядело. И при этом ведь нет гарантии, что анонимное содержимое menuitem не изменится, к примеру в других ОС флажок может быть как раз с другой стороны — а у вас он уже будет всегда слева. О других версиях браузера я и вовсе молчу.

спустя 27 минут [обр] Денис Ибаев aka Dionys [досье]
Это плохо. А есть ли стандартный способ указать что флажок установлен? Я вижу только такой: менять вид иконки.
спустя 42 минуты [обр] Владимир Палант [досье]

Не понял вопрос. Может цитата из chrome://global/skin/menu.css что-то прояснит:

menuitem[checked="true"] {
  list-style-image: url("chrome://global/skin/menu/menu-check.gif");
  -moz-image-region: auto;
}

Вот откуда берется этот флажок, ничего магического в нем нет — просто картинка.

Подумал, что можно добавить вторую картинку и менее криво — выполнить вот этот код на событии load:

var items = document.getElementsByTagName("menuitem");
for (var i = 0; i < items.length; i++) {
  var imageBox = document.getAnonymousElementByAttribute(items[i], "class", "menu-iconic-left");
  if (!imageBox)
    continue;

  var image = document.createElement("image");
  image.className = "menu-icon";
  imageBox.appendChild(image);
}

То есть анонимные ноды оставляем, просто добавляем в одну из них нашу картинку. Но со стилями все равно беда. В menu.css стоит:

.menu-iconic-left {
  min-width: 12px;
}

А вам придется добавить к этим 12px ширину своей картинки, причем желательно из JavaScript — ведь в другом скине стандартное значение может быть другим.

спустя 16 часов [обр] Денис Ибаев aka Dionys [досье]
Я попробывал переместить эту картинку с флажком вправо. Сделал её фоном пункта меню. Вроде нормально отображается, но опять же неизвестно насколько это совместимо с разными версиями.
Powered by POEM™ Engine Copyright © 2002-2005