Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: Externes Smilie-Fenster



Ranking: 0   Kommentare: 0   |   Bewertung: Keine Berechtigung!  

Vorwort
Dies soll ein Tutorial werden, das euer Gästebuch optisch aufwertet, indem die Smilies über ein externes Fenster in das Eintrags-Textfeld durch klick übertragen wird.

Also Vorlage habe ich jetzt dieses Tutorial genommen, da hier die Smilies im selben Fenster sind, wie das Formular an sich. Jedoch werde ich in meinem "Tutorial" nur auf das Optische - sprich das Externe Fenster - eingehen und nicht das programmier-technische mit PHP.




Step 1:
Als erstes benötigt ihr die .html oder .php Datei, in der sich die Formularfelder befinden. Diese öffnet ihr mit einem Editor o.Ä. und fügt oberhalb eures Formulars oder an beliebiger Stelle folgenden Code ein.

Code:


<a href="#" onClick="window.open( 'smilies.html' , 'smilies' , 'height=200,width=200' );"> Zu den Smilies </a>



Mit diesem Code wird nun durch Javascript bei Klick auf den Link ein externes Fenster geöffnet, mit den Maßen 200px für Höhe und Breite.
smilies.html ist lediglich, die Datei, die mit den oben genannten Maßen geöffnet wird.
smiles ist hier der Name, wie die Datei heißt.

So sieht bei mir jetzt der gesammte Code aus:

Code:


<html>

<head>

<title> Versuch </title>



</head>

<body>



<a href="#" onClick="window.open( 'smilies.html' , 'smilies' , 'height=200,width=200' );"> klick </a>



<p>



<form action="" mehtod="POST" name="formular">

<textarea rows="10" cols="100" name="textfeld"> </textarea>

</form>



</body>

</html>



Achtet hierbei besonders auf die benannten Formularfelder. Diese werden uns später erneut begegnen.




Step 2:
Nun kümmern wir uns um die Gestaltung unseres Externes-Fensters. Da dies jeder selber machen kann habe ich nun lediglich 1 Smilie-Bild eingefügt, da es ja nur um die Methode geht ;)

Code:


<img src="Link zum Bild" onClick="opener.document.formular.textfeld.value +='Smileabkürzung';">



Dieser Code bewirkt, dass wenn man auf das Smilie-Bild klickt, dass nun die jeweilige Abkürzung o.Ä. in das Textfeld des KOntaktformular übertragen wird.
formular ist somit der Name, den wir in der kontakt-Datei dem Formular gegeben haben.
Gleichermaßen ist es mit textfeld, denn so heißt das Textfeld, in das man sein Anliegen einträgt.




Step 3:
Das war es nun eigentlich auch schon ;) . Nichts besonderes aber optisch sehr schön anzusehen.
Man muss eigentlich nur darauf achten, dass die beiden Dateien in dem selben Ordner liegen, da es sonst nicht funktionieren kann.
Wie gesagt auf den PHP-Teil mit Umwandlung der Smilie-Abkürzungen in Bilder werde ich nicht eingehen, da man dies im oben genannten Tutorial nachlesen kann.




Zusätzliches:
Um das Externe-Fenster mit mehr Funktionen zu füllen, kann folgendes noch verwendet werden.

scrollbars -> erlaubt dem Fenster Scrollbalken anzufügen, falls nötig

resizeable -> erlaubt das Fenster auf beliebige Größe zu ziehen

toolbar -> fügt dem Fenster die Werkzeugleiste an

location -> fügt ein Textfeld an, in das eine url eingetragen werden kann

menubar -> fügt Befehle wie Bearbeiten, Kopieren etc. ein

Folgendermaßen sollten diese "Zusätze" eingetragen werden:

Code:




<a href="#" onClick="window.open( 'smilies.html' , 'smilies' , 'height=200,width=200 , scrollbars' );"> klick </a>






Schlußwort
Ich hoffe mein kleines Tutorial hat dem ein oder anderen gefallen ;)
Ist mein 2tes Tutorial, das ich hier veröffentliche und hoffe ich habe alles richtig erklärt.

Comments and Votes are welcomed ;)

MfG AweSome!

@ Icq: #194410990

Veröffentlicht von: AweSome!
Veröffentlicht am: 1 Sep. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Externes Fenster Smilies

Kommentar(e) (0)


Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder