Custom Checkboxes

Door - -, 20 jaar geleden, 4.813x bekeken

Iedereen weet waarschijnlijk wel dat checkboxen zo ongeveer onmogelijk zijn te stylen met CSS. Met onderstaande code kun je checkboxen maken zoals jij dat wilt.

Het stukje javascript werkt met Prototype, je kunt hier de nieuwste versie downloaden.

Het gebruik is simpel, i.p.v. een checkbox gebruik je nu een hidden field en een link. Je laat de link verwijzen naar de naam van het bijbehorende hidden field, dus:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
href="[naam van veld]"

verder moet de link rel="checkbox" bevatten.

De link wordt vervolgens gestyled met CSS en een bg-image zodat dit net een checkbox lijkt (zie onderstaande code).

Een voorbeeld van zo'n dergelijk plaaatje:Afbeelding

----------- Update -----------
Het script is nu zo aangepast dat het ook werkt zonder javascript. :)

Voorbeeld: http://phphulp.frank-verhoeven.com/custom-checkboxes/

Gesponsorde koppelingen

PHP script bestanden

  1. custom-checkboxes

 

Er zijn 24 reacties op 'Custom checkboxes'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
M Ypma
M Ypma
20 jaar geleden
 
0 +1 -0 -1
Ik vind dit eerlijk gezegd geen nette oplossing.
Wat nou als javascript uit staat? dan kun je alle checkboxes niet meer gebruiken omdat de waardes in hidden inputs staan.
Mooier zou zijn (en dat gebeurt al vaak) is standaard checkboxes weergeven, en deze vervolgens d.m.v. javascript laten verbergen en vervangen door de link met achtergrond. Zo kan de gebruiker in beide gevallen normaal gebruik blijven maken van je website
GaMer B
GaMer B
20 jaar geleden
 
0 +1 -0 -1
Ziet er goed uit. Ik gebruik zelf ook Prototype en vind dat je het goed gebruikt (Y). I like it.
- -
- -
20 jaar geleden
 
0 +1 -0 -1
@Ypma
Hier had ik nog niet aan gedacht, kzal het straks ff beter maken (Ga nu zwemmen :))

@GaMer13
Thnx
Iltar van der berg
iltar van der berg
20 jaar geleden
 
0 +1 -0 -1
Dat moet toch makkelijker kunnen met een background image?
Douwe
Douwe
20 jaar geleden
 
0 +1 -0 -1
@Iltar;
Dat is nu juist het probleem, checkboxen laten zich heel moeilijk stylen.

@Script;
Mooie oplossing :)
GaMer B
GaMer B
20 jaar geleden
 
0 +1 -0 -1
Met "moeilijk stylen" bedoelen we: Crossbrowser laten werken.
- -
- -
20 jaar geleden
 
0 +1 -0 -1
Niceforms (demo blijf ik het beste vinden...
PHP erik
PHP erik
20 jaar geleden
 
0 +1 -0 -1
Prototype: de naam zegt het al. Niet geschikt voor productie. Véél te traag. Gebruik liever Dojo of JQuery. Prototype overweeg ik niet eens om te gebruiken.

Wel mooie checkboxes btw.


20 jaar geleden
 
0 +1 -0 -1
Bedankt voor dit script. Zal het niet gaan gebruiken maar nu snap ik eindelijk hoe men die hovers dus maakt met die plaatjes :) vroeg me altijd dat dus af waarom de hover en het normale plaatje in 1 plaatje zeg maar stond
Jeroen Langenberg
Jeroen Langenberg
20 jaar geleden
 
0 +1 -0 -1
@ PHPErik,

Dat is natuurlijk onzin. Prototype is prima geschikt voor productieomgevingen, Dojo en JQuery zijn slechts andere javascript-frameworks. Er zijn tal van dergelijke frameworks op de markt, voordat je waardeloze kreten roept is het misschien een idee om bronnen mee te leveren.
Ik ben zelf een vrij groot voorstander van Prototype, het is misschien wat trager, maar niet onwerkbaar traag. Anderzijds werkt het heerlijk als platform.

Het script is wel mooi geschreven, als javascript uitstaat is het echter gelijk nutteloos, dat is jammer.
Michael
michael
20 jaar geleden
 
0 +1 -0 -1
Ziet er leuk uit.

klein css tipje.

background-image: url(checkbox.png);
background-repeat: no-repeat;
background-position: 0 0;

equals

background: url(checkbox.png) no-repeat 0 0;

net even wat makkelijker :)
PHP erik
PHP erik
20 jaar geleden
 
