Adding Javascript moo.fx to your component

出典: Joomla! ドキュメンテーション

Languages Languages: 

English  • 日本語

This tutorial starts out with the ground work from Creating a simple component - Part 1, and extends that code to include use of javascript.

In this example we will utilize some functions from the the moo.fx library that comes bundled with Joomla! 1.5

目次

The basis

For simplicity of this tutorial, we use Creating a simple component - Part 1 as a basis of our example. Here are the final versions of the files included in the Creating a simple component - Part 1 example: 

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
 
// require the html view class
require_once (JApplicationHelper :: getPath('front_html', 'com_hello'));
 
$task = JRequest::getVar('task');
$name = JRequest::getVar('name', 'John');
 
switch ($task) {
	case 'show':
	default:
		hello_HTML::show($name);
		break;
}
?>
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class hello_HTML {
 
	function show($name) {
		echo 'Hello ' . $name . ' in our World!';
	}
 
}
?>

For details on how this code works, please go back and read up on the Creating a simple component - Part 1 tutorial.

Add some javascript

We are now going to load some javascript into our component, and we want to do this in the <head> section of the page. For this example we have used the moo.fx libraries, which come included with Joomla, but you could just as well use any other Javascript library in a similar fashion.

We use JHTML::_('behavior.mootools') to include the mootools javascript.

We use the $document->addScriptDeclaration() method to load the javascript we've written for this project. 

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class hello_HTML {
 
	function show($name) {
                // Load the moo.fx scripts
		JHTML::_('behavior.mootools');
 
                // Get the document to load custom script
                $document = & JFactory::GetDocument();
 
		echo 'Hello ' . $name . ' in our World!';
	}
 
}
?>


The HTML output of the <head> section page now looks like this: 

<html>
<head>
	<!-- some meta tags and other code removed from here for clarity -->
        <script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
        <script type="text/javascript" src="/media/system/js/mootools.js"></script>
</head>

The result is a component that loads the javascript mootools files when the show() function is called and the files are needed. Beats loading them into your template code with some php if-statements huh?

Create the moo.fx effect

We now want to show how to use some of the available functionality in moo.Fx. For this example we will create an effect that makes a box slide in and its contents to display on click.

This is the javascript we will use: 

<script type="text/javascript">
	// <!--
		var greeting;
		window.onload = function() {
			greeting = new Fx.Slide('greetingContainer', {height: true, opacity: true, duration: 500});
			greeting.hide();
		}	
	// -->
</script>

The source code itself should be easy to read for those of you familiar with Javascript. For all the others, here is a brief breakdown:

On the third line, the variable greeting is declared. Window.onload is an event that occurs when the page has loaded and here we initialize our nice effects.

On the fifth line we define the greeting variable to be an Fx.Slide effect. It is going to affect the object with id 'greetingContainer', and it will set the object to it's normal height and opacity. Duration is the time in milliseconds that the transition effect will last.

Last but not least, we call greeting.hide(); so that the greetingContainer is hidden when the page loads.

For more information on moo.Fx syntax you should read the moo.fx documentation.

Add containers and an event

What remains now is to add the greetingContainer to our HTML output. This is the code we will use: 

echo '<div onclick="greeting.toggle();">Click to see the greeting</div>
	  <div id="greetingContainer" style="background-color: #CCC;">
		  Hello ' . $name . ' in our World!
	  </div>';

Notice the onclick function in the first div and that the second div has its id set to 'greetingContainer'.

I have also added a background color to the container, just to make the container easier to spot on screen. Normally you would do this in a CSS stylesheet file.

The result

This is the end result and final version of hello.html.php. From version 2 you can see that I have added the javascript declaration in a simliar fashion to how I loaded the external javascript libraries, and I have modified the Hello World output as well to show the two boxes: One clickable and one that is toggled. 

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class hello_HTML {
 
        function show($name) {
                // Load the moo.fx scripts
                $document = & JFactory::getDocument();
 
		JHTML::_('behavior.mootools');
 
                $document->addScriptDeclaration("
                        var greeting;
                        window.onload = function() {
                                greeting = new Fx.Slide('greetingContainer', {height: true, opacity: true, duration: 500});
                                greeting.hide();
                        }       
                ");
 
                // Show the greeting, this time with a clickable header
                echo '<div id="greetingClicker" onclick="greeting.toggle();">Click to see the greeting</div>
                          <div id="greetingContainer" style="background-color: #CCC;">
                              Hello ' . $name . ' in our World!
                          </div>';
        }
}
?>


自動更新 2012/05/24 13:32:58

"http://docs.joomla.jp/Adding_Javascript_moo.fx_to_your_component" より作成