Website Baker und jQuery
Einbindung von jQuery
Diese Anleitung bezieht sich auf WebsiteBaker Version 2.8.0. Ab der Version 2.8.1 braucht man diesen Weg nicht mehr zu gehen!
Voraussetzungen:
Websitebaker 2.8
Sicherer Umgang mit dem Texteditor.
Auf geht´s
Damit wir jQuery und die entsprechenden Plugins nutzen können müssen wir als erstes das jQuery Framework in unser Template integrieren damit die Plugins später auch darauf zurück greifen können. Als Plugin kommt hier auf der Seite die colorbox zum Einsatz.
Nachdem Sie sich in den Admin-Bereich eingeloggt haben klicken Sie auf Admin-Tools und wählen dort den Addon File Editor aus.
Klicken Sie hier nun auf "Liste der installierten Templates" und wählen dort das von Ihnen benutzte Template aus.
Der AFE listet Ihnen nun alle Dateien auf die sich in Ihrem Template-Ordner befinden.
Hier wählen Sie nun die index.php Ihres Templates aus und klicken diese an. Im erscheinenden Editorfenster können Sie nun die Datei bearbeiten.
In den head-Bereich des Templates tragen Sie als erstes den Pfad zur jQuery CSS Datei ein.
<link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/include/jquery/plugins/jquery-ui.css" media="screen,projection" />
Danach fügen Sie noch die Pfade zum Framework hinzu.
<script language="JavaScript" type="text/javascript"> //<![CDATA[ var URL = '<?php print WB_URL ?>'; var WB_URL = '<?php print WB_URL ?>'; var TEMPLATE_DIR = '<?php print TEMPLATE_DIR ?>'; //]]> </script> <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-min.js"></script> <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-ui-min.js"></script> <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-insert.js"></script>
Nun können wir die Datei speichern und den Editor schließen. Bei jedem Aufruf Ihrer Webseite wird nun das jQuery Framework geladen und kann von später noch einzubauenden Plugins genutzt werden.
An Ihrer Seite werden Sie noch keine Veränderungen feststellen, es ist aber wichtig bzw. der erste Schritt, das Framework einzubinden bevor wir uns um die Plugins kümmern.
Beispiel-Header Template Round
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo defined('DEFAULT_CHARSET') ? DEFAULT_CHARSET : 'utf-8'; ?>" />
<title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/template.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/include/jquery/plugins/jquery-ui.css" media="screen,projection" />
<?php
if (function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('css');
} ?>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
var URL = '<?php print WB_URL ?>';
var WB_URL = '<?php print WB_URL ?>';
var TEMPLATE_DIR = '<?php print TEMPLATE_DIR ?>';
//]]>
</script>
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-min.js"></script>
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-ui-min.js"></script>
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-insert.js"></script>
<?php
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('js');
} ?>
</head>
siehe auch:
Einbau des jQuery Plugins ColorBox A light-weight, customizable lightbox plugin for jQuery 1.3
ältere Artikel:
Die ColorBox als Modul (Snippet)
ColorRating als Modul (Snippet) A PHP/jQuery based 5-star Ajax rating script.
Icon und automatisches Öffnen in einem neuen Browserfenster für externe Links