ugrás a tartalomhoz

Html - optgroup fa helyett valami

inf · 2012. Már. 19. (H), 23.46
Üdv.

Belefutottam abba a problémába, hogy optgroup-nál nem lehet fát megadni, csak 1 szint mélységig. Egy termék feltöltő űrlapnál akartam kategóriát megadni úgy, hogy csak "levél" kategóriát lehessen kiválasztani. Tudtok valami (gyorsan letölthető) alternatívát ajánlani?

Olyat szeretnék, amin több levelet is ki lehet választani. Ha nincs ilyen, akkor tákolok egyet ul-li-ből meg egy hidden input-ból.
‹ Jquery onComplete függvény paraméterrel (egyből lefut) Illustrator és HTML MAP ›
 ■
1

Saját

janoszen · 2012. Már. 20. (K), 00.32
Kénytelen leszel sajátot csinálni vagy valami készet használni sajnos.
2

Ez tény, én valami készre

inf · 2012. Már. 20. (K), 02.00
Ez tény, én valami készre kérdeztem rá, hogy tudtok e olyat, ami ugyanezt csinálja. Annyira mondjuk nem bonyolult, csinálok egy multiselectet a leaf-ekből, és azon választom ki az értékeket, az ul-li fa meg a megjelenítése lesz.
3

Sikerült megoldani közben

inf · 2012. Már. 20. (K), 04.36
Sikerült megoldani közben mindent, amit akartam:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<style>
.check-with-label:checked + .label-for-check {
  background-color: lightblue;
}

.check-with-label {
	display: none;
}

.label-for-check, .group-label {
	background-color: white;
	display: block;
	cursor: pointer;
	padding-left: 10px;
}

.select-container {
	border: 1px solid black;
	width: 200px;
	overflow: hidden;
}

.indent {
	width: 10px;
	display: inline-block;
}
</style>
</head>
<body>
<div class="select-container">
	<input type="checkbox" id="check1" class="check-with-label" /><label for="check1" class="label-for-check">option 1</label>
	<div class="group-label">group 1</div>
	<input type="checkbox" id="check2" class="check-with-label" /><label for="check2" class="label-for-check"><span class="indent"></span>option 2</label>
	<div class="group-label"><span class="indent"></span>group 2</div>
	<input type="checkbox" id="check3" class="check-with-label" /><label for="check3" class="label-for-check"><span class="indent"></span><span class="indent"></span>option 3</label>
	<input type="checkbox" id="check4" class="check-with-label" /><label for="check4" class="label-for-check"><span class="indent"></span><span class="indent"></span>option 4</label>
	<input type="checkbox" id="check5" class="check-with-label" /><label for="check5" class="label-for-check">option 5</label>
</div>
<br />
<div class="select-container">
	<input name="radio" type="radio" id="check6" class="check-with-label" /><label for="check6" class="label-for-check">option 1</label>
	<div class="group-label">group 1</div>
	<input name="radio" type="radio" id="check7" class="check-with-label" /><label for="check7" class="label-for-check"><span class="indent"></span>option 2</label>
	<div class="group-label"><span class="indent"></span>group 2</div>
	<input name="radio" type="radio" id="check8" class="check-with-label" /><label for="check8" class="label-for-check"><span class="indent"></span><span class="indent"></span>option 3</label>
	<input name="radio" type="radio" id="check9" class="check-with-label" /><label for="check9" class="label-for-check"><span class="indent"></span><span class="indent"></span>option 4</label>
	<input name="radio" type="radio" id="check10" class="check-with-label" /><label for="check10" class="label-for-check">option 5</label>
</div>
</body>
</html>
Az üres inline-block -os indent-ről azt hallottam, hogy szabvány szerint törölhetik a böngészők, viszont nálam mindegyikben ment, szóval egyelőre ez marad. Ha esetleg ilyesmi fordulna elő, akkor még mindig be lehet tenni egy fix szélességű átlátszó képet vagy bármi mást.
4

span nélkül

Garpeer · 2012. Ápr. 3. (K), 19.58
Üdv

Szerintem érdemesebb lenne span nélkül, egymásba pakolt ul-ekkel megoldani. Így a behúzáshoz nem kell üres spaneket berakni, csak meg kell adni az ul-ek paddingját, megsprólod, hogy a html generálásakor az indent spaneket kelljen számolgatni.
5

Szerinted én számolgatom?

inf · 2012. Ápr. 4. (Sze), 08.37
Szerinted én számolgatom? :D
Az a gond a behúzásos megoldással, hogy a hátterek nem lesznek egy vonalban tőle.
6

Hmm... A hátérre nem

Garpeer · 2012. Ápr. 4. (Sze), 13.39
Hmm... A hátérre nem gondoltam. Ha ki akarnám magyarázni, jöhetne a szöveg, hogy jobb, ha a háttért is beljebb van, mert így ez is egy visszajelzés a hierarchiáról :D
De hát nem ez a feladat.
A belső html/css náci üvölt, hogy "nein! nein! felesleges spaneket nein!", de perpill nem tudok jobb megoldást.
7

A label padding-ot lehetne

inf · 2012. Ápr. 4. (Sze), 15.54
A label padding-ot lehetne megadni style-ben, de az nem tisztán css...
8

tab

Garpeer · 2012. Ápr. 4. (Sze), 16.44
Nem találtam normális megoldást. Max ha minden szinten adsz az ul-eknek egy "level-x" osztályt, de ez semmivel sem jobb, mint az üres spanek. Sőt, a css-ben az összes lehetséges levelt meg kellene adni.

A másik, ami furcsa, hogy a tabbal lépegetés nem működik, mivel a checkboxok rejtettek.
Ahogy eddig próbálgattam, az egyetlen működő megoldás ez:

input[type=checkbox]{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0.0;
}
Bármi mást próbáltam (visiblity hidden, display none, 0-ás width), nem lehetett a checkboxokon lépkedni.
9

Hát valamit valamiért...

inf · 2012. Ápr. 4. (Sze), 17.35
Hát valamit valamiért... Nem próbáltam a tab-os lépegetést, egyelőre csak backend oldalakon használom ezeket kategória fánál meg ilyesmiknél...