< HomePage | Снимки
<- Понеделник, 29 Септември 2008 | Начална страница | Сряда, 1 Октомври 2008 ->
Вторник, 30 Септември 2008

Следната задача ми загуби час от днешния работен ден.

В <select> елемент на форма на всеки ред имам следните стойности "xxx_id | description_xxxx", което в момента не изглежда добре визуално понеже xxx_id са с различна дължина и | символите не се подравняват вертикално.

Идеята ми беше на направя select-а като се отвори да изглежда по следния начин:

+---------------+-+
| aa        zzz |v|
+---------------+-+
| aaa      zzzz |
| aaaaa   ccccc |
| aa         dd |
+---------------+

...обаче това няма как стане поради фактът, че CSS се прилага върху целия option, а не върху части от него (или поне аз не открих начин това да стане).

Имам две възможности да направя горното да изглежда както искам:

1. Правя шрифта на select-а monospace и текста вътре си го подравнявам с добавяне на подходящ брой &nbsp;. Това ще сработи перфектно, но ще изглежда грозно.

2. Пиша javascript, който при зареждане намира select-a който ме дразни, слага на негово място hidden input, след което стойностите на select-a ги форматира като редове в скрит DIV с точни размери, overflow-y:scroll и onclick събитие. На мястото на select добавя друг div, който при кликване показва и крие div-a със стойностите. Това чудо ще ми осигури изгледа който търся, че дори и по-по-красив, обаче няма да е толкова достъпно като стандартен select. Изобщо май не си заслужава главоболието.

Последния час си го загубих в търсене дали някой не е направил подобно javascript решение за select елементи, но така и не успях да открия точните думи, с които да запитам.

Help!

[ Коментари: 11 ]
Коментари

get rid of the select all together and build couple of divs/spans to do what you want ... with a little bit of imagination this should be a good start: http://www.learningjquery.com/2006/09/slicker-show-and-hide

Написа xeno на 01-Oct-2008 00:54

Да, с jQuery би станало сравнително лесно. Довечера може да имам малко време и да ти напиша някое плъгинче.
Въпроса е дали би искал да сложиш framework заради такова нещо :-)

Написа Tuzemec (www) на 01-Oct-2008 07:30

jquery ме кефи, а така или иначе все повече ми трябват разнообразни възможности.

Написа Георги Чорбаджийски (www) на 01-Oct-2008 08:34

Всъщност това май може да ти свърши работа:

http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/

Само ще трябва да бутнеш малко в getSelectOptions, при строенето на <li>-тата да включва в тях и value-то за да може да се вижда. Т.е.:

li.innerHTML = $(this).html();

да стане:

li.innerHTML("<span class='v'></span>" + $(this).html());

и за span.v в css-а:
span.v {display: block; float: right;}

Написа Tuzemec (www) на 01-Oct-2008 12:09

Виж това:
http://developer.yahoo.com/yui/examples/button/btn_example07.html

Може да си форматираш опциите както си искаш.

Написа Свилен (www) на 01-Oct-2008 12:33

@tuzemec: Великолепно! Точно това търсех, голямо благодаря.

Написа Георги Чорбаджийски (www) на 01-Oct-2008 12:54

@свилен: и това върши работа, но май предпочитам jquery плъгина.

Написа Георги Чорбаджийски (www) на 01-Oct-2008 12:57

Ух...

li.innerHTML("<span class='v'></span>" + $(this).html());

е всъщност:

li.innerHTML("<span class='v'>" + $(this).val() + "</span>" + $(this).html());

:-)

Написа Tuzemec (www) на 01-Oct-2008 13:55

И сега видях, че има една друга простотия... онова в което се изписва избраната стойност е <input>, което не е много куул, понеже тоя спан със value-то ще се изпише вътре в него. :-(
Т.е. или трябва при селектирането да се маха span-а... или да се разкара тоя инпут и да се направи <div> :-(

Написа Tuzemec (www) на 01-Oct-2008 13:58

аз ползвам това нещо http://www.cult-f.net/2007/12/14/elselect/ в комбинация с mootools. Работи като заменя селектите с подобно на това, което си описал.

ето моите доработки и писания по въпроса: http://blog.creonfx.com/javascript/customizable-form-select-dropdown-replacement-with-mootools

Написа петър (www) на 01-Oct-2008 16:37

jQuery рулира.

Написа Зденек на 06-Oct-2008 19:49