danza » javascript libary http://d4nza.de/blog Digitaler Lifestyle Thu, 19 Apr 2012 10:20:33 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 jQuery tutorial Top 10 http://d4nza.de/blog/suchmaschinen-optimierung/jquery-tutorial-top-10 http://d4nza.de/blog/suchmaschinen-optimierung/jquery-tutorial-top-10#comments Thu, 10 Jun 2010 04:30:43 +0000 danza http://d4nza.de/blog/?p=653 Bei dem Suchbegriff jQuery Tutorial ist mittlerweile mein Blog auf Platz 3 vorgedrungen in der Google Suchmaschine, was für mich guten Traffic bedeutet und für die Suchenenden ein schönes kleines Tutorial. Der Artikel ist Mittlerweile schon über einen Jahr alt. Ich hoffe das der Blog in der Top10 bei dem Suchbegriff bleibt.

Wer sich den Artikel ansehen will: http://d4nza.de/blog/tutorials/jquery-tutorial-1

]]> http://d4nza.de/blog/suchmaschinen-optimierung/jquery-tutorial-top-10/feed 0 jQuery Tutorial Status http://d4nza.de/blog/website-tipp/jquery-tutorial-status http://d4nza.de/blog/website-tipp/jquery-tutorial-status#comments Sun, 19 Jul 2009 07:26:24 +0000 danza http://blog.d4nza.de/?p=376 Da sich mein jQuery Tutorial großer Beliebheit zu zeigen scheint (über 40 Seitenzugriffe allein im letzten Monat nur mit dem Begriff jQueryTutorial ), werde ich eventuell demnächst noch ein kleine Tutorial oder Vorschau zum jQuery UI schreiben.

Noch dazu habe ich noch einen kleinen Link mit den über 50 nützlichen jQuery Plugins: drweb.de. Einfach mal reinschauen und Sachen ausprobieren.

Mein absolutes lieblings Plugin ist natürlich die jQuery Lightbox. Direkt gefolgt vom jQuery Dateibrowser, den ihr dort findet: jQuery

Allen in allen kann man sagen das jQuery ein Top Framework ist und so schnell nicht von der Konkurrenz geschlagen wird.

]]> http://d4nza.de/blog/website-tipp/jquery-tutorial-status/feed 0 jQuery Tutorial http://d4nza.de/blog/tutorials/jquery-tutorial-1 http://d4nza.de/blog/tutorials/jquery-tutorial-1#comments Mon, 16 Feb 2009 22:23:22 +0000 danza http://blog.d4nza.de/?p=99 Ich schreibe ein kleines jQuery Tutorial mit einigen Beispielen.

Demo 1 Alert Box

Als erstes registrieren wir ein so genanntes “ready Event” für das Document. Dieses geht in jQuery mit der Funktion $(document).ready(function()). Im Code sieht das folgendermaßen aus:

$(document).ready(function() {
    //Mach irgendetwas wenn das Dokument geladen ist.
});

Wir wollen nun, das wenn man auf einen Link klickt, eine Messagebox erscheint, mit dem Inhalt Hallo Welt. Dazu schreiben wir folgendes in die Funktion:

$(document).ready(function(){
    $("a").click(function(){
        alert("Hallo Welt");
    });
});


Der komplette HTML Code sieht jetzt folgendermaßen aus:

Demo 1 Alert Box – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--Code für Demo 1-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").click(function(){
                alert("Hallo Welt");
            });
        });
        </script>
    </head>

    <body>
        <!--Zwei Test Links-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Nun schauen wir mal was wir gemacht haben. $(“a”) ist ein jQuery Selector. Mit $(“element”) können verschieden Sachen selektiert werden, auch Klassen $(‘.klasseDesElements’) oder IDs $(‘#idDesElements’). Es kann aber auch kombiniert werden, um z.B. alle Divs mit der Klasse development zu selektieren $(‘div.development’).

In unserem Fall werden alle a Element in dem Dokument selektiert. click() fügt allen ausgewählten Elementen ein Klick Event hinzu. In unseren Fall wird eine ganz normale Javascript Funktion aufgerufen, nämlich alert(“Hallo Welt”);. Nun was passiert jetzt bei dieser Funkion? Alle a-Elemente führen beim klicken darauf, eine Messagebox aus in der steht Hallo Welt. Also genau das was wir wollten.

Demo 2 CSS Klassen

Eine andere Aufgabe von jQuery ist das hinzufügen und entfernen von CSS-Klassen. Zuerst erstellen wir mithilfe von CSS eine Klasse mit dem Namen test. Wir nehmen in diesem Fall mal eine fette und kursive Schriftart

a.test {
    font-weight: bold;
    font-style: italic;
}

Als nächstes kommen wir zum Javascriptteil. Sobald nun also das Dokument geladen ist, soll nun allen Links die Klasse test hinzugefügt werden. Dazu nehmen wir die zuvor gelernte Funktion $(document).ready(function()) mit der wir nun abfragen, wann die Seite fertig geladen ist. Mit $(“a”) selektieren wir nun alle a-Elemente und fügen mit der Funktion addClass() eine Klasse hinzu, in unseren Fall ist das die Klasse test.

$(document).ready(function(){
    $("a").addClass("test");
});

Nun noch ein paar Links zum Testen hinzufügen, schon werden wir sehen was passiert.

Demo 2 CSS Klassen – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--CSS Klasse "test" macht fett und kursiv -->
         <style type="text/css">
            a.test {font-weight: bold; font-style:italic;}
         </style>

        <!--Code für Demo 2-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").addClass("test");
        });
        </script>
    </head>

    <body>
        <!--HTML Links ohne der "test" Klasse-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Wenn wir nun uns die Seite ansehen werden wir feststellen das alle Links fett und kursiv dargestellt werden. Die HTML Links haben also die Klasse test jetzt.

