Перечень статей   Цветовые обозначения   Choose language


Новый элемент интерфейса "несколько стилей"


Стиль = состояние

Изменения в документе представляют собой конечный автомат. Конечный автомат более удобно задать как некую матрицу, вместо того, чтобы писать функции JavaScript, выполняющие эти изменения на экране. Рассмотрим, как может быть записан конечный автомат для изменения стиля объектов в зависимости от нажатия пользователем тех или иных клавиш клавиатуры и кнопок мыши. Пусть, например, имеется форум (пусть реплики будут элементами списка <li></li>).

В книжках делают закладки и пометки, но как сделать пометки здесь? Если вы проанализировали реплики и проранжировали их в 5 уровней (важно, задуматься, обычное, бестолково, вредно), то было бы удобно, чтобы "важно" были написаны красным, "задуматься" - оранжевым, "обычное" - зеленым, "бестолково" - черным, "вредно" - бледно-серым (серебряным).

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

Transition Sheet

Определим стили для наших реплик. Эти стили могут иметь разные цвета, размеры шрифта и т.д.

li.r5 { color: red }
li.r4 { color: orange }
li.r3 { color: green }
li.r2 { color: black }
li.r1 { color: silver }
Одиночный щелчек левой клавишей мыши подает событие click, двойной щелчек левой клавишей мыши подает событие double. Если разные теги используют одни и те же стили, то они выполнят одни и те же превращения. Таблица переходов выглядит так

r1 click r2
r2 click r3
r3 click r4
r4 click r5
r5 click r1 /* последовательность изменений замкнута в кольцо */

r5 double r4
r4 double r3
r3 double r2
r2 double r1
r1 double r5 /* последовательность изменений замкнута в кольцо */
Строка таблицы состоит из трех полей Поля отделены друг от друга пробелом. Каждое поле может состоять из нескольких слов, перечисленных через запятую. Слова одного поля следуют в произвольном порядке. Возможно указание нескольких начальных стилей через запятую. 
r1,r3 click r2
Произвольный стиль обозначается знаком "запятая". 
, click r2
Стиль, который использует браузер по умолчанию (когда у тега отсутствует атрибут class) называется default. Например, переход из default-состояния выглядит так 
default click r2
а переход в default-состояние - так 
r2 click default
Незаполненное поле "новое состояние" изменяет прежний стиль на стиль default. 
r1 click
Возможно указание нескольких событий через запятую. 
r1 click,double r2
Комбинация команд записывается путем перечисления команд через тире. Все команды записываются строчными буквами. 
r1 ctrl-click r2

Если событие вызвано на невыделенном объекте, то оно изменяет стиль только одного этиго объекта. Если событие вызвано на одном из выделенных объектов, то оно изменяет стиль всех выделенных объектов (конечный стиль каждого объекта зависит от его начального стиля).

Пусть один html-элемент (А) вложен в другой (В), переход для "В" определен в таблице переходов, и пользователь вызвал событие на "А". Если переход для "A"


Запишем все таблицы соответствия в отдельный файл, например, "a.txt", и добавим внутрь элемента head следующий html-элемент

<link src="./a.txt" type="transition">

События

Команды бывают зарезервированные браузером и придуманные пользователем (например он может придумать команды cool, fine). Зарезервированные команды могут быть вызваны как непосредственно клавиатурой или мышью, так и из меню, пользовательские команды могут быть вызваны только из меню.

Можно использовать комбинация зарезервированных команд.

Клавиша enter клавиатуты возбуждает событие click, клавиша bkspace клавиатуты возбуждает событие double.

Зарезервированные команды
мышиные клавиатурные
левая клавиша правая клавиша
click, double   ins, del, любая буква

Клавиша space (которая сама по себе не вызывает событие) осуществляет drag-and-drop объекта под курсором мыши и посылает две команды: первое нажатие - drag (затем движение курсора клавишами-стрелками), второе нажатие - drop, после второго нажатия подаются команды "drag" и "drop" соответствующим объектам.

Меню для объекта

Меню для объекта выглядит так (to_r5, to_r4, to_r3, to_r2, to_r1 - это пользовательские события)

<menu type="popup" id="menu_name">
<option value="to_r5"> важно      </option>
<option value="to_r4"> задуматься </option>
<option value="to_r3"> обычное    </option>
<option value="to_r2"> бестолково </option>
<option value="to_r1"> вредно     </option>
</menu>
Объект ссылается в атрибуте menu на необходимое ему меню 
<li menu="menu_name">какой-то текст</li>
Клавиша alt вызывает контекстное меню (меню для объекта под курсором мыши).

Форма отправляет

Если Объект, изменяющий свой стиль, расположен внутри тега form, то браузер отправляет сэмент obj, соответствующий этому объекту (значение атрибута name объекта присваивается серибуту name. Происхождение обозначений двух других серибутов: os = old style, ns = new style). Например, одинарный щелчок на реплике класса "r1" приводит к формированию такого сэмента

<obj name=A event=click os=r1 ns=r2>

Дополнительные свойства

Момент оправки

Форма отправляется после изменения стиля объекта немедленно, без нажатия на кнопку "submit"

li.r5 {
 color: red;
 autosubmit: yes;
}
В любом случае отправляются результаты сразу всех операций мышью, выполненных с момента последней отправки. Для того, чтобы еще до отправки по нажатию кнопки "submit" пользователь знал в каком состоянии находятся объекты формы, новые состояния объектов отображаются новым стилем.

Движение цвета

Цвета (и только цвета) могут двигаться плавно. В случаях, когда необходимо, чтобы цвет изменялся не скачком, а плавно, в течение некоторого промежутка времени, используется свойство color-time, который определяет за сколько секунд должно произойти изменение.

li.r5 {
 color: red;
 color-time: 1.5;
}

Резюме

Атрибуты
тегатрибутсписок возможных значений
link type transition
любой menu id of "menu"
name любой текст


Свойства
тегсвойствозначение по умолчаниюсписок возможных значений
любой autosubmit no yes, no
color-time 0  


Стили
тег стиль
любой default


Сэменты 
<obj name= event= os= ns= >



Тюрин Дмитрий



Перечень статей   Цветовые обозначения   Choose language


Hosted by uCoz