Wir haben mehrere Möglichkeiten JQuery Basisscripte ins Template einzubinden. So wir wir es in der WebsiteBaker Version 2.8.0 gewohnt sind.

1) Im Head Bereich des Templates

zuerst die CSS

<link href="<?php echo WB_URL; ?>/include/jquery/plugins/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />

danach die Javascripte

<script src="<?php echo WB_URL; ?>/include/jquery/jquery-min.js" type="text/javascript"></script>
<script src="<?php echo WB_URL; ?>/include/jquery/jquery-ui-min.js" type="text/javascript"></script>
<script src="<?php echo WB_URL; ?>/include/jqueryjquery.insert.js" type="text/javascript"></script>

2) Oder wir fügen die Javascripte vor Bodyende ein

Legen wir los. Was hat sich in der WebsiteBaker Version 2.8.1 verändert? Was hat sich vereinfacht?

Nunmehr ist ein einfaches, automatisiertes Einbinden der Basisscripte des Jquery Framework möglich.

Wir kennen alle die Funktion die im head des Templates eingebunden wird, wo CSS und Javascripte der Module ins Template eingebunden werden.

<?php
if(function_exists('register_frontend_modfiles'))
{
    register_frontend_modfiles('css');
    register_frontend_modfiles('js');
}
?>

Nunmehr ist eine 3. Variante dazu gekommen, um das Einbinden des Jquery Frameworks zu erleichtern und das Einfügen der Scripte wie am Anfang beschrieben zu vollziehen

<?php
if(function_exists('register_frontend_modfiles'))
{
    register_frontend_modfiles('css');
    register_frontend_modfiles('jquery');
    register_frontend_modfiles('js');
}
?>

Wer es lieber vor Bodyende mag bindet es so ein

if(function_exists('register_frontend_modfiles_body'))
{
  register_frontend_modfiles_body('jquery'); 
  register_frontend_modfiles_body('js');
}
?>

Bitte unbedingt auf die Reihenfolge achten

Das Einbinden von Plugins und Funktionen ist natürlich ein anderes Thema. Website Baker bietet aber da eine Hife. und fragt ab ob sich im Template Verzeichnis eine Javascript-Datei jquery_frontend.js vorhanden ist. Wenn ja dann wird diese mit aufgerufen. In dieser Javascript Datei binden wir dann die Funktionen ein oder rufen die jquery plugins auf. Als Nächstes finden wir ein umfangreiches Beispiel.

if (jQuery) {
jQuery(document).ready(function(){

  if($("a[rel^='lightbox']").length) {
        $.insert(WB_URL+'/modules/jquery/plugins/jquery-slimbox2.css');
        $.insert(WB_URL+'/modules/jquery/plugins/jquery-slimbox2-min.js');
      }

   if($(".rss-feed").length)
   {
        $.insert(TEMPLATE_DIR + '/scripte/rsslib/simplepie.css');
   }

   if($("#btnToggle").length) {
        $.insert(WB_URL+'/modules/jquery/plugins/jquery.dropshadow.js');

				$(".menu").dropShadow({left: 3, top: 1, color: "#333333",opacity: 0.4, blur: 1});
				$(".title").dropShadow({left: 3, top: 3, blur: 1, color: "#03f", swap: false});
				$("#btnToggle").dropShadow();
                $(".lab").dropShadow({left: 10, top: 10, color: "#000", blur: 1, opacity: 0.4});

				// Toggle all shadows on and off
				$("#btnToggle").toggle(
					function()
					{
						$(".dropShadow").hide();
						$(this).val("Show Shadows");
					},
					function()
					{
						$(".dropShadow").show();
						$(this).val("Hide Shadows");
					});

      }

 if($(".rounded, .roundedb, .dogtr, #readyTest").length) {
     $.insert(WB_URL+'/modules/jquery/plugins/jquery-corner.js').ready(function() {

                $(".rounded").corner('round 15px'); /* test for rounding */
                $(".roundedb").corner('bottom 15px'); /* test for rounding */
                $(".dogtr").corner('dog tr 35px');

                $("#ready_test").corner();
                $('div.inner').wrap('<div class="outer"></div>');

                $('samp').wrap("<code></code>");
                $('corner-demo').wrap("<div></div>");

                $('div.demo, div.inner').each(function() {
                    var t = $('samp', this).text();
                    eval(t);
                });

                // fixed/fluid tests+-
                $("div.box, div.plain").corner();
                $("#abs").corner("cc:#08e");

        });
      }

  if($("[class^=brush]").length)
  {
    $.insert(TEMPLATE_DIR+'/syntax_highlightning.js');
  }

  $(".a").hover(function () {
      $(this).css({'background-color' : '#FFFFCC', 'font-weight' : '100'});
    }, function () {
      var cssObj = {
        'background-color' : 'transparent',
        'font-weight' : '100',
        'color' : '#000'
      }
      $(this).css(cssObj);
    });
  if($('a').length)
  {
    $.insert(TEMPLATE_DIR+'/icon-style.css');
    $.insert(TEMPLATE_DIR+'/icons_to_link.js');
  }
});

jQuery(function($) {

  $('#menu a').click(function() {

    $(this).blur().parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');

    return false;

  });
  
        if($('.resize').length)
        {
         $.insert(TEMPLATE_DIR+'/image_resize.js');

        }
  

});
};

Wie fest zu stellen ist,  haben wir uns im Ordner  modules einen Ordner jquery angelegt, in dem wir alle benötigten Plugins sammeln

Weitere Highlights finden sich in den Untermenues