jQuery ScrolltoTop Droplet - Ein jQuery Plugin als Droplet nutzen Martin Freudenreich

Was brauchen wir dazu?

Naja, wie bei allen jQuery Plugins braucht man z.b. die entsprechenden Scripte und manchmal auch einige Bilder, oder auch eine ||CSS|| Datei, wie z.B. bei der Fancybox.

Für das Scroll to Top jQuery Plugin benötigen wir nur zwei ||JS|| Dateien, die wir mit dem Droplet zusätzlich ins Template laden.

Scroll to Top Version 3.0 mit der wir das [[ScrolltoTop]] Droplet erstellen habe ich hier als .zip file zusammengestellt!

Wohin mit den jQuery Plugin Dateien?

 Ursprünglich vorgesehen für jQuery Plugins war ein extra Ordner im /include/jquery/.. Verzeichnis, doch das ist eine sehr umständliche Handhabung. Bis dazu vielleicht eine bessere Lösung vorhanden ist, helfe ich mir mit einem gut strukturiertem /media/.. Verzeichnis aus der Zwickmühle. Dadurch habe ich den Vorteil ein jQuery Plugin das ich als Droplet nutze einfach per Backend (Medienverwaltung) hochladen und sofort nutzen kann, ohne etwas per ||FTP|| extra in ein ||WB|| Verzeichnis zu laden und dabei Rechteproblem riskiere. Ebenfalls kann man dadurch die Dateien einfach ersetzen zum Beispiel bei einer neuen Version des jQuery Plugins.

Hier ein Beispiel:  

Ich hab meinen Ordner was nun?

Wir haben nun einen Ort an dem wir ohne Probleme jQuery Plugins zur Verfügung stellen können. Wir haben das Droplet Modul, das standartmäßig seit der Version 2.8 in WebsiteBaker enthalten ist.

Tja - dann geht es auch schon an den Endspurt - wir gestalten unser Droplet!

Schritt für Schritt zum ScrolltoTop Droplet

Kopfteil

/********************************************
 * Scroll to Top jQuery Plugin Version 3.0 from http://www.ph-creative.com/
 * @autor Martin Freudenreich (mr-fan) 30-12-09
 *
 * @param where=head or body to setup where you wanna load the js files //default </head>
 *
 * Load the jquery.scroll.pack.js and jquery.easing.js from a spezific folder (Template or Media)
 * Load the needed settings for a first use (JS and CSS)
 *
 */

Damit wir eine kurze Übersicht schaffen, sollte jeder in sein ||Droplet|| einen einfachen Schriftkopf aufsetzen, der die wichtigsten Informationen beinhaltet.