0 +1 -0 -1
@Jeroen
Google maar eens. Alle resultaten laten hetzelfde zien. Prototype is groot en traag, alleen geschikt voor breedbandgebruikers en kleine websites.
Richard van Velzen
Richard van Velzen
20 jaar geleden
 
0 +1 -0 -1
@PHPErik: ik weet niet waar jij je resultaten vandaan haalt, maar als ik een test draai komt Prototype er als de op een na snelste uit van 5 frameworks.

http://dev.jquery.com/~john/slick/
Marcel
Marcel
20 jaar geleden
 
0 +1 -0 -1
Bij mij is Prototype ook op MooTools na de snelste.
Nicoow Unknown
Nicoow Unknown
20 jaar geleden
 
0 +1 -0 -1
Heerlijk toch, bij mij komen er 3 verschillende resultaten uit,,
Wat een betrouwbare test!!
- -
- -
20 jaar geleden
 
0 +1 -0 -1
Het voordeel van ProtoType vind ik dat je er script.aculo.us bij kunt gebruiken.
Richard van Velzen
Richard van Velzen
20 jaar geleden
 
0 +1 -0 -1
@nico: en daarom meet je ook nooit een paar keer, maar minstens 20 keer, en neem daar eens het gemiddelde van. :)
B a s
B a s
20 jaar geleden
 
0 +1 -0 -1
Idd Prototype valt enorm mee qua traagheid.. Gebruik het zelf ook en als ik tests doe dan krijg ik geen hoge resultaten..

Volgens de scriptaculous website gebruiken o.a. Apple, NASA en CNN hun script icm Prototype. Niet dat zij all mighty zijn qua webscripting maar vind het een erg goede referentie.

Bij mij komt na 10x testen van de dev.jquery.com test:
nr. 1: mootools
nr. 2: prototype
nr. 3: dojo query
nr. 4: jquery
nr. 5: ext 1. 1b1

Mootools geprobeerd maar ik vind het echt aan alle kanten zuigen. Prototype werkt goed qua cross browser, goede community ondersteuning en imo een goed framework.
Lode
Lode
20 jaar geleden
 
0 +1 -0 -1
Wat ik dan niet snap is dat het om prototype 1.5.1 gaat, we zijn al een tijdje met 1.6.0.2 bezig... En er is juist zoveel verbeterd en verandert in 1.6...
PHP erik
PHP erik
20 jaar geleden
 
0 +1 -0 -1
Grappig dat de testresultaten zo verschillen. Ik weet nog dat we bij de Telegraaf met heel veel mensen gingen testen (o.a. ook met laptops van mensen zelf) en dat Prototype veruit het traagst was met Mootools. Ook lees ik er online vaak over. Bij mij komt er hier (nieuw werk/pc) opeens Mootools uit snelste uit de bus bij die test. Maar heb hier wel een relatief slechte PC en Firefox 3 (misschien maakt dat uit).

Wat ik wel in de praktijk merk is dat de meeste grote partijen (zoals Telegraaf en KPN) bijvoorbeeld Mootools en Prototype niet overwegen en toch bijna altijd voor JQuery kiezen. Blijkbaar vinden Apple, NASA en CNN het wel goed/handig. Zij hebben ook wel extreem veel server- en breedbandcapaciteit.

Dat Ext JS extreem traag is dat is logisch, maar het is naar mijn mening wel veruit het mooist. Maar dan moet je het echt alleen bij een CMS ofzo gebruiken. Ik heb er een backend mee gemaakt een keer en het werkt wel lekker.

Blijkbaar moet ik mijn mening in ieder geval gedeeltelijk herzien. Ik realiseerde me niet dat het per computer uit zou maken. Maar dat was dan ook dom van me.
Onbekend Onbekend
Onbekend Onbekend
20 jaar geleden
 
0 +1 -0 -1
Je gebruikt links, dus die hebben bij active en focus psuedo-classes een rode of blauwe outline als die niet styled, voeg zoiets toe om die lelijke kleuren niet te krijgen:
a:focus { outline: 1px dotted black; }
a:active { outline: 1px dotted black; }

of:
a:focus { outline: none; }
a:active { outline: none }

Verder vind ik dit niet zo'n leuke oplossing aangezien je dit met javascript doet.
Harm
Harm
20 jaar geleden
 
0 +1 -0 -1
Het voorbeeldje werkt niet...
Douwe
Douwe
20 jaar geleden
 
0 +1 -0 -1
Welke browser gebruik je?
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Hipska BE
Hipska BE
20 jaar geleden
 
0 +1 -0 -1
Als JS uit staat, zie je nog steeds die gestylde checkboxen en als je er toevallig op klikt, dan krijg je een 404 of iets dergelijks..

Niet echt gebruiksvriendelijk...

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. custom-checkboxes

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.