Kiválasztás - multiselect nélkül js
I (és azt hiszem, sokaknak van) szemben nemcsak a Select összeférhetetlenség design a helyén.
A fájdalom az, hogy nem lehet őket stílusú és minden böngésző, úgy néznek ki a maga módján.
Természetesen rengeteg döntést kell benyújtani keretek / könyvtárak (ugyanazon bootstrap).
De mind feltételezik KEH.
Természetesen nincs semmi baj / rossz, de megpróbáltam stilizuemy válassza ki anélkül, JS, mint follbeka esetén js valamilyen okból szünetekben.
az eszközök megválasztásában
Az eszközök ebben az összefüggésben, úgy értem, akkor cserélje ki a SELECT.
És én esett a választás a rádió gomb miatt működése hasonló: akkor csak az egyik lehetőség egy időben.
Mi lett a rádió gombok . hogy elkerüljék a felesleges IDshnikov kerítés és a for-s.
Végrehajtásához válassza ki a kívánt elemet a Selecta meg kell, hogy ő találta magát a legjobb pozíció a listában.
Ehhez hagyja az értéket a kiválasztott elem kell elhelyezni abszolút (kitörni az áramlás) és helyezzük a tetejére:
Azt is meg kell, hogy tartsa a szabály, hogy a magasság minden tétel legyen egyenlő „betöltetlen” helyek (felső margó) a kiválasztott elem
Az adatok nagy része a munkát - ha kiválaszt úgy tűnik, a vezető pozíciót.
Ez maradt, hogy részt vegyen a tény, hogy a „csendes” állapotban csak látni a kiválasztott elem, és a többi lista nyílik egy kattintás, és ha rákattint a „tej” a lista kell zárni megváltoztatása nélkül az értéket.
Ez jut eszembe, manipuláció ál: hangsúly.
Adjunk hozzá néhány INPUT, amely tartozik bele. Azért választottam [type = text], mert lehetséges, hogy a méretet (elosztva a teljes szélesség és magasság), és hogy megvédjük őket vezető a kiválasztott elem.
Hogy elrejtse a legördülő listából lesz magassági korlátozás és túlfolyó: rejtett:
Természetesen a bemenet nem látható (mint a rádió gombok képviselő lehetőségeket):
Akkor érdemes használni opacity: 0; helyett display: none; annak a ténynek köszönhető, hogy lerombolták elemek (előző: rejtett is) nem lehet állam: hangsúly.
piszkos hack
És amikor úgy tűnt, hogy minden kiderült, én szembe egy meglepetés: ha rákattint egy menüpontot a listából a hangsúly vezérlő bemenet gyorsabban megy, mint egy kattintás váltja a listaelemet.
Azaz, van pontosan ugyanaz, mint amikor rákattint chtoi tejben - a lista egyszerűen zárva.
Ahhoz, hogy növelni kell a késleltetés, hogy elrejtse esett listán, akkor kell használni egy piszkos hack:
Ha tovább mennénk, szeretnénk csinálni ugyanúgy nélkül (JS) multiselekt.
Nem minden integrátor jquery-plugins ilyen köze JS (jQuery), és veletek vagyunk, amely fejek ish!
Jól mondta - kész, lehetetlen, hogy csökken az arcát a szennyeződést.
Próbálja meg kitalálni, hogy ez lehetséges. És ha nem, hogy az a pillanat, amelyben lehetetlen megtenni anélkül, hogy js.
Amit meg kell változtatni a korábbi példa a Select lesz a multi?
Minden elem kell tudni kell választani nem függ mások.
Nyilvánvaló, hogy meg kell változtatni a rádió gomb a négyzeteket:
Igen, ez nem az összes szükséges és nincs baleset, az ő segítségével fogjuk kezelni listánkon.
Ha csomagolja
. akkor képes lesz manipulálni a pszeudo: érvényes /: érvénytelen.Ahhoz, hogy megértsük, mit kell tennünk, hogy ez szükséges megfogalmazni a problémát világosan:
Hagyja, hogy a kiválasztott elem lesz először. Ugyanezen a vonalon vele többi kiválasztott terméket.
Elhelyezni a lista tetején kiválasztása egyszerű, kérni fogjuk a szülő kijelző: flex és fog játszani rendelési érték:
Az első feltétel teljesül, és hogy az összes a kiválasztott elemeket egy sorban, a kiválasztott elem kér
Voila! Úgy tűnik, hogy működik.
következtetés
Nem sikerült kideríteni, hogy hol (összefüggésben a probléma), akkor nem nélkülözheti js.
Talán (csak) a bonyolultabb példákat, ám legyen.
Ismétlődő linkek példa:
Nos, azok számára, akik nem akarnak írni „egy csomó jelölés” kezét azonnal ki egy script, ami nem lesz nehéz az Ön számára.
Kiegészítők és egyéb kérdésben szívesen, nem kétséges!