anpera.net
https://anpera.homeip.net/phpbb3/

Javascript Spielerei
https://anpera.homeip.net/phpbb3/viewtopic.php?f=43&t=4578		 Seite 1 von 1
Autor:  Kevz [ Fr 20 Jun, 2008 18:35 ]
Betreff des Beitrags:  Javascript Spielerei
Servus zusammen,

und zwar habe ich - weil der Mensch ja sehr gemütlich ist - eine kleine Javascript Funktion gebastelt, mit der man sich selbst, z.B. einen "Reiter" erstellen kann.

Es funktioniert eig. ganz Simpel und einfach. Doch ich möchte hinzufügen, dass das ganze sich noch in Kinderschuhen befindet und Weise darauf hin, das ich Änderungen o.ä. natürlich Posten werde.

Der Code ist für den Anfang sehr Simpel erstmal aufgebaut und bitte nicht zuviel erwarten! ;-)


Eine neue Version, der Kompletten Funktion wird folgen.
Natürlich mehr etwas mehr, als bisher und wesentlich sauberer.


Javascript:
$this->bbcode_second_pass_code('', 'function TabMenu () {
/**
* @var array $tabElements
*/
var tabElements = Array();

/**
* Mit dieser Funktion kann ein "Tab" im Array vermerkt werden.
* Bzw. Kurz gesagt, es wird ein "Tab" registriert.
*
* @param string $name
* @param integer $show
*/
this.add = function ( name, show ) {
// register tab
tabElements.push(name);

// tab show?
document.getElementById(name).style.display = ( show ? "inline":"none");
}

/**
* Mit dieser Funktion kann ein "Tab" Sichtbar machen.
* Bzw., sofern man die Funktion aufruft.
*
* @param string $name
*/
this.view = function ( name ) {
for (var i = 0; i < tabElements.length; ++i) {
// view tab
if ( tabElements[i] == name ) {
document.getElementById(name).style.display = "inline";
}
// hide tab
else {
document.getElementById(tabElements[i]).style.display = "none";
}
}
}

}')

