Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 09.08.06 20:10
Оценка:
Вот собираюсь в следущем билде добавить поддержку "pure menus"

Меню описывается в html так:

<button type="menu">Button with menu
  <menu>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item
      <menu>
        <li>First sub-item</li>
        <li>Second sub-item</li>
      </menu>
    </li>
    <li>Fourth item</li>
  </menu>
</button>


и это самое <menu> может а) содрежать любой markup и б) посредством CSS может быть отстилированно
по всякому.

Вот живые скриншоты:




Меню может содержать также input элементы, например textbox combobox и т.д. См. http://www.terrainformatica.com/htmlayout/screenshots.whtm
за для примера чего еще туда можно поставить.
Ну и всякие например анимированные гифы — это само собой.


Вопрос: Чего еще от меню надо? Какая функциональность еще нужна?

16.12.06 17:09: Перенесено модератором из 'Пользовательский интерфейс: проектирование, usability' — Odi$$ey
Re: Меню в Sciter и HTMLayout
От: adontz Грузия http://adontz.wordpress.com/
Дата: 09.08.06 20:36
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Вопрос: Чего еще от меню надо? Какая функциональность еще нужна?


Я вообще, а не только про функциональность, если можно.

Не нравиться сам принцип выпадания меню из кнопки. Во-первых, это по странно выглядит, потому что кнопки, в отличие от элементов меню верхнего уровня, не прямоугольные. Меню вообще не воспринимается как "нечто из кнопки". Кроме того несколько элементов верхнего уровня в виде кнопок стоящие рядом не воспринимаются как единое целое. Да и кнопка должна нажиматься, а не меню показывать. Если это drop-down button, то надо справа нарисовать треугольничек смотрящий вниз. Надо вобщем что-то придумать с элементами верхнего уровня. ИМХО <span> с подсветкой наведённой мыши и выплывшего подменю (сделаешь ещё один behavior) больше всего подходит.

Во-вторых я не вижу таких, знаешь ли треугольничков на краю элементов из которых что-то выпадает. Не знаю как они правильно называются, но думаю ты понял о чём я.

В-третьих, у элементов меню бывают иконки (что на HTML сделать просто) и клавиатурные комбинации соответствующие элементу
И неплохо бы, чтобы они не просто рисовались, но и работали.

И, в-чертвёртых. Не знаю какую реализацию меню ты используешь, но мне нравится вариант, где выпадающий элемент слегка перекрывает тот из которого выпал.

Иллюстрация к сказанному:
A journey of a thousand miles must begin with a single step © Lau Tsu
Re[2]: Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 09.08.06 20:54
Оценка:
Здравствуйте, adontz, Вы писали:

A>Здравствуйте, c-smile, Вы писали:


CS>>Вопрос: Чего еще от меню надо? Какая функциональность еще нужна?


A>Я вообще, а не только про функциональность, если можно.


A>Не нравиться сам принцип выпадания меню из кнопки. Во-первых, это по странно выглядит, потому что кнопки, в отличие от элементов меню верхнего уровня, не прямоугольные. Меню вообще не воспринимается как "нечто из кнопки". Кроме того несколько элементов верхнего уровня в виде кнопок стоящие рядом не воспринимаются как единое целое. Да и кнопка должна нажиматься, а не меню показывать. Если это drop-down button, то надо справа нарисовать треугольничек смотрящий вниз. Надо вобщем что-то придумать с элементами верхнего уровня. ИМХО <span> с подсветкой наведённой мыши и выплывшего подменю (сделаешь ещё один behavior) больше всего подходит.


1) <button> можно отстилировать как ты сам понимаешь как надо.
2) есть такая вещь как behavior:menu-bar — это оно.

В реале декларация выглядит так:


/*top level menu*/

menu  
{
  behavior:menu-bar;
  flow: horizontal;
}

