Through the last few pages we have accomplished our main objective: reducing the number of times our site loads the jQuery library. However, two extensions are left:
- The jQuery tabs module
- The c7DialogMOD module we used for our login form
These two extensions not only use the jQuery library, but also the jQuery UI library.
Note
If you want to know more about jQuery UI visit http://jqueryui.com/. This is an interesting library that won't disappoint you. It is very useful.
The jQuery UI is a must for these two extensions, as is the library that provides the dialog and tabs methods. The problem here is that each one of these extensions loads its own copy of the UI library, and also a copy of the jQuery library.
This too is something that we can solve. Remember the SC jQuery plugin? It will also help us this time; just open it to take a look. Go to the administrator screen of our site and then go to Extensions | Plugin Manager | System - SC jQuery. Take a look at the Parameters zone. I have detailed the important part in the next image:
In these parameters we can not only select to load the jQuery UI library, but we can also decide which theme to use.
Note
Notice here that the plugin loads all of the jQuery UI libraries.
This will help us make all the extensions of our site share the same theme, and of course use the same library. If we don't do this, each library will try to use its own theme or library, which can therefore make our site look less attractive.
Usually, keeping color consistency makes the sites look better and more professional. Color consistency is an important part of every design. Some clients don't share this opinion, and prefer to have the largest variety of colors on their sites. Though this can be done, we will try to keep color consistency in our site, much to the delight of our site visitors.
We will now start working with these extensions. Next, we will see the c7DialogMOD extension.
This was one of the last extensions we introduced. We used it to display a module in a dialog. The login module was selected, as shown in the following screenshot:
Changes needed in this extension will also be easy. All modifications will be
made to the modules/mod_c7dialogmod/mod_c7dialogmod.php file.
In this file, look for the following code:
switch ($c7dialogmod_theme){
case lightness:
$document->addStyleSheet($burl.'modules/mod_c7dialogmod /jquery/theme/theme_lightness/ui.all.css'),
break;
case darkness:
$document->addStyleSheet($burl.'modules/mod_c7dialogmod /jquery/theme/theme_darkness/ui.all.css'),
break;
case trontastic:
$document->addStyleSheet($burl.'modules/mod_c7dialogmod /jquery/theme/theme_trontastic/ui.all.css'),
break;
case southstreet:
$document->addStyleSheet($burl.'modules/mod_c7dialogmod /jquery/theme/theme_southstreet/ui.all.css'),
break;
case swankypurse:
$document->addStyleSheet($burl.'modules/mod_c7dialogmod /jquery/theme/theme_swankypurse/ui.all.css'),
break;
default:
$document->addStyleSheet($burl.'modules/mod_c7dialogmod /jquery/theme/ui.all.css'),
break;
}
What the module is doing here is quite easy to see. The switch structure is
using the $c7dialogmod_theme variable to decide which theme
to load. As we want to use the theme selected in our SC jQuery plugin, the
following changes need to be made:
$app =& JFactory::getApplication();
if( !$app->get('jquery') ){
switch ($c7dialogmod_theme)
{
case lightness:
.
.
. The rest of the code would be here
.
.
default:
$document->addStyleSheet($burl.'modules/mod_c7dialogmod /jquery/theme/ui.all.css'),
break;
}
}
Mostly, the only thing we need to do is envelop the previous code between our already well-known code:
$app =& JFactory::getApplication();
if( !$app->get('jquery') ){
//The rest of the code would be here
}
This will solve the theme part; now, to the libraries load part. Reading down the code we will see the following code:
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/jquery-1.3.2.js'),
$document->addCustomTag('<script type="text/javascript"> jQuery.noConflict();</script>'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.core.js'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.dialog.js'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.draggable.js'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.resizable.js'),
Here we can see how the jQuery library is invoked, and then the
noConflict method, and after all the jQuery UI part, the always
essential core. Later the dialog, draggable, and resizable scripts are loaded.
These are all necessary to show the dialog, drag it, and resize it.
All these library loads are not needed, as all of them are included in the SC jQuery library load. Just envelop it as follows:
if( !$app->get('jquery') ){
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/jquery-1.3.2.js'),
$document->addCustomTag('<script type="text/javascript"> jQuery.noConflict();</script>'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.core.js'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.dialog.js'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.draggable.js'),
$document->addScript($burl.'modules/mod_c7dialogmod /jquery/ui.resizable.js'),
}
Done! To the next one!
This is our last extension; no more modifications will be needed. You have been doing a great job, so keep up with it. But first take a look at the extension we are talking about in the following screenshot:
This extension will also be extremely easy to modify, just open the
modules/mod_jtabs/mod_jtabs.php and read down the code until you
find:
<script type="text/javascript" src="<?php echo JURI::root(); ?> modules/mod_jtabs/jquery/jquery.no.conflict.js"> </script>
<script type="text/javascript" src="<?php echo JURI::root(); ?> modules/mod_jtabs/jquery/jquery.min.js"> </script>
<script type="text/javascript" src="<?php echo JURI::root(); ?> modules/mod_jtabs/jquery/jquery-ui.min.js"> </script>
<link rel="stylesheet" href="<?php echo JURI::root(); ?> modules/mod_jtabs/jquery/jquery-ui.css" type="text/css" />
Note
This module loads the libraries and the theme in the body part of our site, exactly in the module position where the module is loaded. It's important to note that, as the module is called after other modules, its style files, and the theme, will prevail over the previously loaded modules. We are going to solve this.
This time, for a change, we only need to envelop this code as follows:
<?php
$app =& JFactory::getApplication();
if( !$app->get('jquery') ){
?>
<script type="text/javascript" src="<?php echo JURI::root(); ?>modules/mod_jtabs/jquery/jquery.no.conflict.js"></script>
<script type="text/javascript" src="<?php echo JURI::root(); ?>modules/mod_jtabs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo JURI::root(); ?>modules/mod_jtabs/jquery/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php echo JURI::root(); ?>modules/ mod_jtabs/jquery/jquery-ui.css" type="text/css" />
<?php
}
?>
But hey, don't run away in happiness! There's still some modification necessary. A bit down in the code file, we can see:
$(function() {
$("#tabs").tabs
We need to change that to:
jQuery(document).ready(function($) {
Why's that done? It's because the SC jQuery plugin sets jQuery to the
no conflict mode. So the $ may not be available, and thus we
need to use jQuery instead.
Phew! That has been quite a lot of work. But we are done, and we have reduced a lot of jQuery library loads. In fact if all has gone OK, and we will have the library loaded only once.
But continue reading, there's still more work to do.