Geschafft!

Hinweis

Fehler

Session expiration Your session is going to expireClick here to extend

Budget:

Kleines Projekt <800

Geposted am

2012-11-02 23:21:57.0

Kunde

rom***

Die Angebotsphase ist beendet

Schreiben Sie ein ähnliches Projekt aus und erhalten Sie Angebote von Freelancern. Unverbindlich. Kostenlos. Schnell.

Jetzt ähnliches Projekt einstellen

Beschreibung:

Hi,

ich suche für mein Wörterbuch-Suchfeld einen JavaScript Entwickler. Die Funktionen sollen mittels jQuery implementiert werden.

Im Anhang finden sich die Mockups, für ein besseres Verständnis der Beschreibung. Die URL zur Testseite gibt es auf Anfrage.

Das Suchfeld besteht auf drei Tabs. Je nachdem welcher Tab angeklickt ist, ändert sich das DropDown. Die ausgewählten Werte aus dem DropDown sollen in 2 HiddenFields gespeichert werden.

Hier die Werte:

1) Tab Wörterbuch

  • Hiddenfield "t": 1
  • Hiddenfield "l":
  • Deutsch-Kroatisch: Wert 1
  • Deutsch-Englisch: Wert 2
  • Kroatisch-Englisch: Wert 3

Anbei das HTML dazu:

<ul class="language-switch" style="top: 32px; left: 11px; display: none;">
	<li><a href="#"><span class="flag-de-hr">span><strong>Deutsch-Kroatischstrong>a>li>
	<li><a href="#"><span class="flag-de-en">span><strong>Deutsch-Englischstrong>a>li>
	<li><a href="#"><span class="flag-hr-en">span><strong>Englisch-Kroatischstrong>a>li>
ul>

2) Tab Konjugieren

  • Hiddenfield: "t": 2
  • Hiddenfield "l":
  • Deutsche Verben: Wert 1
  • Kroatische Verben: Wert 2
  • Englische Verben: Wert 3
  • Italienische Verben: Wert 4
  • Spanische Verben: Wert 5
  • Französische Verben: Wert 6

Anbei das HTML dazu:

<ul class="verbs-switch" style="top: 32px; left: 11px; display: none;">
	<li><a href="#"><span class="flag-hr">span><strong>Kroatische Verbenstrong>a>li>
	<li><a href="#"><span class="flag-de">span><strong>Deutsche Verbenstrong>a>li>
	<li><a href="#"><span class="flag-gb">span><strong>Englische Verbenstrong>a>li>
	<li><a href="#"><span class="flag-fr">span><strong>Französische Verbenstrong>a>li>
	<li><a href="#"><span class="flag-es">span><strong>Spanische Verbenstrong>a>li>
	<li><a href="#"><span class="flag-it">span><strong>Italienische Verbenstrong>a>li>
ul>

3) Tab Vokabelkarten

  • Hiddenfield: "t": 3
  • Hiddenfield "l": siehe Mockup
  • Wenn der Benutzer auf die linke Pfeiltaste klickt, dann erscheint ein DIV wir im Mockup. Das HTML muss dazu noch gemacht werden.
  • Es können maximal 3 Sprachen ausgewählt werden. Dies bitte als Konstante definieren
  • Wenn der Benutzer auf "+ weitere Sprache" klickt, dann erscheint ein DropDown mit allen Sprachen abzüglich der angezeigten Sprachen
  • Wenn eine Sprache aus dem DropDown ausgewählt wurde, wird sie als Text angezeigt und rechts daneben ein "x".
  • Klickt der Benutzer dann auf das "x" erscheint wieder das DropDown.
  • Das erste Feld im DropDown ist leer
  • Die Icons im Mockup stellen Flaggen dar. Alle Flaggen sind im CSS Sprite hinterlegt und haben eine eigene Klasse. z.B.: Deutsch => flag-de.
  • Jede Sprache bitte im JS in einem Array definieren. Sie besteht aus einem Text (z.B: "deutsch"), einer ID und der CSS-Klasse
  • Die drei ausgewählten IDs werden im Hidden-Field "l" kommasepariert eingetragen.
  • Die Fehlermeldung "Es können maximal 3 Sprachen ausgewählt werden", bitte im HTML einstellen und nicht in der JS Datei
  • Alle Funktionen bitte in einer eigenen JS-Datei hinterlegen
  • Wenn im HiddenField "l" schon Werte eingetragen sind, dann sollen die entsprechenden Sprachen ausgewählt werden.
  • Das gespeicherte Tab (HiddenField "t") und die gespeicherte Sprache (HiddenField "l") in einem Cookie speichern und dieses falls Werte gesetzt sind auslesen und die entsprechenden Einstellungen auswählen.
  • Die Auswahl der Sprachen wie hier darstellen http://translate.google.de/#tl/de/

 

Weiteres:

  • Der Focus befindet sich auf dem Suchfeld "#s"
  • Wenn der Besucher außerhalb klickt, dann steht im Suchfeld "Wörterbuch durchsuchen"
  • Das erstellte Javascript bitte in den Browser IE6,7,8 FF3.6 und FF aktuelle Version testen