menu menu,  /* menu inside other menu */
button menu /* menu inside button*/
{
  behavior:menu; /*is a menu*/
  flow: vertical;
    display:none; 
    margin:0;  
    padding:0;
    border:1px solid threedshadow;
  background-color: window; 
}



т.е. menu в руте это menu-bar.

Я кстати добавил в themes поддержку theme:rebar-band со товарищи.


A>Во-вторых я не вижу таких, знаешь ли треугольничков на краю элементов из которых что-то выпадает. Не знаю как они правильно называются, но думаю ты понял о чём я.


Этот шеврон описывается foreground-image
(если я его не сам буду рисовать)


A>В-третьих, у элементов меню бывают иконки (что на HTML сделать просто) и клавиатурные комбинации соответствующие элементу

A>И неплохо бы, чтобы они не просто рисовались, но и работали.

Можно так писать:
<li accesskey="^N"><img src=myicon.png />Caption <span class="accesskey">Ctrl-N</span></li>


Где span.accesskey { display:inline-block: margin-left:100%%; font:... ; color:... }


A>И, в-чертвёртых. Не знаю какую реализацию меню ты используешь, но мне нравится вариант, где выпадающий элемент слегка перекрывает тот из которого выпал.


Ну дык CSS рулез же:
menu menu 
{
  margin-left:1px; /* to offset it from parent li */  
}


margin-left:-2px; сделает то что ты просишь.


A>Иллюстрация к сказанному:

A>
Re: Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 09.08.06 21:59
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Вот собираюсь в следущем билде добавить поддержку "pure menus"


Еще вопрос: тултипы на menu items имеют смысл?
Re[2]: Меню в Sciter и HTMLayout
От: adontz Грузия http://adontz.wordpress.com/
Дата: 09.08.06 22:03
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Еще вопрос: тултипы на menu items имеют смысл?


ИМХО нет.
A journey of a thousand miles must begin with a single step © Lau Tsu
Re[3]: Меню в Sciter и HTMLayout
От: adontz Грузия http://adontz.wordpress.com/
Дата: 09.08.06 22:06
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>1) <button> можно отстилировать как ты сам понимаешь как надо.

CS>2) есть такая вещь как behavior:menu-bar — это оно.

А, ну так сделал бы то что говоришь и получилось бы симпатишнее

A>>Во-вторых я не вижу таких, знаешь ли треугольничков на краю элементов из которых что-то выпадает. Не знаю как они правильно называются, но думаю ты понял о чём я.

CS>Этот шеврон описывается foreground-image
CS>(если я его не сам буду рисовать)

Руками каждый раз добаавлять? Рисуй сам.

CS>
CS><li accesskey="^N"><img src=myicon.png />Caption <span class="accesskey">Ctrl-N</span></li>
CS>


Да, неплохо.

CS>Ну дык CSS рулез же:

CS>
CS>menu menu 
CS>{
CS>  margin-left:1px; /* to offset it from parent li */  
CS>}
CS>

CS>margin-left:-2px; сделает то что ты просишь.

А если места на экране не хватит и меню откроется в другую сторону, эта настройка поменяет знак?
A journey of a thousand miles must begin with a single step © Lau Tsu
Re[3]: Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 10.08.06 01:24
Оценка: +2
Здравствуйте, adontz, Вы писали:

A>Здравствуйте, c-smile, Вы писали:


CS>>Еще вопрос: тултипы на menu items имеют смысл?


A>ИМХО нет.


А где показывать <li title="If you will press this item World will end">Exit</li> ?

Мне почему то кажется что лучше когда эта инфа покажется in-place.

Вообще показывать это в статус бар — слишком далеко от фокуса — это было актально когда мониторы были
80*25 символов. Сейчас уже наверное никто и несмотрит что оно и как оно там мелтешит.
Re[4]: Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 10.08.06 01:27
Оценка:
Здравствуйте, adontz, Вы писали:

CS>>Ну дык CSS рулез же:

CS>>
CS>>menu menu 
CS>>{
CS>>  margin-left:1px; /* to offset it from parent li */  
CS>>}
CS>>

