Weet je dat zeker? Heb je de gegenereerde HTML bekeken?quote:Op donderdag 29 november 2012 22:23 schreef pascal08 het volgende:
[..]
Het puntje kan ik niet selecteren.
Ik wil straks met jQuery gegevens versturen. Kan dat ook anders dan? Waarom is deze plugin er dan?quote:Op donderdag 29 november 2012 22:24 schreef picodealion het volgende:
Waarom heb je hier überhaupt jQuery voor nodig? Dit kan toch gewoon in CSS?
Ja, die heb ik bekeken. Er valt mij niets vreemds op. Ik zal nu kijken of ik het ook kan triggeren met Firefox.quote:Op donderdag 29 november 2012 22:25 schreef Tijn het volgende:
[..]
Weet je dat zeker? Heb je de gegenereerde HTML bekeken?
Anders is het misschien een glitch. Heb je het met andere browsers ook?
Nee, dat snap ik. Ik hoopte dat het een bekend probleem is. Zonder code wordt het natuurlijk gewoon gokken als je dit probleem niet eerder hebt gezien. Ik zal eens kijken of ik het kan reproduceren in een fiddle, momentje.quote:Op donderdag 29 november 2012 22:32 schreef Tijn het volgende:
Ik zou toch even goed kijken of er niet een element is dat daarvoor zorgt. Anders zit er weinig anders op dan het online te zetten zodat we kunnen meekijken, want op de gok lossen we natuurlijk niks op
Ik wist ten eerste niet hoe ik mijn layout wilde gaan maken, dus dit bracht me op een goed idee. Ten tweede weet ik hoe ik met jQuery gegevens moet doorsturen, zodat ik een query kan maken die de juiste gegevens ophaalt uit m'n database. En ten derde scheelde het me wat tijd, want ik hoef nu niet zelf m'n CSS te maken. Ik zag er dus alleen maar voordelen in. Waarom vraag je dat dan?quote:Op donderdag 29 november 2012 22:36 schreef Tijn het volgende:
Ik begrijp trouwens ook niet helemaal waarom je hier zo'n plugin voor nodig hebt.
Het lijkt me nogal simpel om dit zelf te maken met een paar regeltjes CSS en een jQuery eventhandler voor de blokjes. Ik zou daar geen plugin voor willen includen op m'n website.quote:
Ik gebruik jQuery UI toch al, dus dan is het toch handiger om deze plugin te gebruiken in plaats van het zelf te schrijven. Daarnaast vind ik jQuery wel fijn. Alles is voorgekauwd en het scheelt mij als beginner een hoop tijd.quote:Op donderdag 29 november 2012 22:46 schreef Tijn het volgende:
[..]
Het lijkt me nogal simpel om dit zelf te maken met een paar regeltjes CSS en een jQuery eventhandler voor de blokjes. Ik zou daar geen plugin voor willen includen op m'n website.
Ik vind het wel een uitkomst. Ik haal er een hele hoop ideeën vandaan en het werkt altijd meteen. Wellicht is de code zelf schrijven efficiënter voor de website, maar dan ben ik in 2025 nog niet klaar.quote:Op donderdag 29 november 2012 22:53 schreef Tijn het volgende:
Met jQuery zelf is natuurlijk niks mis, dat gebruik ik ook altijd.
Maar jQueryUI vind ik persoonlijk wat minder.
Hoe zou jij het doen dan? Het gaat alleen om het principe van selecteren/geselecteerd blijven en deselecteren/gedeselecteerd blijven.quote:Op donderdag 29 november 2012 23:01 schreef Tijn het volgende:
Ik zie niks hoor. Maar het zal dat selectieblokje met die stippellijntjes wel zijn dat blijft hangen ofzo.
Ik zou dat eerlijk gezegd sowieso niet doen, dat selecteren met zo'n vakje. Dat zie je op andere sites ook nooit.
Wat zou dat schelen in ms of is het puur omdat je code er kleiner van wordt?quote:Op donderdag 29 november 2012 23:13 schreef Tijn het volgende:
Gewoon onclick een class "selected" geven of ontnemen.
Da's waar.quote:Op donderdag 29 november 2012 23:16 schreef Tijn het volgende:
Het scheelt vooral dat je niet zo'n raar puntje hebt staan op willekeurige momenten
1 2 3 | <div class=" (selected of niks) " style="float:left; margin: 2px; padding: 0px; width: 80px;"> // inhoud </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <title>Voorbeeld van klikbare blokjes</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1>omg klikbare blokjes</h1> <ul id="selectable"> <li data-id="1">blokje 1</li> <li data-id="2">blokje 2</li> <li data-id="3">blokje 3</li> <li data-id="4">blokje 4</li> <li data-id="5">blokje 5</li> <li data-id="6">blokje 6</li> <li data-id="7">blokje 7</li> <li data-id="8">blokje 8</li> <li data-id="9">blokje 9</li> </ul> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="script.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | body { font-family: sans-serif; text-align: center; } #selectable { list-style-type: none; } #selectable li { float: left; width: 80px; height: 80px; background-color: #eee; border: 1px solid #888; border-radius: 3px; margin: 5px; padding: 10px; cursor: pointer; } #selectable li:hover { background-color: #fff; } #selectable li.selected { background-color: #f8f89f; } |
1 2 3 4 5 | $(document).ready(function(){ $('#selectable li').live('click', function(){ $(this).toggleClass('selected'); }); }); |
Holy shit, even kijken.quote:Op donderdag 29 november 2012 23:34 schreef Tijn het volgende:
Is zoiets niet wat je wil?
[ code verwijderd ]
style.css:
[ code verwijderd ]
script.js:
[ code verwijderd ]
Wel een heel mooi voorbeeldje.quote:Op donderdag 29 november 2012 23:42 schreef Tijn het volgende:
Het is maar een voorbeeldje hoor.
In de click eventhandler (waar nu alleen toggleClass() wordt aangeroepen) zou je ook een Ajax call kunnen doen als je nog communicatie met je server wil na het aanklikken van een blokje.
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |