Tutorialwelt.de » JQuery http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 JQuery Tutorial – einen Datumspicker per JQuery http://www.tutorialwelt.de/451/jquery-tutorial-einen-datumspicker-per-jquery.htm http://www.tutorialwelt.de/451/jquery-tutorial-einen-datumspicker-per-jquery.htm#comments Sun, 22 Nov 2009 04:08:07 +0000 admin http://www.tutorialwelt.de/?p=451
  • JQuery-Tutorial – JQuery installieren Was ist JQeury? JQuery ist ein ganz besonderes Javascript Plugin!...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     JQuery-Tutorial – Wie man mit JQuery einen Datumspicker erstellt.

    Stellen Sie sich vor, Sie haben ein Formular. In diesem Formular soll man ein Datum eingeben können. Wäre es nicht toll, wenn der Besucher das Datum ganz einfach mit einem Datumspicker auswählen könnte?

    Mit JQuery ist dies möglich. Ich zeige Ihnen, wie das funktioniert.

    Zuerst müssen wir wieder, wie in dem ersten JQuery Tutorial beschrieben, unsere CSS und beide Javascript Dateien in unser Projekt einbinden:

    Beispielcode HTML:

    <head>
   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet">
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  </style>
 </head>

    Beachten Sie bitte wieder die aktuelle Version und Ihren Template-Ordner.

    Nun benötigen wir ein Formular und darin ein Eingabefeld:

    Beispielcode HTML:

    <html>
 <head>
   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet">
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  </style>
 </head>
 <body>
  <form>
    <input type="text" id="datum">
  </form>
 </body>
</html>

    Wir haben jetzt unserem HTML Dokument ein Formular mit hinzugefügt. Diesem Formular haben wir ein Texteingabefeld mit der ID “Datum” zugewiesen.

    Diese ID werden wir nun per JQuery ansprechen. Wir fügen eine Javascript Funktion in den Head Bereich ein. (Sie können dies später in eine externe Javascript Datei auslagern.)

    Beispielcode HTML:

    <html>
 <head>
   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet">
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#datum").datepicker();
    })
  </script>
  </style>
 </head>
 <body>
  <form>
    <input type="text" id="datum">
  </form>
 </body>
</html>

    Wir haben nun eine Funktion erstellt, die auf ein Element mit der ID “Datum” den datumspicker anwendet.

    Testen Sie den Code. Sie werden staunen.

    Klicken Sie in das Textfeld. Es öffnet sich der Datumspicker. Sobald Sie ein Datum auswählen, wird dies in das Textfeld geschrieben. Für Deutschland sollte das Format angepasst werden (wie man diese Änderung vornimmt, werde ich in einem der nächsten Tutorials schreiben), aber der erste große Schritt ist getan.

    Herzlichen Glückwunsch. Sie sollten nun Ihr erstes JQuery Programm geschrieben haben.

    Related posts:

    1. JQuery-Tutorial – JQuery installieren Was ist JQeury? JQuery ist ein ganz besonderes Javascript Plugin!...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/451/jquery-tutorial-einen-datumspicker-per-jquery.htm/feed 0     JQuery-Tutorial – JQuery installieren http://www.tutorialwelt.de/449/jquery-tutorial-jquery-installieren.htm http://www.tutorialwelt.de/449/jquery-tutorial-jquery-installieren.htm#comments Sun, 22 Nov 2009 03:35:06 +0000 admin http://www.tutorialwelt.de/?p=449
  • JQuery Tutorial – einen Datumspicker per JQuery Stellen Sie sich vor, Sie haben ein Formular. In diesem...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     JQuery-Tutorial – JQuery installieren

    Was ist JQeury?

    JQuery ist ein ganz besonderes Javascript Plugin! JQuery bietet Ihnen ungeahnte Möglichkeiten. Ob Sie einen Datumspicker, Tabs, ein Akkordeon (Sie werden in einer späteren Lektion sehen, was das ist) oder ein mit der Maus ziehbares Fenster erstellen möchten. Mit JQuery können Sie dies alles machen.

    JQuery ist kostenlos. Die Entwickler würden sich allerdings über eine kleine Spende freuen.

    Sie können JQuery hier downloaden: JQuery Download

    Auf der rechten Seite können Sie sogar noch ein Template auswählen. Somit haben Sie die Möglichkeit die JQuery Objekte an Ihr Webseiten Layout anzupassen.

    Nachdem Sie JQuery heruntergeladen haben, sollten Sie sich einfach mal die index.html öffnen. Hier erhalten Sie einen Vorgeschmack dessen, was Sie in den nächsten Lektionen erwartet.

    Um nun JQuery in Ihr Projekt einzubinden, müssen Sie nur die Unterordner in ihr Projekt kopieren und in die betreffenden HTML Dateien die Template CSS und zwei Javascript Dateien einbinden.

    Folgende drei Zeilen müssen in jeder betreffenden HTML Datei vorhanden sein:
    Beispielcode HTML:

    <head>
  <style type="text/css">
   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet">
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  </style>
 </head>

    Vergleichen Sie bitte die Dateien, mit denen, die Sie heruntergeladen haben. Für dieses Tutorial habe ich die derzeit aktuelle Version 1.7.2 eingesetzt mit dem Template ui-lightness eingesetzt.

    In der Zeile, in der die CSS eingebunden wird, müssen Sie ui-lightness mit Ihrem Templateordner ersetzen.

    Sobald Sie diese drei Zeilen in Ihren Head eingefügt haben, können Sie mit den Funktionen von JQuery loslegen.

    Glauben Sie mir: Es ist ganz einfach, aber sehr effektiv!

    Related posts:

    1. JQuery Tutorial – einen Datumspicker per JQuery Stellen Sie sich vor, Sie haben ein Formular. In diesem...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/449/jquery-tutorial-jquery-installieren.htm/feed 0