CS>>margin-left:-2px; сделает то что ты просишь.

A>А если места на экране не хватит и меню откроется в другую сторону, эта настройка поменяет знак?


Тогда так напиши.
menu menu 
{
  margin:0 1px; /* to offset it from parent li */  
}

Все в твоих руках короче.
Re: Меню в Sciter и HTMLayout
От: FreshMeat Россия http://www.rsdn.org
Дата: 10.08.06 07:14
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Вопрос: Чего еще от меню надо? Какая функциональность еще нужна?


Все есть или легко добавить — иконки, хоткеи, подчеркивание букв и т.д.
Из пожеланий — хочется чтобы при нехватке места на мониторе
* подменюшки сами раскрывались в левую сторону
* по необходимости появлялись стрелки прокрутки вверх-вниз (для большого меню)
Хорошо там, где мы есть! :)
Re: Меню в Sciter и HTMLayout
От: WinterMute Россия http://yarrr.ru
Дата: 10.08.06 14:41
Оценка:
Так речь идёт о menu, которые показываются слоями или окнами? Последнее былобы полезнее.

Здравствуйте, c-smile, Вы писали:

CS>Вот собираюсь в следущем билде добавить поддержку "pure menus"


CS>Меню описывается в html так:


CS>
CS><button type="menu">Button with menu
CS>  <menu>
CS>    <li>First item</li>
CS>    <li>Second item</li>
CS>    <li>Third item
CS>      <menu>
CS>        <li>First sub-item</li>
CS>        <li>Second sub-item</li>
CS>      </menu>
CS>    </li>
CS>    <li>Fourth item</li>
CS>  </menu>
CS></button>
CS>


CS>и это самое <menu> может а) содрежать любой markup и б) посредством CSS может быть отстилированно

CS>по всякому.

CS>Вот живые скриншоты:


CS>



CS>Меню может содержать также input элементы, например textbox combobox и т.д. См. http://www.terrainformatica.com/htmlayout/screenshots.whtm

CS>за для примера чего еще туда можно поставить.
CS>Ну и всякие например анимированные гифы — это само собой.


CS>Вопрос: Чего еще от меню надо? Какая функциональность еще нужна?
Re[4]: Меню в Sciter и HTMLayout
От: adontz Грузия http://adontz.wordpress.com/
Дата: 10.08.06 20:03
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>А где показывать <li title="If you will press this item World will end">Exit</li> ?


А оно надо?

// Here we increment variable 'x' by one.
x++;


CS>Мне почему то кажется что лучше когда эта инфа покажется in-place.


Мне эта инфа вообще не кажеться сколько-нибудь полезной. если из названия пункта меню не ясно что он делает, то нафиг такой пункт.
A journey of a thousand miles must begin with a single step © Lau Tsu
Re[2]: Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 10.08.06 23:53
Оценка:
Здравствуйте, WinterMute, Вы писали:

WM>Так речь идёт о menu, которые показываются слоями или окнами? Последнее былобы полезнее.


Какая-то умная Маша поменяла урл в оригинальном постинге.

Вот что было:

http://www.terrainformatica.com/htmlayout/images/menus.jpg
Re[2]: Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 10.08.06 23:59
Оценка:
Здравствуйте, FreshMeat, Вы писали:

FM>Здравствуйте, c-smile, Вы писали:


CS>>Вопрос: Чего еще от меню надо? Какая функциональность еще нужна?


FM>Все есть или легко добавить — иконки, хоткеи, подчеркивание букв и т.д.


Это все в HTML+CSS делается. Сам ничего подчеркивать не буду — типа нужно подчеркнуть букву Ш в меню Шапокляк а hotkey должен быть описан как
accesskey="^I".

FM>Из пожеланий — хочется чтобы при нехватке места на мониторе

FM>* подменюшки сами раскрывались в левую сторону
Есть такое дело.