HTML-Code Beispiel:
$this->bbcode_second_pass_code('', '<span id="test_1">Hallo Welt!</span> <span id="test_2">Hier bin Ich!</span>
<hr />
<span id="test_3">Ein Unbekannter Inhalt... Aber Sichtbar?!</span>

<script type="text/javascript">
// Erstellen eines TabMenu Objektes
TabObj = new TabMenu;

// Hinzufügen der Tabs
TabObj.add("test_1");
TabObj.add("test_2");

// Hinzufügen eines Tabs, und als "Sichtbar" setzen.
TabObj.add("test_3", true);
</script>

<a href="#" onclick="TabObj.view('test_1');">Test 1</a> | <a href="#" onclick="TabObj.view('test_2');">Test 2</a>')
Autor:  n2code [ Fr 20 Jun, 2008 21:22 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Coole Idee, könnte ich mir zum Beispiel im Profil gut vorstellen, gibts aber glaube ich schon in den 1.x.x-LotGDs.

Leider scheint das Ganze nur in Firefox, (noch?) nicht im IE zu funktionieren und die Spans liegen nebeneinander, sprich sie werden zwar unsichtbar gemacht, ersetzen sich beim umschalten aber nicht. Das könnte man vielleicht mit CSS lösen.

Aber ansonsten: Weiter so, denn ein Pferd ist schon was bequemes... ;)
Autor:  Nightborn [ Fr 20 Jun, 2008 22:11 ]
Betreff des Beitrags:  Re: Javascript Spielerei
die 1.x.x hat eine showform() funktion die das in PHP tut.

Arbeitet aber etwas anders intern, sehr viel ausladender und auf einer älteren Basis.
Autor:  Kevz [ Sa 21 Jun, 2008 12:49 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Wie gesagt, steckt noch ein "wenig" in "Kinderschuhen".

Ich werde es nachher mal ein wenig Überarbeiten und dann ggf. eine neue Version reinstellen. Habe es leider bisher nur mit dem FF getestet. Über den IE ist mir leider nix bekannt.


Gruß,
Autor:  Kevz [ Sa 21 Jun, 2008 18:23 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Bin ja kein Fan von Doppelposts, aber nun muss es mal sein.

Habe eine neue, Bugfreie Version oben hinzugefügt bzw., durch die vorherige ersetzt. Bitte beachtet auch die Funktionsweise nun. Die Namen haben sich nur geändert. Sollte im IE sowie im FF einwandfrei klappen!

So, neuer HTML-Code hinzugefügt.
Damit es zur veranschaulichung einfacher fällt. ;-)

Gruß,
Autor:  Eichi [ So 22 Jun, 2008 12:24 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Mal versucht das ganze mit xajax und assign zu machen? Ich liebe xajax ^^

Beispiel für die Funktion:
HTML:
PHP:
<!--Reiter laden.. -->
<span id="reiter_1" style="display:;">
Reiter 1
</span>
<span id="reiter_2" style="display:none;">
Reiter 2
</span>
<span id="reiter_3" style="display:none;">
Reiter 3
</span>
<!-- Navs laden, Reiter '+', Reiter '-' -->
<a href="#" onclick="xajax_setReiter('+');">
Reiter hinzufügen
</a>
<a href="#" onclick="xajax_setReiter('-');">
Reiter entfernen
</a>
<!-- Navs laden, individueller Reiter -->
<a href="#" onclick="xajax_setReiter('+s','1');">
Reiter #1 anzeigen
</a>
<a href="#" onclick="xajax_setReiter('-s','1');">
Reiter #1 entfernen
</a>


PHP-Funktion:
$this->bbcode_second_pass_code('', 'function setReiter ($bornkill,$specialwurst){
// Initialisieren...
if (empty($_SESSION['reiter'])) $_SESSION['reiter']=1;
$obj=new xajaxResponse();
// Reiter hinzufügen?
if ($bornkill=='+'){
$_SESSION['reiter']++;
$obj->assign("reiter_".$_SESSION['reiter'],"display","");
// Reiter entfernen
}elseif ($bornkill=='-'){
$obj->assign("reiter_".$_SESSION['reiter'],"display","none");
$_SESSION['reiter']--;
// Spezielle Reiter bearbeiten
}else{
//Reiter laut ID hinzufügen
if ($bornkill=='+s'){
$obj->assign("reiter_".$specialwurst,"display","");
//Reiter laut ID entfernen
}elseif ($bornkill=='-s'){
$obj->assign("reiter_".$specialwurst,"display","none");
}
}
// An Clienten senden
return $obj;
}')


Ist ungetestet, muss natürlich auch die xajax-Klasse für eingebunden sein. Und muss noch stark angepasst werden, aber da lässt sich noch viel draus machen ;)

LG, Eichi

EDIT, Code- und PHP-BBCodes umgedreht ._.

PS.: Kevz, wenn ich das richtig sehe, kann bei dir nur der ausgewählte Tab angezeigt werden, da alle anderen durch die Schleife wieder vom Display gelöscht werden? Bei mir werden die Reiter hinzugefügt und entfernt, man könnte natürich auch direkt per ID ansprechen..

EDIT II:
Hab noch grad eine direkte ansteuerung für Tabs eingefügt ^^
Autor:  Kevz [ So 22 Jun, 2008 13:15 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Eichi?,

ich habe bewusst nur es auf Javascript aufgebaut. Und nicht mit einer PHP- Lib.

Zumal durch die Einbindung der XAJAX Klasse einige Sekunden flöten gehen und diese noch Zeitverzögerter reagiert, als Javascript bei direkter Anwendung.

Btw., und XAJAX hatte ich bereits vor Jahren im zusammenhang mit LotGD. (Siehe XAJAX MotD u. Co.)


Ich sehe AJAX, in dieser kleinen Anwendung, als recht Sinnlos an, stattdessen kann ich genauso gut, weniger Code nutzen und den gleichen Effekt erzielen(!).

Die ganze Funktion soll ja endlich den Sinn erfüllen, das ein oder andere Element anzuzeigen. Natürlich wird die ganze Klasse noch ausgebaut etc., aber das Reitermenü äußert sich ja dadurch - das ein ausgewähltes Element angezeigt wird und die anderen dafür ausgeblendet werden.
Autor:  Eichi [ Mo 23 Jun, 2008 18:13 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Naja, Sekunden ist j amal stark übertrieben, xajax wird ja auch als Javascript ausgeführt, nur das XML-Response wird beim anklicken zusätzlich gesendet und das sind je nach Ping 10-70 (Auf dieses Beispiel, welches ich hier gepostet habe bezogen) milisekunden, auf unserem Server zumindest, also vernachlässigend gering, außerdem macht es die asynchronität das ganze mehr als wet, meiner Meinung nach ^^

Was Reiter betrifft, hab ich auch schöne Funktionen zum umschalten geschrieben, die Reiter wunderbar als deaktiv markieren und aktiviert, das sieht sehr geil aus, alle Reiter sind da, aber man kann schön erkennen an welcher Stelle man sich sozusagen befindet.
Hm, das werde ich auch in die Navileiste von meinem neuen Projekt so übernehmen, ach ist es schön wie einem die Ideen kommen wenn man über sowas schreibselt xD

LG, Eichi
Autor:  Kevz [ Mo 23 Jun, 2008 20:45 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Ich hoffe Du weisst, das mit jedem Aufruf eines Reiters, deine PHP- Funktion mit neu aufgerufen wird. Das ist erstmals Serverlastig und zweitens, brauche ich es nur Clientseitig. So erspare ich mir einiges mehr. ;-) - Zudem auch das hinzufügen einer Session, was nicht gerade von nöten ist...

Habe mich lang nicht mehr mit XAJAX beschäftigt, da ich ehr eine eigene AJAX-Klasse bevorzuge. Und dort weitgehend über meine Funktion bescheid weiß, als wenn ich etwas unbekanntes verwende. ;-)


Du siehst also, ich habe wesentlich weniger aufwand, als Du. Denn Du musst ja erst eine Klasse via PHP erstellen. Diese dann mit Funktionen, etc. füttern und dann wieder abschließen. Und dann noch den Inhalt an die Ausgabe leiten.
Autor:  Auric [ Mo 23 Jun, 2008 23:21 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Naja, die XAJAX-Variante wäre nur dann sinnvoll, wenn dadurch frische daten vom Server geholt werden sollten, beispielsweise wenn es viele Reiter gibt, die dazu noch jede Menge content haben. So könnte man Berechnungszeit für "unangesehene" Reiter-Seiten sparen so wie den entsprechenden Traffic. Dazu muss aber erst einmal eine Ganze Masse an Daten dort hinein kommen. Wenn alle Informationen sinnvollerweise schon zur Auslieferungszeit der Seite zur verfügung stehen, macht Kevz' Variante deutlich mehr Sinn.
Autor:  Eichi [ Di 24 Jun, 2008 19:55 ]
Betreff des Beitrags:  Re: Javascript Spielerei
Nagut, eure Argumente sind natürlich richtig, aber ich denke noch, dass in der Hinsicht der Geschmack eine wichtige Rolle spielt, mit xajax und smarty z.B. kann man sehr geile und vorallem dynamische Sachen basteln und das sehr übersichtlich, für Kleinigkeiten langt natülich Javascript, aber das würde ich eben abhängig von Überschaubarkeit und Codetransparenz machen, Javascript kann aus dem Quellcode ausgelesen werden, bei xajax ist das schon etwas schwieriger ^^
Davon mal abgesehen gibt es ja auch noch Prototype, auch sehr geil, aber auch eine Frage des Geschmacks meiner Meinung nach wo man was verwendet und besonders, wer mit wem was als erstes gemacht hat, wir haben einen auf Arbeit, der benutzt sogar für Tabellen divs, die er nur umgeschrieben hat mit Styles, geht natürlich auch, aber wofür wurde das <table> erfunden frag ich mich.. ^^

Naja, jedem das Seine sag ich, was ich schrieb ist auch eine Lösung, ebenfalls eine Elegante behaupte ich mal und wer was verwendet bleibt ja ihm selber überlassen ^^

Außerdem war das oben auch mehr ein Beispiel zu einer Alternative, falls es jemanden interessiert und nicht so auf Javascript abfährt ;)

LG, Eichi
Seite 1 von 1 Alle Zeiten sind UTC + 1 Stunde
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/