Widget #1, jQuery.

Door Toppertje op dinsdag 8 november 2011 22:32 - Reacties (9)
Categorie: -, Views: 5.644

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:

http://img810.imageshack.us/img810/7596/naamlooswit.jpg

http://img100.imageshack.us/img100/9817/naamlooszwart.jpg

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.

Volgende: Enchanting...? 01-'12 Enchanting...?
Volgende: Widget #1 10-'11 Widget #1

Reacties


Door Tweakers user Sgreehder, dinsdag 8 november 2011 23:04

schijt? Nou nou...

Door Tweakers user wheez50, dinsdag 8 november 2011 23:18

#our? --> #yours?
of bedoelde je misschien 'hour'?

En schijt ipv scheidt is idd wel heel erg...

Door Tweakers user Ventieldopje, woensdag 9 november 2011 00:18

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:
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]


Door Tweakers user Capital_G, woensdag 9 november 2011 10:17

Ventieldopje schreef op woensdag 09 november 2011 @ 00:18:

Bovendien kun je
...
vervangen door
...
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]


Door Tweakers user Ventieldopje, woensdag 9 november 2011 10:20

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?
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".

Door Tweakers user Capital_G, woensdag 9 november 2011 10:51

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".
Uiteraard heb je gelijk, maar je kunt het ook oneindig doortrekken. Met css classes werken zou inderdaad een goed begin zijn.

[Reactie gewijzigd op woensdag 9 november 2011 11:06]


Door Tweakers user Gamebuster, donderdag 10 november 2011 09:49

.addClass en .removeClass

Door Rizky, maandag 19 augustus 2013 14:50

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

Door life insurance quotes, zondag 1 september 2013 11:04

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