Widget #1, jQuery.

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

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.