Аналоги radiobutton

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

Я не люблю переопределения интерфейса. Я терпеть не могу, когда Опера выводит свое окно не так как настроено в KDE, а как-то по-другому. Ведь если разработчики сделали методы для вывода окна, то зачем изобретать велосипед? Итак делает не только Опера: Zend DE и куча других программ. Зачем?

Но. Вместе с этим я понимаю, чем грозит линковка большущих либ, в которых тебе нежно только кнопка “Ok”. Проект разрастается и, как следствие, уменьшается время загрузки приложения.

Теоретически это касается и WEB. Но только косвенно. Ведь все согласны, что стандартных input не то что мало, а их НЕТ! Конечно, саморобные контролы снижают узнаваемость их пользователями, но если подойти с умом, то можно сделать вполне удачные аналоги.

Вот и я, дабы упростить себе жизнь (лень мне писать кучу javascript-кода ;) ) решил вместо стандартных radiobutton сделать свои. На самом деле, сложного нет в этом ничего, да и удобностей поболе, как по мне.

Что же я имел вначале? Есть поле status типа enum , которое может принимать значения ‘new’, ‘confirm’ и ‘done’. Следует сделать механизм показа значения поля и его редактирования.

Конечно, можно это сделать с помощью radiobutton. Это 3 радио-кнопки и в зависимости от значения, одну с них нужно делать выбранной. Кто это реализовывал, тот знает, что каждый radio имеет простой индекс, и связь возможна, только пройдя по всем кнопкам и, если значение поля равно value радио-кнопки, то надо сделать её выделенной. Такие варианты меня не устраивали. Я же решил пойти другим путём.

Первое, с чего надо начать, так это создать 3 рисунка с ссылками на них и поле типа hidden, чтобы сохранять и передавать потом в форме значение статуса:

< div id="status">
	< a class="st_new" href="">< img src="/_img/1x1.gif" />a>
	< a class="st_confirm" href="">< img src="/_img/1x1.gif" />a>
	< a class="st_done" href="">< img src="/_img/1x1.gif" />a>< span>
div>
< input type="hidden" name="status" value="">

Как видно с кода, в слое #status находятся картинки с ссылками. А теперь пропишем стили, чтобы это всё выглядело “по-людски”:

< style>
#status img{
	width: 16px;
	border: 1px #E8E8E8 solid;
}
style>

В результате мы имеем картину:

  • Внешний вид статусов

А теперь расскажу, как мы будем устанавливать активный статус. Для этого мы для div#status установим класс с именем нужного статуса. Если активный статус new, то получим

< div id="status" class='new'>

Самое интересное , что в HTML это всё что надо! Теперь дело только за CSS. Напишем правила для CSS в которых, если активный пункт, то выводим красную границу:

#status.new a.st_new img, #status.confirm a.st_confirm img,#status.done a.st_done img{
	border: 1px red solid;
}

Согласно этому правилу, если #status имеет стиль new, то картинка под a.st_new приобретает красную границу. Аналогично и с confirm и done.

  • Вот оно всё в действии с разными class.

Всё, тут уже нечего делать. Осталось в input вписывать статус и менять класс на #status. Js-функция для этого дела очень простая:

function ch_status(status_value){
	if (status_value != 'new' && status_value != 'confirm' && status_value != 'done')
		 status_value = 'new';
	document.forms['st'].elements['status'].value = status_value;
	document.getElementById('status').className = status_value;
	return false;
}

Осталось только повесить её на теги a и всё. Весть документ со всем тоже прилагается. Один минус, как по мне, то это медленная прорисовка FF изменений. Что тут сложного? А вот Opera всё красиво и быстро обрабатывает.

Powered by ScribeFire.

  1. July 12th, 2007 at 12:56 | #1

    Спасибо Флеймеру за выискивание ошибок и в Чите на “ться”! Жду чит на “жи/ши”.

  2. July 13th, 2007 at 16:43 | #2

    В Firefox’e медленная загрузку можно списать на ацкий графический код :)

  3. July 13th, 2007 at 16:50 | #3

    аха, а что самое замечательное, что любители FF знают, но продолжают в лужу зловонить.

  4. July 25th, 2007 at 14:37 | #4

    оооо. Мазиловцы признали, что дыра с Ослом, которая давала возможность получить ацкие данные с других приложений, у них общая )

    И она не исправлена ;)

  1. No trackbacks yet.