FM>* по необходимости появлялись стрелки прокрутки вверх-вниз (для большого меню)

Стрелок не будет by default но если ты задашь overflow:auto то появится scrollbar (в меню)
ну или сам кто behavior напишет для стрелок.
Re[3]: Меню в Sciter и HTMLayout
От: der Igel Россия  
Дата: 11.08.06 06:05
Оценка: 33 (1) :))
Hello, c-smile!

c> Какая-то умная Маша поменяла урл в оригинальном постинге.


Это не Маша, это Саша. Вчера весь день картинка доступна не была.
Приходится работать телепатом.
Posted via RSDN NNTP Server 2.1 beta
Re[4]: Меню в Sciter и HTMLayout
От: c-smile Канада http://terrainformatica.com
Дата: 11.08.06 06:17
Оценка:
Здравствуйте, der Igel, Вы писали:

DI>Hello, c-smile!


c>> Какая-то умная Маша поменяла урл в оригинальном постинге.


DI>Это не Маша, это Саша. Вчера весь день картинка доступна не была.

DI>Приходится работать телепатом.

На самом деле спасибо большое (с меня пузырь) — хостер канадский с админами сидящими в Бангалоре. Вот что получается.
Re: Для серьёзных спортсменов
От: c-smile Канада http://terrainformatica.com
Дата: 11.08.06 06:24
Оценка:
Вот собственно:


На самом деле меню может хостить любые input elements.

И вообще — event sinking/bubbling — рулез неможливый. Без него все это
разрулить в 700 строках кода (menu implementation) невозможно.
На голом API Windows я бы за это не взялся точно.
Re[2]: Для серьёзных спортсменов
От: Mamut Швеция http://dmitriid.com
Дата: 11.08.06 07:17
Оценка:
CS>И вообще — event sinking/bubbling — рулез неможливый. Без него все это
CS>разрулить в 700 строках кода (menu implementation) невозможно.
CS>На голом API Windows я бы за это не взялся точно.

Я так понимаю, это скоро и на Линуксах будет доступно?
... << RSDN@Home 1.2.0 alpha rev. 655>> ... <<silent>> ...


dmitriid.comGitHubLinkedIn
Re[3]: Для серьёзных спортсменов
От: c-smile Канада http://terrainformatica.com
Дата: 11.08.06 08:13
Оценка: 18 (4)
Здравствуйте, Mamut, Вы писали:

CS>>И вообще — event sinking/bubbling — рулез неможливый. Без него все это

CS>>разрулить в 700 строках кода (menu implementation) невозможно.
CS>>На голом API Windows я бы за это не взялся точно.

M>Я так понимаю, это скоро и на Линуксах будет доступно?


Во всяком случае Циска платит за Линукс порт.
Re[3]: Меню в Sciter и HTMLayout
От: WinterMute Россия http://yarrr.ru
Дата: 11.08.06 14:28
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Здравствуйте, WinterMute, Вы писали:


WM>>Так речь идёт о menu, которые показываются слоями или окнами? Последнее былобы полезнее.


CS>Какая-то умная Маша поменяла урл в оригинальном постинге.


CS>Вот что было:


CS>http://www.terrainformatica.com/htmlayout/images/menus.jpg


Я уже позже, на форуме TerraInformatica заметил. Кстати а эти <menu> можно будет показывать через HTMLayoutShowPopupWindow()? -- Это значит для организации контекстных меню.
Re[2]: Меню в Sciter и HTMLayout
От: Qiller www.everfall.com
Дата: 11.08.06 15:43
Оценка: +1
Здравствуйте, c-smile, Вы писали:

CS>>Вот собираюсь в следущем билде добавить поддержку "pure menus"

CS>Еще вопрос: тултипы на menu items имеют смысл?

Имхо, имеют.

Например, в свете Сообщения об ограниченных правах
Автор: FLUID
Дата: 02.08.06
полезно показывать тултипом, почему именно меню задизэйблено...
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.