Alexander Bogomolov ¦ 08.09.2010 ¦

Ich habe neulich berichtet wie ich die Meta-Daten zu der angegebene URL ausgelesen habe. Nun brauchte ich ein modernes User-Interface, um diese Eingabe zu realisieren. Da ich jQuery und die Fancybox sehr schätze, sollten auch dieses Mal beide zum Einsatz kommen.

Die Theorie

Man hat eine Tabelle mit allen Einträgen und darunter eine “hinzufügen” Link. Klickt der Benutzer auf diesen Link, so wird ein Formular in einem Overlay eingeblendet. Das Formular beinhaltet dann die Eingabefelder für die URL, den Titel, die Schlüsselwörter und die Beschreibung. Beim speichern werden die Daten in die Tabelle aufgenommen.

Die Praxis

Als erstes brauchen wir einen “hinzufügen” Link mit der ID “create”, dem HREF-Attribut „#hidden-form“ und das gewünschte Formular, das wir in einem Fieldset mit der ID “hidden-form” verpacken. Dieses Formular bietet die Grundlage unserer Seite.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<ul>      
  <li><a id="create" href="#hidden-form" title="title">create</a></li>
</ul>
 
<fieldset id="hidden-form">
  <legend>create/update</legend>
  <form action="" method="post">
    <dl>
      <dt><label for="url">URL:</label></dt>
      <dd><input type="url" name="url" id="url" size="45" value="" /></dd>
 
      <dt><label for="title">Title:</label></dt>
      <dd><input type="text" name="title" id="title" size="45" value="" /></dd>
 
      <dt><label for="keywords">Keywords:</label></dt>
      <dd><input type="text" name="keywords" id="keywords" size="45" value="" /></dd>
 
      <dt><label for="description">Description:</label></dt>
      <dd><input type="text" name="description" id="description" size="45" value="" /></dd>
    </dl>
    <p>
      <input type="hidden" name="id" id="id" value="<?php echo $id; ?>" />
      <input type="submit" name="save" id="save" value="save" />
    </p>
  </form>
</fieldset>

Nun müssen wir dafür sorgen, dass das Formular ausgeblendet wird und erst beim Klick auf den “hinzufügen” Link in einem Overlay angezeigt wird.

Blenden wir also zuerst das Formular aus:

1
2
3

$(document).ready (function () {
  $('#hidden-form').hide();
});

Ich nutze jQuery zum Ausblenden des Formulars und nicht CSS, da auch User ohne aktiviertem JavaScript die Möglichkeit haben sollen neue Einträge zu machen.

Jetzt müssen wir die Fancybox integrieren und aufrufen. Bei dem Aufruf kann man sehr viele Parameter übergeben, die das Verhalten der Fancybox beeinflussen. Alle diese Parameter kannst du dem API entnehmen. Rufen wir also unsere Fancybox auf und übergeben der Option „onStart“ eine Funktion die das Formular wieder einblendet:

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready (function () {
  $('#hidden-form').hide();
 
  $('#create').fancybox({
    'autoDimensions' : true,
    'titleShow' : false,
    'onStart' : function () {
      $('#hidden-form').show();
    }
  });
 
});

Damit war ich aber recht unzufrieden, da man das erste Eingabefeld immer erst mit der Maus fokussieren musste, bevor man etwas eingeben konnte. Zum Glück hatte ein Kollege letzte Woche das selbe Problem und konnte mich gleich bei der Lösung helfen.

Die Fancybox hat eine Option „onComplete“, der man eine Funktion übergeben kann. Und genau in diese Funktion platzieren wir den Code, der das erste Eingabefeld automatisch fokussiert.

1
2
3
4
5
6
7
8
9
10

$('#create').fancybox({
 'autoDimensions' : true,
 'titleShow' : false,
 'onStart' : function () {
 $('#hidden-form').show();
 },
  'onComplete' : function () {
    $('#url').focus();
  }
});

Vorschau: Formular in einem Overlay anzeigen – Fancybox
Fertig ist mein modernes Eingabefenster! Viel Spaß beim Nachbauen.



Web-Entwicklung ¦ Fancybox, jQuery

1. Pac-Man ¦ 08.09.2010 - 19:44

   Die Fancybox gefällt mir sehr gut, kannte ich bisher noch nicht. Bisher habe ich immer die Lightbox verwendet. Könnte passieren, dass ich umsteige…

   Gibt es für deine Anwendung irgendwo ein Beispiel? Ich kann mir nicht wirklich viel unter deiner Beschreibung vorstellen. Ist das “einfach nur” ein Formular, welches in der Fancybox angezeigt wird? Oder wie denn jetzt?

2. Bennet Matschullat ¦ 09.09.2010 - 07:21

   Hi Alex,

   erstmal Super Tutorial .

   Cool wäre noch, finde ich, bei so HTML und Javascript Anleitungen wenn man noch irgendwo eine Mini Demo hätte. Das hattest du letzten schon mal irgendwo mit eingebracht.

   LG,
   Bennet

3. StarSt0rm ¦ 09.09.2010 - 07:37

   Ich gestehe: Habe den Artikel Hals über Kopf geschrieben, damit ich den Mittwoch online stellen kann. (Erwischt…)
   Die Vorschau ist nun auch eingebunden. Und sollte in Zukunft immer gleich dabei sein.

4. Pac-Man ¦ 17.09.2010 - 17:37

   Hey, Du bei Facebook niemals antwortender…

   Guckst du:

   http://www.pacmanistcool.de/fantasy/fantasiebilder.html

   Mit Bilderwechsel per Mauswheel und allem, was so dazu gehört… *freu*

   Danke für den guten Tip!