jQuery besitzt einige Spezial Effekte, von denen wir nun auch Gebrauch machen wollen. Sie lassen die eigene Website mit wenig Aufwand schön für den Besucher aussehen.

Als aller erstes nehmen wir eine ganz normale Div Box, mit etwas Text drin:

<div style="background-color:#336699;color:#fff;">
    Ich bin eine Testbox und muss immer viel arbeiten :-)
</div>

Damit wir die Box besser sehen, habe ich per Style Attribut, die Hintergrund Farbe auf Blau und die Schrift Farbe auf weiß gesetzt.

Nun fügen wir noch einen Link hinzu, der etwas machen soll:

<a href="#" id="klein">Mach die Box klein (80 x 120px)</a>

Ich gebe diesen Link die ID klein, sodass wir später mit jQuery diesen Link selektieren können.

Als nächstes fügen wir noch etwas javascript hinzu, sodass der Link auch etwas macht wenn man drauf klickt:

$(document).ready(function(){
    /*Box klein machen*/
	$('a#klein').click(function(){
		$('div').animate({ height: 80, width: 120 }, "slow", function(){});
	})
});

Wir selektieren mit $(‘a#klein’) unseren zuvor erstellten Link und geben ihn das Event click, wie schon zuvor erklärt wird bei einem Klick auf das Element nun der javascript Code in den Klammer ausgeführt.

Als nächstes bestimmen wir welches Objekt verändert werden soll ($(‘div’)), in diesen Fall sind das alle div Elemente. Mit der Funktion animate können wir Objekte animieren. Animate besitzt verschiedene Eigenschaften, in unseren Beispiel sagen wir height die Höhe auf 80px und width die Breite auf 120px, den Effekt wollen wir nun langsam haben, also hängen wir noch ein slow an.

Demo 3 Spezial Effekte – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--Code für Demo 3-->
        <script type="text/javascript">
        $(document).ready(function(){
            /*Box klein machen*/
            $('a#klein').click(function(){
                $('div').animate({ height: 80, width: 120 }, "slow", function(){});
            })
            /*Die Box große machen*/
            $('a#gross').click(function(){
                $('div').animate({ height: 200, width: 800 }, "slow", function(){});
            })
            /*Mehrer Effekte bestimmen*/
            $("a#slideFade").toggle(function(){
                $("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            },function(){
                $("div").animate({ height: 'show', opacity: 'show' }, 'slow');
            })
        });
        </script>
    </head>

    <body>
        <div style="background-color:#336699;color:#fff;">Ich bin eine Testbox und muss immer viel arbeiten :-) </div>

        <p><a href="#" id="klein">Mach die Box klein (80 x 120px)</a></p>
        <p><a href="#" id="gross">Mach die Box Groß (200 x 800px)</a></p>
        <p><a href="#" id="slideFade">Dieser Link führt zwei Unteschiedliche Funktionen aus</a></p>
    </body>
</html>

Ich habe noch zwei weitere Links hinzugefügt und genau wie eben noch ein paar Effekte hinzugefügt. Einzige Besonderheit ist bei Link Nummer 3. Er führt beim zweiten Klick eine andere Funktion aus, als beim ersten. Beim ersten Klick lässt er die Box verschwinden und beim zweiten Klick wieder erscheinen. Dafür habe ich die Funktion toggle benutzt. An ihr kann man beliebig viele Funktionen an Reihen, die der Reihe nach abgearbeitet werden und dann wieder von vorne beginnt. Per animate und der height und opacity und der Eigenschaft hide bzw. show kann man die Box verschwinden und wieder erscheinen lassen.

Am besten man guckt sich mal die Beispiel Seite an und probiert es selber einmal.

Wer noch weiter probieren will, sollte sich mal jQuery UI ansehen, hier zu auch ein kleines Tutorial.

Englische Übersetzung von Pathin – http://www.pathin.org/tutorials/jquery-tutorial/

]]> http://d4nza.de/blog/tutorials/jquery-tutorial-1/feed 36