• Name des jQuery Plugins und Version mit Link zur Seite (wichtig für Dokumentation und Info's zum Plugin!)
• Name Autor und Datum
• Parameter kurz erklärt mit Standarteinstellung
• Dateien die das Droplet benötigt
• Sehr kurze Beschreibung

Wer Droplet erstellt die er auch im ||WebsiteBaker Forum|| mit anderen teilen möchte, sollte diese Angaben in englischer Sprache verfassen.

Erste Prüfung

Wichtig ist, ob das Droplet nicht schon aus Versehen zweimal geladen wurde. Das wird recht simple geprüft indem wir eine kurze Abfrage machen, ob die ||Javascript|| Datei schon einmal im Frontend vorkommt.

//simple methode to check if this Droplet loaded twice!
$pos1 = strpos($wb_page_data, 'jquery.scroll.pack.js');

if ($pos1 !== false) {
  return " ";
} else {
  $scroll_js  = "<!--Scroll to Top Plugin-->\n";
  $scroll_css  = "<!--Scroll to Top CSS-->\n";
}

Wo sollen die Scripte geladen werden?

Wir laden unsere jQuery Plugins immer direkt vor </head> oder </body>! Dies können wir mit dem Aufruf des ||Droplets|| bestimmen. Als Standard werden alle Dateien im Head-Bereich ausgegeben. Damit dieser Parameter richtig funktioniert legen wir die beiden Möglichkeiten zuerst fest und prüfen dann ob per Droplet eine andere Auswahl getroffen wurde z.B. mit [[ScrolltoTop?where=body]] werden die ||JS|| Dateien vor Body Ende geladen.

1. Festlegung der Optionen und des Default-Wertes

//set to </head> or </body> to load the jQueryscripts where you want 
$places = array ("head", "body");
if (!isset($where)) $where= $places[0]; else $where = in_array($where, $places) ? $where : $places[0];
$where = "</".$where.">";

2.Aufruf des Parameters $where

//insert the CSS to your page output - always to the head section! 
$wb_page_data = str_replace("</head>",$scroll_css."</head>", $wb_page_data );
//insert the JS to your page output 
$wb_page_data = str_replace($where,$scroll_js.$where, $wb_page_data );

Die ||CSS|| Dateien müssen jedoch immer im Head-Bereich geladen werden! Der Aufruf folgt im ||Droplet|| selbst erst am Ende, also nicht beide Codebeispiele nacheinander stellen, da die Variablen $jscroll_css und $scroll_js noch leer sind. Das ändern wir im Nächsten Abschnitt.

Wie laden wir die benötigten Dinge?

Es ist möglich alles nachträglich per ||Droplet|| in Dein Template zu laden.

//Scroll to Top JS
$scroll_js .= "<script src='".WB_URL."/media/plugins/scrolltotop/jquery.easing.js' type='text/javascript'></script>\n";
$scroll_js .= "<script src='".WB_URL."/media/plugins/scrolltotop/jquery.scroll.pack.js' type='text/javascript'></script>\n";
$scroll_js .= "<script type='text/javascript'>\n";
$scroll_js .= "$(function() {\n";
$scroll_js .= "$('#toTop').scrollToTop({speed:1000,ease:'easeOutCirc',start:700});\n";
$scroll_js .= "});\n";
$scroll_js .= "</script>\n";

//Scroll to Top CSS
$scroll_css .= "<style type='text/css'>\n";
$scroll_css .= "#top {display:none;}\n";
$scroll_css .= "#toTop { width:85px;\n";
$scroll_css .= "background:#f1f1f1;\n";
$scroll_css .= "border:1px solid #ccc;\n";
$scroll_css .= "text-align:center;\n";
$scroll_css .= "padding:3px;\n";
$scroll_css .= "position:fixed;\n";
$scroll_css .= "bottom:10px;\n";
$scroll_css .= "right:10px;\n";
$scroll_css .= "cursor:pointer;\n";
$scroll_css .= "color:#666;\n";
$scroll_css .= "text-decoration:none; }\n";
$scroll_css .= "</style>\n";

Du kannst einfach nachvollziehen wie wir unsere Variablen mit Inhalten füllen. Wichtig ist das .= und das \n, um die Inhalte auf mehrere Zeilen aufteilen zu können und das Ergebniss im Frontend übersichtlich zu halten. (Versuche mal das Droplet ohne die \n 's am Ende jeder Zeile - Richtig - Alles wird nun in eine Zeile geschrieben...)

Spezielles für unser "Scroll to Top" Plugin

Jedes jQuery Plugin hat einen anderen Nutzen und andere zusätzliche Dinge, die wir benötigen, um es zu verwenden. Unser Scoll to Top Plugin braucht noch einen Anker #top der am Anfang unseres (X)HTML Dokumentes steht und einen Anker #toTop den wir mit CSS schon im vorhergehenden Teil formatiert haben.

Diese Anker sind per Link verbunden, auch wenn die Animation und das langsame Einblenden des Scroll to Top Buttons nicht funktionieren, weil ||Javascript|| im Browser deaktiviert ist, funktioniert die Grundfunktion (An den Seitenanfang zu gelangen) trotzdem.

//Scroll to Top Anchor
$wb_page_data = str_replace("<body>","<body>\n<div id='top'><a name='top'></a></div>", $wb_page_data );

//Scroll to Top Link
$scroll_link = "<a href='#top' id='toTop'>^ Nach Oben</a>\n";

Ausgabe im Frontend

Jetzt fehlt nur noch alles zusammen richtig zu plazieren.

1. ||CSS|| und ||JS|| plazieren wie weiter oben im Text schon erwähnt!

//insert the CSS to your page output - always to the head section!
$wb_page_data = str_replace("</head>",$scroll_css."</head>", $wb_page_data );
//insert the JS to your page output
$wb_page_data = str_replace($where,$scroll_js.$where, $wb_page_data );

2. Scroll to Top Button ausgeben

//insert the Link on the Place where the Droplet is called
return $scroll_link;

3. Droplet abschließen und Scripte laden

//output
return true;

Verwendung des ||Droplets||

Genauso wie das Lightbox Droplet ist die einfachste Anwendung direkt im Page_footer der nahezu von fast allen Templates genutzt wird!

Alles zusammen - Das ScrolltoTop Droplet

Folgende Angaben einfach im ||Admin-tool|| ||Droplets|| unter dem Punkt "Droplet hinzufügen"
kopieren und an den richtigen Stellen einfügen.

Dropletname: Scrolltotop

Beschreibung: Einfügen des "Scoll to Top" jQuery Plugins von Craig Wilson auf allen Seiten einfach verwenden durch Eintragen unter Backend->Optionen->Fußzeile!

Code:

/********************************************
 * Scroll to Top jQuery Plugin from http://www.ph-creative.com/
 * @autor Martin Freudenreich (mr-fan) 30-12-09
 *
 * @param where=head or body to setup where you wanna load the js files //default </head>
 *
 * Load the jquery.scroll.pack.js and jquery.easing.js from a spezific folder (Template or Media)
 * Load the needed settings for a first use (JS and CSS)
 *
 */
 
//simple methode to check if this Droplet loaded twice!
$pos1 = strpos($wb_page_data, 'jquery.scroll.pack.js');

if ($pos1 !== false) {
  return " ";
} else {
  $scroll_js  = "<!--Scroll to Top Plugin-->\n";
  $scroll_css  = "<!--Scroll to Top CSS-->\n";
}

 
//set to </head> or </body> to load the jQueryscripts where you want
$places = array ("head", "body");
if (!isset($where)) $where= $places[0];
  else $where = in_array($where, $places) ? $where : $places[0];
$where = "</".$where.">";

//Scroll to Top JS
$scroll_js .= "<script src='".WB_URL."/media/plugins/scrolltotop/jquery.easing.js' type='text/javascript'></script>\n";
$scroll_js .= "<script src='".WB_URL."/media/plugins/scrolltotop/jquery.scroll.pack.js' type='text/javascript'></script>\n";
$scroll_js .= "<script type='text/javascript'>\n";
$scroll_js .= "$(function() {\n";
$scroll_js .= "$('#toTop').scrollToTop({speed:1000,ease:'easeOutCirc',start:700});\n";
$scroll_js .= "});\n";
$scroll_js .= "</script>\n";

//Scroll to Top CSS
$scroll_css .= "<style type='text/css'>\n";
$scroll_css .= "#top {display:none;}\n";
$scroll_css .= "#toTop { width:85px;\n";
$scroll_css .= "background:#f1f1f1;\n";
$scroll_css .= "border:1px solid #ccc;\n";
$scroll_css .= "text-align:center;\n";
$scroll_css .= "padding:3px;\n";
$scroll_css .= "position:fixed;\n";
$scroll_css .= "bottom:10px;\n";
$scroll_css .= "right:10px;\n";
$scroll_css .= "cursor:pointer;\n";
$scroll_css .= "color:#666;\n";
$scroll_css .= "text-decoration:none; }\n";
$scroll_css .= "</style>\n";

//Scroll to Top Anchor
$wb_page_data = str_replace("<body>","<body>\n<div id='top'><a name='top'></a></div>", $wb_page_data );

//Scroll to Top Link
$scroll_link = "<a href='#top' id='toTop'>^ Nach Oben</a>\n";

//insert the CSS to your page output - always to the head section!
$wb_page_data = str_replace("</head>",$scroll_css."</head>", $wb_page_data );
//insert the JS to your page output
$wb_page_data = str_replace($where,$scroll_js.$where, $wb_page_data );

//insert the Link on the Place where the Droplet is called
return $scroll_link;
//output
return true;

Viel Spaß beim ausprobieren und experimentieren - fast jedes jQuery Plugin kann auf diese Art und Weise mit ||WebsiteBaker|| genutzt werden!

Link zum Thema im WebsiteBaker Forum

Zurück zur Übersicht