Let op: Tweakers stopt per 2023 met Tweakblogs. In
dit artikel
leggen we uit waarom we hiervoor hebben gekozen.
Widget #1, jQuery.
Het is alweer een tijdje geleden dat ik mijn eerste widget voor mijn telefoon (Samsung Wave) werkend heb gekregen, en was toen van plan met dat (leer)projectje door te gaan tot ik er tevreden mee was
.
Inmiddels is het weer een paar week later er is er eigenlijk niet zo gek veel veranderd. Echter heb ik wel veel geleerd, voornamelijk over jQuery.
Vorige keer schreef ik dat ik graag wou dat als ik op de klok (uren) zou klikken er een kleurverandering zou ontstaan, dit is, m.b.v. jQuery prima gelukt:


Als je toch weer een witte klok wilt, klik je weer op de klok (minuten).
Hiervoor heb ik gebruik gemaakt van de laatste geminimaliseerde versie van jQuery. Te zien in de HTML file:
het 'head' gedeelte van de HTML file.
Ook is er een beetje extra code javascript bij gekomen:
Hierin is te zien dat als je op de uren klikt de klok zwart wordt, en als je op de minuten klikt de klok weer wit wordt. De 'background' van het div 'center' moet ook zwart worden, want dit is de verticale lijn die de uren van de minuten schijt.
Het enige nadeel.
Helaas werkt dit alles niet op mijn telefoon. Als ik de widget inpak in een mooi .wgt bestand en kopieer naar mijn telefoon en hem wil installeren komt er te staan: installatie mislukt.
Positief hierin is dat ik ondanks de werking op mijn telefoon er niet minder van heb geleerd dan als hij wel zou werken.
Inmiddels is het weer een paar week later er is er eigenlijk niet zo gek veel veranderd. Echter heb ik wel veel geleerd, voornamelijk over jQuery.
Vorige keer schreef ik dat ik graag wou dat als ik op de klok (uren) zou klikken er een kleurverandering zou ontstaan, dit is, m.b.v. jQuery prima gelukt:


Als je toch weer een witte klok wilt, klik je weer op de klok (minuten).
Hiervoor heb ik gebruik gemaakt van de laatste geminimaliseerde versie van jQuery. Te zien in de HTML file:
HTML:
1
2
3
4
5
| <head> <link rel="stylesheet" type="text/css" href="./css/main.css" /> <script type="text/javascript" src="./script/jquery-1.7.min.js"></script> <script type="text/javascript" src="./js/main.js"></script> </head> |
het 'head' gedeelte van de HTML file.
Ook is er een beetje extra code javascript bij gekomen:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
| $(document).ready(function(){ $("#our").click(function () { $("#main").css("color","black"); $("#center").css("background","black"); $("#min").click(function () { $("#main").css("color","white"); $("#center").css("background","white"); }); }); }); |
Hierin is te zien dat als je op de uren klikt de klok zwart wordt, en als je op de minuten klikt de klok weer wit wordt. De 'background' van het div 'center' moet ook zwart worden, want dit is de verticale lijn die de uren van de minuten schijt.
Het enige nadeel.
Helaas werkt dit alles niet op mijn telefoon. Als ik de widget inpak in een mooi .wgt bestand en kopieer naar mijn telefoon en hem wil installeren komt er te staan: installatie mislukt.
Positief hierin is dat ik ondanks de werking op mijn telefoon er niet minder van heb geleerd dan als hij wel zou werken.
01-'12 Enchanting...?
10-'11 Widget #1
Reacties
schijt? Nou nou...
#our? --> #yours?
of bedoelde je misschien 'hour'?
En schijt ipv scheidt is idd wel heel erg...
of bedoelde je misschien 'hour'?
En schijt ipv scheidt is idd wel heel erg...
Het zou je maar gebeuren dat een verticale lijn de uren je van de minuten schijt
When the shit hits the ... clock!
Je hebt volgensmij nog wel een hoop te leren, waarom niet werken met css classes en die switchen met jQuery?
Bovendien kun je
JavaScript:
vervangen door
JavaScript:
Je hebt volgensmij nog wel een hoop te leren, waarom niet werken met css classes en die switchen met jQuery?
Bovendien kun je
JavaScript:
1
2
3
| $(document).ready(function() { // Je code hier }); |
vervangen door
JavaScript:
1
2
3
| $(function() { // Je code hier }); |
[Reactie gewijzigd op woensdag 9 november 2011 00:19]
Beide doen exact hetzelfde, dit is meer personal preference imho. Dat de javascript zelf niet optimaal is ben ik met je eens, maar is dat boeiend voor 11 regels aan js?
[Reactie gewijzigd op woensdag 9 november 2011 10:17]
Ach boeiend dat je begint met inefficiënt coden, ach boeiend dat we met javascript de kleuren aan gaan passen in plaats van je stylesheet te benutten .. waarom gebruik je dan een stylesheet?Capital_G schreef op woensdag 09 november 2011 @ 10:17:
[...]
Beide doen exact hetzelfde, dit is meer personal preference imho. Dat de javascript zelf niet optimaal is ben ik met je eens, maar is dat boeiend voor 11 regels aan js?
Als dit een leer project is ben je leuk bezig maar moet je niet te laks worden van "het werkt toch zo".
Uiteraard heb je gelijk, maar je kunt het ook oneindig doortrekken. Met css classes werken zou inderdaad een goed begin zijn.Ventieldopje schreef op woensdag 09 november 2011 @ 10:20:
[...]
Ach boeiend dat je begint met inefficiënt coden, ach boeiend dat we met javascript de kleuren aan gaan passen in plaats van je stylesheet te benutten .. waarom gebruik je dan een stylesheet?
Als dit een leer project is ben je leuk bezig maar moet je niet te laks worden van "het werkt toch zo".
[Reactie gewijzigd op woensdag 9 november 2011 11:06]
.addClass en .removeClass
Mooi Daan! Ik heb al zoveel CornerVieuwtjes van je giezen...dat ik zelf ook erg enthousiast erover ben. Ik zou graag het komende jaar meedoen maar heb geloof ik een beetje last van beginnersangst...;)Misschien wil je me een keertje wat vertellen over de Corner Vieuw...hoe het werkt enzo. (hoeft niet hier hoor...je weet me te vinden;) )Liefs Bar
Type je reactie Je mag deze HTML tags gebruiken: <a> <abbr> <acronym> <b> <blockquote> <cite> <code> <del> <em> <i> <q> <strike> <strong> var RecaptchaOptions = { theme : 'blackglass', lang : 'nl' , tabindex : 5 }; #submit {display:none;}
Reageren is niet meer mogelijk