Custom Checkboxes
Door - -, 20 jaar geleden, 4.864x 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)
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:
----------- 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
Er zijn 24 reacties op 'Custom checkboxes'
0 
-0 
-0
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
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
0 -0
-0
Ziet er goed uit. Ik gebruik zelf ook Prototype en vind dat je het goed gebruikt (Y). I like it.
0 -0
-0
@Ypma
Hier had ik nog niet aan gedacht, kzal het straks ff beter maken (Ga nu zwemmen :))
@GaMer13
Thnx
Hier had ik nog niet aan gedacht, kzal het straks ff beter maken (Ga nu zwemmen :))
@GaMer13
Thnx
0 -0
-0
@Iltar;
Dat is nu juist het probleem, checkboxen laten zich heel moeilijk stylen.
@Script;
Mooie oplossing :)
Dat is nu juist het probleem, checkboxen laten zich heel moeilijk stylen.
@Script;
Mooie oplossing :)
0 -0
-0
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.
Wel mooie checkboxes btw.
0 -0
-0
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
0 -0
-0
@ 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.
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.
0 -0
-0
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 :)
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 :)
0 -0
-0
@Jeroen
Google maar eens. Alle resultaten laten hetzelfde zien. Prototype is groot en traag, alleen geschikt voor breedbandgebruikers en kleine websites.
Google maar eens. Alle resultaten laten hetzelfde zien. Prototype is groot en traag, alleen geschikt voor breedbandgebruikers en kleine websites.
0 -0
-0
@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/
http://dev.jquery.com/~john/slick/
0 -0
-0
Heerlijk toch, bij mij komen er 3 verschillende resultaten uit,,
Wat een betrouwbare test!!
Wat een betrouwbare test!!
0 -0
-0
Het voordeel van ProtoType vind ik dat je er script.aculo.us bij kunt gebruiken.
0 -0
-0
@nico: en daarom meet je ook nooit een paar keer, maar minstens 20 keer, en neem daar eens het gemiddelde van. :)
0 -0
-0
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.
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.
0 -0
-0
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...
0 -0
-0
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.
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.
0 -0
-0
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.
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.
0 -0
-0
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...
Niet echt gebruiksvriendelijk...
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu