WebsiteBaker 2.8.2
Infos, Demos und Tutorials
neueste Tutorials
CKEditor und SyntaxHighlighter 3.0.83
Da der FCKEditor nicht mehr weiter entwickelt wird und Probleme in neueren...
weiterlesen..Link Preview mit Websnapr
Da Websnapr den Code geändert hat ist das Snippet nicht mehr...
weiterlesen..ColorRating als Modul (Snippet)
ColorRating, ist ein auf jQuery und PHP basierendes "Ajax 5 Sterne"...
weiterlesen..Statistik
| Besucher gesamt: | 52.652 |
| Besucher heute: | 38 |
| Besucher gestern: | 67 |
| Max. Besucher pro Tag: | 144 |
| gerade online: | 1 |
| max. online: | 57 |
| Seitenaufrufe gesamt: | 355.960 |
| Seitenaufrufe diese Seite: | 3.324 |
|
|
Anmeldung
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