6 min read

(Read more interesting articles on Joomla! 1.5 here.)

Using JavaScript effects

Joomla! includes mootools—a powerful compact JavaScript framework. Mootools enables us to do many things, but it is used extensively in Joomla! to create client-side effects. Some of these, such as the accordion, are accessible through Joomla! classes. Others require special attention.

In some instances it may be necessary to manually add the mootools library to the document. We can do this using the JHTML behavior.mootools type:

JHTML::_('behavior.mootools');

JPane

A pane is an XHTML area that holds more than one set of information. There are two different types of panes:

  • Tabs: Tabs provides a typical tabbed area with tabs to the top that are used to select different panes.
  • Sliders: Sliders, based on the mootools accordion, are vertical selections of headings above panels that can be expanded and contracted.

We use the JPane class to implement panes. This example demonstrates a basic tabular pane with two panels:

$pane =& JPane::getInstance('Tabs');
echo $pane->startPane('myPane');
{
  echo $pane->startPanel('Panel 1', 'panel1');
  echo "This is Panel 1";
  echo $pane->endPanel();
  echo $pane->startPanel('Panel 2', 'panel2');
  echo "This is Panel 2";
  echo $pane->endPanel();
}
echo $pane->endPane();

There are essentially two elements to a pane: the pane itself and the panels within the pane. We use the methods startPane() and endPane() to signify the start and end of the pane. When we use startPane() we must provide one string parameter, which is a unique identifier used to identify the pane.

Panels are always created internally to a pane and use the methods startPanel() and endPanel(). We must provide the startPanel() method with two parameters, the name, which appears on the tab, and the panel ID.

The following is a screenshot of the pane created from the previous code:

Had we wanted to create a slider pane instead of a tab pane when we used the getInstance() method, we would need to have supplied the parameter Sliders instead of Tabs. This is a screenshot of the same pane as a slider:

Panes are used extensively in Joomla!

As a general rule, tabs are used for settings and sliders are used for parameters.

Tooltips

Tool tips are small boxes with useful information in them that appear in response to onmouseover events. They are used extensively in forms to provide more information about fields and their contents. Tooltips can be extremely helpful to users by providing small helpful hints such as what value should be put into a field or what is the purpose of a field. It takes a small amount of code to implement but adds a lot of value for our users. So how do we add a tooltip?

We use JHTML to render tips easily. There are two types that we use:

  • behavior.tooltip is used to import the necessary JavaScript to enable tooltips to work and it does not return anything. We only ever need to call this type once in a page.
  • tooltip is used to render a tooltip in relation to an image or a piece of text. There are six parameters associated with tooltip, of which five are optional. We will explore the more common uses of these parameters.

The most basic usage of tooltip returns a small information icon that onmouseover displays as a tooltip; as this example demonstrates:

echo JHTML::_('tooltip', $tooltip);

The next parameter allows us to define a title that is displayed at the top of the tooltip:

echo JHTML::_('tooltip', $tooltip, $title);

The next parameter allows us to select an image from the includes/js/ThemeOffice directory. This example uses the warning.png image:

echo JHTML::_('tooltip', $tooltip, $title, 'warning.png');

The next obvious leap is to use text instead of an image and that is just what the next parameter allows us to do:

echo JHTML::_('tooltip', $tooltip, $title, null, $text);

There are some additional parameters that relate to using hypertext links. A full description of these is available in Appendix E, Joomla! HTML Library.

We can modify the appearance of tooltips using CSS. There are three style classes that we can use: .tool-tip, .tool-title, and .tool-text. The tooltip is encapsulated by the .tool-tip class, and the .tool-title and .tool-text styles relate to the title and the content.

This code demonstrates how we can add some CSS to the document to override the default tooltip CSS:

// prepare the cSS
$css = '/* Tooltips */

.tool-tip
{
    min-width: 100px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
}


.tool-title
{
    text-align: center;
}

.tool-text {
    font-style: italic;
}';

// add the CSS to the document
$doc =& JFactory::getDocument();
$doc->addStyleDeclaration($css);

Let’s add tooltips to our com_boxoffice/views/revue/tmpl/default.php layout file.

The first step is to enable tooltips by adding behavior.tooltip to the beginning of our layout file as follows:

<?php
  // No direct access
  defined('_JEXEC') or die('Restricted access');

  // Enable tooltips
  JHTML::_('behavior.tooltip');
?>

This should be placed at the beginning as illustrated. This adds the mootool JavaScript class Tips to our document and adds the following JavaScript code to the document heading:

<script type="text/javascript">
  window.addEvent('domready', function(){
    var JTooltips = new Tips($$('.hasTip'),
    { maxTitleChars: 50, fixed: false});
  });
</script>

Next, we identify those elements that we wish to have a tooltip enabled for. There are two documented ways to implement a tooltip. We will create both for the movie title to illustrate:

<tr>
  <td width="100" align="right" class="key">
    <span class="editlinktip hasTip"
          title="::<?php echo JText::_('TIP_001');?>">
      <label for="title">
        <?php echo JText::_('Movie Title'); ?>:
      </label>
    </span>
  </td>
  <td>
    <input class="inputbox" type="text"
           name="title" id="title" size="25"
	   value="<?php echo $this->revue->title;?>" />
      <?php echo JHTML::_('tooltip', JText::_('TIP_001')); ?>
  </td>
</tr>

The first approach wraps the label with a <span> that has two CSS classes declared editlinktip and hasTip, and a title attribute. The title attribute is a two part string with the parts separated by double colons; the first part is the tooltip title and the second is the tooltip text. Both methods will produce similar results.

There are a few differences that you should keep in mind. The first approach displays the tip when you hover over the spanned element (in this case the label field). The second approach will generate a small icon next to the input field; the tip will appear when you move your mouse over the icon.

You can duplicate the results of the first approach using the tooltip method with the following code:

<?php
  $label = '<label for ="title">'
         . JText::_('Movie Title')
         . '</label>'
echo JHTML::_('tooltip', JText::_('TIP_001'),
               '', '', $label);
?>

Note that the tip text is passed through JText with a key from our translation file. Here are the entries for our tips:

# Tip Text


TIP_001=Enter the film title.
TIP_002=Choose the MPAA film rating.
TIP_003=Provide a brief impression of the film.
TIP_004=Enter the name of the reviewer.
TIP_005=Enter 1-5 asterisks (*) for overall quality of the film.
TIP_006=Enter the date of the review (mm/dd/yyyy).
TIP_007=Do you wish to publish this revue?

In the end the method you choose to implement tooltips is largely a personal preference.

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here