Мне довольно часто приходится разрабатывать пользовательские интерфейсы как для Веб, так и для Desktop-приложений. Так вот, есть одно существенное различие, на котором я не раз спотыкался при разработке для Веб. Собственно об этом и пойдёт речь.

Хотелось бы поговорить о таких элементах интерфейса как Checkbox и Radio (RadioButton).

Начну цитатой из книги «Дизайн пользовательского интерфейса» (В.В. Головач):
«Это может показаться невероятным, но до сих пор в интернете 99% чекбоксов и радиокнопок реализованы неправильно. Дело в том, что создатели языка HTML, ничего не понимавшие в проектировании интерфейсов, были искренно уверены в том, что в этих элементах управления нажимается только визуальный индикатор переключения, т.е.
кружок или квадратик. На самом деле это совершенно не так! Нажимабельной должна быть ещё и подпись, просто потому, что закон Фитса (Закон Фитса говорит нам о том, что чем больше цель по размерам, тем проще навести на неё курсор мыши — Прим. ред.) однозначно требует больших кнопок. Но в интернете всего этого нет, поскольку в HTML конструкция чекбоксов и радиокнопок просто не позволяет делать нажимабельными подписи. Сейчас это стало технически возможным (через JavaScript), но по инерции
и вполне понятной лени никто чекбоксы нормальными не делает»

Я лично не полностью согласен с автором (а именно по части того, что в HTML нет своих средств для реализации «нажимабельных подписей», наверное, он просто не знал о существовании тега Label). Но думаю, суть данной цитаты должна быть понятна каждому.

Действительно, в приложениях, разработанных под Windows, элементы Checkbox и RadioButton всегда по умолчанию связаны с текстом, который является кликабельным и позволяет изменить состояния сопоставленного с текстом элемента. Поэтому думаю можно не задумываясь «тыкать» на текст, чего, к сожалению, не скажешь о Веб интерфейсах.

Собственно так у меня и появилась мысь реализовать данную фичу для Веба.

Задача:
Сделать так, чтобы теги элементов checkbox и radiobutton в HTML поддерживали свойства (например, ALT или TITLE) которые бы воспринимались и отображались как текст, сопоставленный с данными элементами управления. Если же, например, достаточно большая часть интерфейса уже реализована и нет полной уверенности в том, что все checkbox’ы и radiobutton’ы везде связаны с тегом Label, дополнительно реализовать возможность автоматического поиска текста который необходимо с ними связать. Автоматический поиск будет основываться на том, что как правило, всегда, например, за чекбоксом следует текст, который с ним сопоставлен логически (опция должна быть настраиваемой).

Реализация:
Реализованно как плагин для jQuery, соответственно требует для своей работы подключение библиотеки jQuery.

Подключение
<script type="text/javascript" src=”jquery.js"></script>
<script type="text/javascript" src=”jquery.autolabes.js"></script>


Использование

Настройки по умолчанию:
{
auto : true,
from : ['alt','title','rel'],
nbsp : 1
}
* This source code was highlighted with Source Code Highlighter.

auto — автопоиск текста для тега Label
from – имена атрибутов которые можно использовать для формирования тега Label
nbsp – количество пробелов отделяющих элемент управления от текста ассоциировано с данным элементом

Пример 1
$(function(){
$().autoLabels();
});

В этом примере во всём документе производится поиск и формирование меток для чекбоксов и радиокнопок.

Пример 2
$(function(){
$(".auto").autoLabels({auto: false, from: ['alt','value']});
});

* This source code was highlighted with Source Code Highlighter.

В примере 2 автометки формируются только в найденных элементах с классом auto, причём, автоматический поиск меток отключен, и назначены названия атрибутов которые необходимо использовать для формирования меток (поиск атрибутов осуществляется с первого до первого найденного).

Содержимое HTML страницы может быть следующего вида:
<input type="checkbox">Some text 1<br/>
<input type="checkbox"><b>Some text 2</b><br/>
<div class="auto">
<input type="checkbox"> <span>Some text 3</span><br/>
<input type="checkbox"> <font>Some text 4</font><br/>
<input type="checkbox"> <div>Some text 5</div><br/>
</div>
<input type="checkbox"> <i>Some text 6</i><br/>
<br/>
<div class="auto">
<input type="checkbox" alt="title text 1"><br/>
<input type="checkbox" alt="title text 2"><br/>
<input type="checkbox" alt="title text 3"><br/>
</div>
<input type="radio" name="r" alt="radio text 1"><br/>
<input type="radio" name="r" test="radio text 2"><br/>
<input type="radio" name="r" test="radio text 3"><br/>

* This source code was highlighted with Source Code Highlighter.


Версия 1.0: jquery.autolabes.js