Bästa sättet att skapa en stylad select?

Permalänk
Medlem

Bästa sättet att skapa en stylad select?

Skulle behöva skapa en stylad dropdownlista (och bör vara av en form select).
Den behöver kunna stylas ganska hårt, alltså frångå originalutseendet helt och helst fungera (eller ha en rimlig fallback) i IE6.
Har testat jQuery-pluginen Uniform, men den har dessvärre inte stöd för IE6 och beter sig annorlunda i olika webbläsare.

Hur stylar ni era listor?

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Permalänk
Medlem

Jag och min kollega skrev en helt egen från scratch åt Tele2, på grund av att vi inte var nöjda med de som redan fanns. De klarade inte tillräckligt många alternativ, bilder i alternativen, klarade inte IE6 eller hade något annat problem. De flesta är skrivna på ett sätt som gör det svårt att använda dem i större projekt eller då du t.ex. måste kunna ladda in data dynamiskt i dem. Resultatet blev iaf ett ca 300 rader selectbox-script som stödjer optgroups, callbacks, bilder, tangentbordet, funkar i alla webbläsare och bubblar alla events rätt i IE. Att få till god prestanda åt den var rätt lurigt, helt plötsligt kan t.ex. webbläsarens Garbage Collector slå till och lägga på en halv sekund.

Dock är det ganska många timmar bakom den, jag tror vi totalt är uppe i 40-50 h inklusive buggfixar och optimeringar. Den är byggd med filosofin att inte förändra select-elementet, utan bara skapa en stylad select, och sedan låta original-select-elementet skicka events till den stylade select-listan. Allt som händer i den stylade selecten avspeglas alltså i browserns select; vilket alternativ man väljer och att den fälls ner innan man väljer något etc. Originalelementet har visibility: hidden; och är absolutpositionerat utanför skärmen, men det är alltså i själva verket den man använder.

Min poäng är att du nog bör vara beredd på lite jobb, tyvärr finns ingen klockren lösning att tillgå ännu. Varför förstår jag inte, det borde verkligen vara någon som tagit tag i det. Kommer ingen bra lösning snart gör jag en själv.

Så, till mitt bästa tips! Här är ett mycket bra alternativ som du kan använda som startpunkt istället för att bygga från scratch:
http://v2.easy-designs.net/articles/replaceSelect/
http://v2.easy-designs.net/articles/replaceSelect2/

Använd den och anpassa om nödvändigt till dina behov. Det står att han jobbar på en del 3, som kommer att stödja optgroup och flera selectboxar. Det senare borde dock inte ta mer än några timmar att fixa. Eftersom hans kod är licensierad under Creative Commons skulle man kunna starta upp ett Google Code-projekt med hans guide som grund och sedan bygga ut och optimera den.

Denna verkar också vara en bra grund att starta med, men har buggar, det saknas callbacks och står inget om browser-stöd:
http://dblog.com.au/general/jquery-plugin-custom-styled-selec...

Permalänk
Medlem

Tack för det utförliga svaret, intressant läsning! Jag hade en känsla av att det skulle krävas en hel del timmar för att få till något som är godtyckligt. Får se vilken riktning vi tar i projektet, ska kika lite på vad man kan göra med grunden du länkade till. Vore även kul att se er lösning i action.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Permalänk
Medlem

På Tele2 Kroatien finns ett exempel i högra spalten här, dock är det scriptet bara ca 70 % av det vi vidareutvecklat till Tele2 Sverige nu. Det på Kroatiens webbplats har inte stöd för bilder, vissa optimeringar är inte gjorda heller. Först till våren kommer nya Tele2 Sverige live, och då bara vissa delar. Jag ska flika in att både Kroatien och Lettland (tele2.lv) såg riktigt bra ut när vi var klara med dem, men allt eftersom tiden går och de byter ut olika delar via tredjepartsleverantörer som inte är så vassa på front-end... ja det slutar oftast sådär. Men Tele2 Sverige kommer vi få en helt annan kontroll på, access till CMSet där vi kan buggfixa och sen är det ju lättare att kommunicera när andra änden kan tillräckligt mycket svenska eller engelska

Permalänk
Medlem

Snyggt, trevligt med den lilla glideffekten på också. Ja hehe språket är ej att förglömma i samarbeten, blir lätt missförstånd och dubbelarbeten.
Märkligt detta egentligen att man inte tänkt ett steg längre när det gäller forms och utvecklingen av css.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com