The specifications of the plugin Xtrm-Addons Panel

Xtrm-Addons Panel incorporates a multitude of options for integrating custom panels.

• Adding css and javascript libraries on each page.
• Adding css and javascript libraries by auto-detection code.
• Adding of vertical panels.
• Adding of horizontal panels.
• Effect of vertical slip.
• Horizontal sliding effect.

Installation

1 - Installation

The installation of the plugin Xtrm-Addons Panel is conventionally carried out using the extension manager of Joomla.

2 - Configuration

Add libraires:

Option to select the method by which libraries javascript and css should be loaded.
Always: Load javascript and css files on every page.
Auto-detection: Load javascript and css files if one or more panels are detected in the page.

Use CSS:

Option to select whether the plugin should use its own css or not.
File: Loads the specified file.
None: No files are loaded.

Files:

Path to the css file which must be incorporated into pages.

How to use Xtrm-Addons Panel !?

Once the plugin enabled and configured, it only remains to put your panels in the contents of your choice.

How do I proceed ?

Plugin Xtrm-Addons Panel has no particular tag and consists of traditional HTML-based class of the elements.

There are two types of class in the plugin point of view:

Classes reserved

These classes are used for formatting of the css but are also used for the operation of boards and are used by the library javascript based on mootools.

Class	Tag	Description	Version
xtrm-panel	div	Identifies a div as main container of a panel.	1.0.0
xtrm-panel-header	ul	Identifies a ul as container of a list of tabs.	1.0.0
xtrm-panel-active	li	Identifies a li as container of the active link.	1.0.0
xtrm-panel-content	div	Identifies a div as container of the panel.	1.0.0
xtrm-panel-display	div	Identifies a div as the panel.	1.0.0
hidden	div	Hidde a content div.	1.0.0

The following classes are used to assign different transition effects.

Class	Tag	Description	Version
xtrm-fx-horizontal	div.xtrm-panel-display	Makes a sliding transition downward.	1.0.0
xtrm-fx-vertical	div.xtrm-panel-display	Makes a sliding transition from right to left.	1.0.0
xtrm-fx-reveal	div.xtrm-panel-display	Makes a fading transition with the disappearance and appearance of content-through.	1.0.0

Classes display

The display classes are predefined classes that can be used to display the panels in different forms vertically and horizontally.

Class	Tag	Description	Version
xtrm-panel-vertical-left	div.xtrm-panel	Viewing menu on the left.	1.0.0
xtrm-fx-vertical-content	div.xtrm-panel-content	Viewing menu on the left with vertical sliding effect.	1.0.0
xtrm-fx-reveal-content	div.xtrm-panel-content	Viewing menu on the left with fading effect.	1.0.0

The classes used by the plugin Xtrm-Addons Panel are prefixed by xtrm to ensure maximum compatibility with Joomla! as well as third-party extensions that could be installed.
To customize your panels, you can also add your own classes.

Example of adding a panel with horizontal menu (classic by default).

<div class="xtrm-panel">
  <ul class="xtrm-panel-header">
    <li class="xtrm-panel-active">
      <a href="#" rel="monPanel-1">Panel 1</a></li>
    <li><a href="#" rel="monPanel-2">Panel 2</a></li>
    <li><a href="#" rel="monPanel-3">Panel 3</a></li>
  </ul>
 
  <div class="xtrm-panel-content">
    <div class="xtrm-panel-display">
    </div>
  </div>
  <div class="clear"></div>
</div>
<div id="monPanel-1" class="hidden">
  Content of panel 1
</div>
<div id="monPanel-2" class="hidden">
  Content of panel 2
</div>
<div id="monPanel-3" class="hidden">
  Content of panel 3
</div>

1 - Declaration of the outer container:

The outer container is the main element that will contain the menu and the panel wich will be displayed with or without transition effect.

It will be declared as this way:

<div class="xtrm-panel">
<!--  
- Navigation between panels.
- Principal display panel.
-->
</div>

By default, the display panel is configured to be positioned horizontally with a menu at the top and a panel below.

<div class="xtrm-panel serves as an identifier for the library adding by auto-detect.

Classes display:
xtrm-panel-vertical-left: Viewing menu on the left.

2 - Declaration of the menu:

The menu for navigating between the different panels is presented in the form of a list of links that can be positioned both horizontally and vertically as well as above or below the display panel.

The menu will be declared as the following:

<ul class="xtrm-panel-header">
<!--  
- Menu items.
-->
</ul>

3 - Declaration of a menu item:

Menu items consist of a list of links each corresponding to a display panel.

Each menu item is declared as follows:

<li>
  <a href="#" rel="panel-content-1">Panel 1</a>
</li>

At each link found in the list will be associated the corresponding panel with rel of link equal id of panel.

4 - Declaration of the active menu:

The active link is defined by default with the class reserved xtrm-panel-active

It will be declared as the following:

<li class="xtrm-panel-active">
  <a href="#" rel="panel-content-1">Panel 1</a>
</li>

5 - Declaration of the principal display panel:

The display panel is composed of two elements for the display of data with different transition effects.

It will be declared as the following:

<div class="xtrm-panel-content">
  <div class="xtrm-panel-display"></div>
</div>

The first div containing the class xtrm-panel-content corresponds to the display area of the panel that will contain the data.
The second div internal containing the class xtrm-panel-display is the element that will receive data to display.

6 - Declaration of content elements:

The content elements are the different panels that contain the information to be displayed.

A content will be declared as the following:

<div id="monPanel-1" class="hidden">
  Content of panel 1
</div>

Each content must match the the link with id of panel equal at the rel attribut of the link.

Changelog

Version 1.1.0 (2012-01-18)

*

JS Library grab a panel instead of duplicate it before display it

*

Correct crash on feeds

Version 1.0.0 (2011-12-12)