Declaration de parametre dans item.xml et utilisation

More
13 years 9 months ago #8353 by micker
désoler j'avais pas vu ... 8-)

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
13 years 9 months ago #8358 by simjoubert
Bonjour merci de votre inéret pour ce post!
Je ne suis pas un pro donc merci de votre indulgence.
J'ai réaliser ce template avec le code javascript spry de dreamweaver donc attention aux histoires de license :roll: cela est dit.

Donc voici le code complet découpé par fichier.

fichier item.xml
attention il est placé dans le répertoire du template
Code:
<?xml version="1.0" encoding="utf-8"?> <metadata> <author>Simon Joubert</author> <website>www.jardineriefarrenq.com</website> <email>webmaster@jardineriefarrenq.com</email> <license>GPLv2</license> <version>1.0</version> <release>17 juin 2010</release> <description>Template article panneau reductible</description> <params addpath="/administrator/components/com_flexicontent/elements"> <!--Panneau réductible1--> <param name="titre_pan1" type="text" label="Titre panneau 1" description="Titre du panneau réductible 1 ce titre saffiche en haut du panneau." /> <param name="show_pan1" type="radio" default="0" label="Afficher panneau 1" description=" Affiche le panneau reductible1 si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> <param name="open_pan1" type="radio" default="0" label="Etat du panneau 1 par défaut" description=" Affiche le panneau reductible1 en mode ouvert si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> <!--Panneau réductible2--> <param name="titre_pan2" type="text" label="Titre panneau 2" description="Titre du panneau réductible 2 ce titre saffiche en haut du panneau." /> <param name="show_pan2" type="radio" default="0" label="Afficher panneau 2" description=" Affiche le panneau reductible1 si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> <param name="open_pan2" type="radio" default="0" label="Etat du panneau 2 par défaut" description=" Affiche le panneau reductible2 en mode ouvert si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> <!--Panneau réductible3--> <param name="titre_pan3" type="text" label="Titre panneau 3" description="Titre du panneau réductible 3 ce titre saffiche en haut du panneau." /> <param name="show_pan3" type="radio" default="0" label="Afficher panneau 3" description=" Affiche le panneau reductible1 si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> <param name="open_pan3" type="radio" default="0" label="Etat du panneau 3 par défaut" description=" Affiche le panneau reductible3 en mode ouvert si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> <!--Panneau réductible4--> <param name="titre_pan4" type="text" label="Titre panneau 4" description="Titre du panneau réductible 4 ce titre saffiche en haut du panneau." /> <param name="show_pan4" type="radio" default="0" label="Afficher panneau 3" description=" Affiche le panneau reductible1 si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> <param name="open_pan4" type="radio" default="0" label="Etat du panneau 4 par défaut" description=" Affiche le panneau reductible4 en mode ouvert si oui"> <option value="0">Non</option> <option value="1">Oui</option> </param> </params> <fieldgroups> <group>article-categorie</group> <group>article-favoris</group> <group>article-photo</group> <group>article-titre</group> <group>article-slogan</group> <group>article-description</group> <group>article-panneau1</group> <group>article-panneau2</group> <group>article-panneau3</group> <group>article-panneau4</group> <group>article-liens</group> <group>article-tags</group> </fieldgroups> <folder>images</folder> <cssitem> <file>css/item.css</file> <file>SpryAssets/SpryCollapsiblePanel.css</file> </cssitem> <jsitem> <file>SpryAssets/SpryCollapsiblePanel.js</file> </jsitem> </metadata>

voici le fichier item.php
attention il est placé dans le répertoire du template
Code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); // first define the template name $tmpl = $this->tmpl; ?> <div id="Article-Contenaire"class="flexicontent item<?php echo $this->item->id; ?> type<?php echo $this->item->type_id; ?>"> <!-- *****************Debut entete*******************--> <div id="Article-Entete"> <a name="haut_article"> <!--Boutons print pdf mail favorite--> <div id="Article-Boutons"><p class="buttons"> <?php echo flexicontent_html::pdfbutton( $this->item, $this->params ); ?> <?php echo flexicontent_html::mailbutton( 'items', $this->params, null , $this->item->slug ); ?> <?php echo flexicontent_html::printbutton( $this->print_link, $this->params ); ?> <?php echo flexicontent_html::editbutton( $this->item, $this->params ); ?> <?php if (isset ($this->item->positions['article-favoris'])) : ?> <?php foreach ($this->item->positions['article-favoris'] as $champ) : ?> <?php echo $champ->display; ?> <?php endforeach; ?> <?php endif; ?> </p> </div> <!--liste des catégories--> <div id="Article-Categorie"><?php if (isset ($this->item->positions['article-categorie'])) : ?> <?php foreach ($this->item->positions['article-categorie'] as $champ) : ?> <?php echo $champ->display; ?> <?php endforeach; ?> <?php endif; ?></div> </div> <!--******************Fin entete**********************--> <!--******************Debut Zone #1 ***********--> <div id="Article-Zone1"> <!--Photo--> <div id="Article-Photo"> <?php if (isset ($this->item->positions['article-photo'])) : ?> <?php foreach ($this->item->positions['article-photo'] as $champ) : ?> <?php echo $champ->display; ?> <?php endforeach; ?> <?php endif; ?> </div> <!--Titre--> <div id="Article-Titre"> <?php if (isset ($this->item->positions['article-titre'])) : ?> <?php foreach ($this->item->positions['article-titre'] as $champ) : ?> <h2 class="titre"><?php echo $champ->display; ?></h2> <?php endforeach; ?> <?php endif; ?> </div> <!--Slogan--> <div id="Article-Slogan"> <?php if (isset ($this->item->positions['article-slogan'])) : ?> <?php foreach ($this->item->positions['article-slogan'] as $champ) : ?> <?php echo $champ->display; ?> <?php endforeach; ?> <?php endif; ?> </div> <!--Ancres--> <?php if (($this->params->get('show_pan1') == 1)or ($this->params->get('show_pan2') == 1)or($this->params->get('show_pan3') == 1)or($this->params->get('show_pan4') == 1)) : ?> <div id="Article-Ancres"> <ul> <?php if ($this->params->get('show_pan1') == 1) : ?> <li>[url=#Pan1]<?php echo $this->params->get('titre_pan1'); ?>[/url]</li><?php endif; ?> <?php if ($this->params->get('show_pan2') == 1) : ?> <li>[url=#Pan2]<?php echo $this->params->get('titre_pan2'); ?>[/url]</li><?php endif; ?> <?php if ($this->params->get('show_pan3') == 1) : ?> <li>[url=#Pan3]<?php echo $this->params->get('titre_pan3'); ?>[/url]</li><?php endif; ?> <?php if ($this->params->get('show_pan4') == 1) : ?> <li>[url=#Pan4]<?php echo $this->params->get('titre_pan4'); ?>[/url]</li><?php endif; ?> </ul> </div> <?php endif; ?> <!--Description--> <div id="Article-Description"> <?php if (isset ($this->item->positions['article-description'])) : ?> <?php foreach ($this->item->positions['article-description'] as $champ) : ?> <?php echo $champ->display; ?> <?php endforeach; ?> <?php endif; ?> </div> </div> <!--******************Fin Zone #1 ************--> <!--******************Debut Panneau reductible#1 ***********--> <!--si parametre show_pan1==1;alors on affiche sinon rien--> <?php if ($this->params->get('show_pan1') == 1) : ?> <!-- si il ya des champs à afficher dans la position article-panneau1 --> <?php if (isset ($this->item->positions['article-panneau1'])) : ?> <!-- on creer une div contenant le panneau réductible --> <div id="CollapsiblePanel1" class="CollapsiblePanel"> <!--Titre du panneau réductible valeur du parametre titre_pan1 du fichier item.xml avec ancre nomée.Pour un appel depuis la position ancres--> <div class="CollapsiblePanelTab panArrondi" tabindex="0"> <a name="Pan1" id="Pan1"><h3><?php echo $this->params->get('titre_pan1'); ?></h3> </div> <!--Panneau réductible affichage des champs--> <div class="CollapsiblePanelContent"> <!-- Pour chaque champs present dans article-panneau1 on creer une nouvel div avec etiquette en h3 si affichage etiquette == oui --> <?php foreach ($this->item->positions['article-panneau1'] as $champ) : ?> <div class="divChampPan panArrondi"> <?php if ($champ->label) : ?><h3><?php echo $champ->label; ?></h3><br/><?php endif; ?> <?php echo $champ->display; ?> [url=#haut_article" title="Retour haut article" class="retourHaut]Retour haut article[/url]<br/> </div> <?php endforeach; ?> </div> </div> <?php endif; ?> <?php endif; ?> <!--******************Fin panneau reductible#1 *************--> <!--******************Debut Panneau reductible#2 ***********--> <!--si parametre show_pan2==1;alors on affiche sinon rien--> <?php if ($this->params->get('show_pan2') == 1) : ?> <!-- si il ya des champs à afficher dans la position article-panneau1 --> <?php if (isset ($this->item->positions['article-panneau2'])) : ?> <!-- on creer une div contenant le panneau réductible --> <div id="CollapsiblePanel2" class="CollapsiblePanel"> <!--Titre du panneau réductible valeur du parametre titre_pan1 du fichier item.xml avec ancre nomée.Pour un appel depuis la position ancres--> <div class="CollapsiblePanelTab panArrondi" tabindex="0"> <a name="Pan2" id="Pan2"><h3><?php echo $this->params->get('titre_pan2'); ?></h3></div> <!--Panneau réductible affichage des champs--> <div class="CollapsiblePanelContent"> <!-- Pour chaque champs present dans article-panneau1 on creer une nouvel div avec etiquette en h3 si affichage etiquette == oui --> <?php foreach ($this->item->positions['article-panneau2'] as $champ) : ?> <div class="divChampPan panArrondi"> <?php if ($champ->label) : ?><h3><?php echo $champ->label; ?></h3><br/><?php endif; ?> <?php echo $champ->display; ?> [url=#haut_article" title="Retour haut article" class="retourHaut]Retour haut article[/url]<br/> </div> <?php endforeach; ?> </div> </div> <?php endif; ?> <?php endif; ?> <!--******************Fin panneau reductible#2 *************--> <!--******************Debut Panneau reductible#3 ***********--> <!--si parametre show_pan3==1;alors on affiche sinon rien--> <?php if ($this->params->get('show_pan3') == 1) : ?> <!-- si il ya des champs à afficher dans la position article-panneau1 --> <?php if (isset ($this->item->positions['article-panneau3'])) : ?> <!-- on creer une div contenant le panneau réductible --> <div id="CollapsiblePanel3" class="CollapsiblePanel"> <!--Titre du panneau réductible valeur du parametre titre_pan1 du fichier item.xml avec ancre nomée.Pour un appel depuis la position ancres--> <div class="CollapsiblePanelTab panArrondi" tabindex="0"> <a name="Pan3" id="Pan3"><h3><?php echo $this->params->get('titre_pan3'); ?></h3></div> <!--Panneau réductible affichage des champs--> <div class="CollapsiblePanelContent"> <!-- Pour chaque champs present dans article-panneau1 on creer une nouvel div avec etiquette en h3 si affichage etiquette == oui --> <?php foreach ($this->item->positions['article-panneau3'] as $champ) : ?> <div class="divChampPan panArrondi"> <?php if ($champ->label) : ?><h3><?php echo $champ->label; ?></h3><br/><?php endif; ?> <?php echo $champ->display; ?> [url=#haut_article" title="Retour haut article" class="retourHaut]Retour haut article[/url]<br/> </div> <?php endforeach; ?> </div> </div> <?php endif; ?> <?php endif; ?> <!--******************Fin panneau reductible#3 *************--> <!--******************Debut Panneau reductible#4 ***********--> <!--si parametre show_pan4==1;alors on affiche sinon rien--> <?php if ($this->params->get('show_pan4') == 1) : ?> <!-- si il ya des champs à afficher dans la position article-panneau1 --> <?php if (isset ($this->item->positions['article-panneau4'])) : ?> <!-- on creer une div contenant le panneau réductible --> <div id="CollapsiblePanel4" class="CollapsiblePanel"> <!--Titre du panneau réductible valeur du parametre titre_pan1 du fichier item.xml avec ancre nomée.Pour un appel depuis la position ancres--> <div class="CollapsiblePanelTab panArrondi" tabindex="0"> <a name="Pan4" id="Pan4"><h3><?php echo $this->params->get('titre_pan4'); ?></h3></div> <!--Panneau réductible affichage des champs--> <div class="CollapsiblePanelContent"> <!-- Pour chaque champs present dans article-panneau1 on creer une nouvel div avec etiquette en h3 si affichage etiquette == oui --> <?php foreach ($this->item->positions['article-panneau4'] as $champ) : ?> <div class="divChampPan panArrondi"> <?php if ($champ->label) : ?><h3><?php echo $champ->label; ?></h3><br/><?php endif; ?> <?php echo $champ->display; ?> [url=#haut_article" title="Retour haut article" class="retourHaut]Retour haut article[/url]<br/> </div> <?php endforeach; ?> </div> </div> <?php endif; ?> <?php endif; ?> <!--******************Fin panneau reductible#4 *************--> <!--******************Debut Liens ***********--> <div id="Article-Liens"> <?php if (isset ($this->item->positions['article-liens'])) : ?> <?php foreach ($this->item->positions['article-liens'] as $champ) : ?> <?php echo $champ->display; ?> <?php endforeach; ?> <?php endif; ?> </div> <!--******************Fin Liens ************--> <!--******************Debut Tags ***********--> <?php if (isset ($this->item->positions['article-tags'])) : ?> <div id="Article-Tags"> <?php foreach ($this->item->positions['article-tags'] as $champ) : ?> <?php echo $champ->display; ?> <?php endforeach; ?> [url=#haut_article" title="Retour haut article" class="retourHaut]Retour haut article[/url]<br/> </div> <?php endif; ?> <!--******************Fin Description #4 ************--> <!--******************Debut Commentaire ***********--> <?php if ($this->params->get('comments')) : ?> <!-- BOF comments --> <div class="comments"> <?php if ($this->params->get('comments') == 1) : if (file_exists(JPATH_SITE.DS.'components'.DS.'com_jcomments'.DS.'jcomments.php')) : require_once(JPATH_SITE.DS.'components'.DS.'com_jcomments'.DS.'jcomments.php'); echo JComments::showComments($this->item->id, 'com_flexicontent', $this->escape($this->item->title)); endif; endif; if ($this->params->get('comments') == 2) : if (file_exists(JPATH_SITE.DS.'plugins'.DS.'content'.DS.'jom_comment_bot.php')) : require_once(JPATH_SITE.DS.'plugins'.DS.'content'.DS.'jom_comment_bot.php'); echo jomcomment($this->item->id, 'com_flexicontent'); endif; endif; ?> </div> <!-- EOF comments --> <?php endif; ?> <!--******************Fin Comentaire ************--> </div> <script type="text/javascript"> <!-- <?php if ($this->params->get('show_pan1') == 1) : ?> var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1"<?php if ($this->params->get('open_pan1') == 0) : ?>, {contentIsOpen:false}<?php endif; ?>);<?php endif; ?> <?php if ($this->params->get('show_pan2') == 1) : ?> var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2"<?php if ($this->params->get('open_pan2') == 0) : ?>, {contentIsOpen:false}<?php endif; ?>);<?php endif; ?> <?php if ($this->params->get('show_pan3') == 1) : ?> var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3"<?php if ($this->params->get('open_pan3') == 0) : ?>, {contentIsOpen:false}<?php endif; ?>);<?php endif; ?> <?php if ($this->params->get('show_pan4') == 1) : ?> var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4"<?php if ($this->params->get('open_pan4') == 0) : ?>, {contentIsOpen:false}<?php endif; ?>);<?php endif; ?> //--> </script>

Voici le fichier item.css
attention il est placé dans le sous-répertoire css
Code:
/* Default Theme : item template CSS file */ #Article-Contenaire { overflow: hidden; padding: 0px; width: 100%; margin-top: 20px; margin-right: 0; margin-bottom: 0; margin-left: 0; } #Article-Entete{ width:100%; color: #FFF; font-size: large; font-weight: bold; height: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #666; padding-bottom: 10px; } #Article-Boutons{ float:right; height: 30px; width: 30%; } #Article-Categorie{ height: 30px; width: 50%; float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 20px; font-style: italic; color: #F00; } #Article-Zone1{width:100%; clear:left;} #Article-Photo{ overflow: hidden; width:28%; height:250px; float:left; margin-bottom: 5%; margin-right: 5%; } #Article-Titre{ overflow: hidden; width:67%; } h2.titre{ color:#F03; font-size:xx-large; } #Article-Slogan{ overflow: hidden; width:67%; font-style: italic; color: #666; font-family: "Brush Script MT"; } #Article-Ancres{ overflow: hidden; width:67%; background-color: #E8E8E8; } #Article-Description{clear:both; width:100%;} #Article-Accordeon{ width:100%;} #Article-Liens{ clear:left; width:100%; background-color: #D8EBED; color: #0F0; } #Article-Tags{clear:left; width:100%;} #Article-Commentaires{clear:left; width:100%;} .retourHaut { font-size: medium; font-style: italic; font-weight: bold; color: #BBDBDA; text-decoration: none; padding: 5px; margin-top: 10px; margin-bottom: 30px; width: 150px; float: right; } .divChampPan { margin-bottom: 20px; border:thin double #BBDBDA; margin-top: 20px; padding-top: 20px; padding-bottom: 20px; padding-right: 10px; padding-left: 10px; } .panArrondi { -moz-border-radius: 0px 60px; -webkit-border-radius: 0px 60px; -o-border-radius: 0px 60px; border-radius: 0px 60px; } .colonne1{width:48%; margin-right:1%; float:left;} .colonne2{width:48%; margin-left:1%; float:left;}

voici le fichier SpryCollapsiblePanel.css
attention il doit être mis dans le sous-repertoire SpryAssets
Code:
@charset "UTF-8"; /* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* This is the selector for the main CollapsiblePanel container. For our * default style, the CollapsiblePanel is responsible for drawing the borders * around the widget. * * If you want to constrain the width of the CollapsiblePanel widget, set a width on * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill * up available space. * * The name of the class ("CollapsiblePanel") used in this selector is not necessary * to make the widget function. You can use any class name you want to style the * CollapsiblePanel container. */ .CollapsiblePanel { margin: 0px; padding: 0px; /* border-left: solid 1px #CCC; border-right: solid 1px #999; border-top: solid 1px #999; border-bottom: solid 1px #CCC; */} /* This is the selector for the CollapsiblePanelTab. This container houses * the title for the panel. This is also the container that the user clicks * on to open or close the panel. * * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * CollapsiblePanel panel tab container. */ .CollapsiblePanelTab { background-color: #333; margin: 0px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; font-family: sans-serif; font-size: x-large; font-weight: bold; color: #FFF; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #09F; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 50px; border-left-width: 10px; border-left-style: solid; border-left-color: #09F; } /* This is the selector for a CollapsiblePanel's Content area. It's important to note that * you should never put any padding on the content area element if you plan to * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate. * * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary * to make the widget function. You can use any class name you want to style a * CollapsiblePanel content container. */ .CollapsiblePanelContent { margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } /* An anchor tag can be used inside of a CollapsiblePanelTab so that the * keyboard focus ring appears *inside* the tab instead of around the tab. * This is an example of how to make the text within the anchor tag look * like non-anchor (normal) text. */ .CollapsiblePanelTab a { color: black; text-decoration: none; } /* This is an example of how to change the appearance of the panel tab that is * currently open. The class "CollapsiblePanelOpen" is programatically added and removed * from panels as the user clicks on the tabs within the CollapsiblePanel. */ .CollapsiblePanelOpen .CollapsiblePanelTab { background-color: #333; } /* This is an example of how to change the appearance of the panel tab when the * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed * whenever the CollapsiblePanel is closed. */ .CollapsiblePanelClosed .CollapsiblePanelTab { /* background-color: #EFEFEF */ } /* This is an example of how to change the appearance of the panel tab as the * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added * and removed from panel tab containers as the mouse enters and exits the tab container. */ .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover { background-color: #333; color: #3F0; } /* This is an example of how to change the appearance of all the panel tabs when the * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed * whenever the CollapsiblePanel gains or loses keyboard focus. */ .CollapsiblePanelFocused .CollapsiblePanelTab { background-color: #333; color: #F03; }

Et enfin le fichier SpryCollapsiblePanel.js
attention il doit être mis dans le sous-repertoire SpryAssets

Code:
// SpryCollapsiblePanel.js - version 0.7 - Spry Pre-Release 1.6.1 // // Copyright (c) 2006. Adobe Systems Incorporated. // All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are met: // // * Redistributions of source code must retain the above copyright notice, // this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above copyright notice, // this list of conditions and the following disclaimer in the documentation // and/or other materials provided with the distribution. // * Neither the name of Adobe Systems Incorporated nor the names of its // contributors may be used to endorse or promote products derived from this // software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE // POSSIBILITY OF SUCH DAMAGE. var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {}; Spry.Widget.CollapsiblePanel = function(element, opts) { this.element = this.getElement(element); this.focusElement = null; this.hoverClass = "CollapsiblePanelTabHover"; this.openClass = "CollapsiblePanelOpen"; this.closedClass = "CollapsiblePanelClosed"; this.focusedClass = "CollapsiblePanelFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.animator = null; this.hasFocus = false; this.contentIsOpen = true; this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN; this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP; Spry.Widget.CollapsiblePanel.setOptions(this, opts); this.attachBehaviors(); }; Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele) { if (ele && typeof ele == "string") return document.getElementById(ele); return ele; }; Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return; ele.className += (ele.className ? " " : "") + className; }; Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); }; Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className) { if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1) return false; return true; }; Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display) { if( ele ) ele.style.display = display; }; Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps) { if (!optionsObj) return; for (var optionName in optionsObj) { if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue; obj[optionName] = optionsObj[optionName]; } }; Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(e) { this.addClassName(this.getTab(), this.hoverClass); return false; }; Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e) { this.removeClassName(this.getTab(), this.hoverClass); return false; }; Spry.Widget.CollapsiblePanel.prototype.open = function() { this.contentIsOpen = true; if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else this.setDisplay(this.getContent(), "block"); this.removeClassName(this.element, this.closedClass); this.addClassName(this.element, this.openClass); }; Spry.Widget.CollapsiblePanel.prototype.close = function() { this.contentIsOpen = false; if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else this.setDisplay(this.getContent(), "none"); this.removeClassName(this.element, this.openClass); this.addClassName(this.element, this.closedClass); }; Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e) { if (this.isOpen()) this.close(); else this.open(); this.focus(); return this.stopPropagation(e); }; Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e) { this.hasFocus = true; this.addClassName(this.element, this.focusedClass); return false; }; Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e) { this.hasFocus = false; this.removeClassName(this.element, this.focusedClass); return false; }; Spry.Widget.CollapsiblePanel.KEY_UP = 38; Spry.Widget.CollapsiblePanel.KEY_DOWN = 40; Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e) { var key = e.keyCode; if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode)) return true; if (this.isOpen() && key == this.closePanelKeyCode) this.close(); else if ( key == this.openPanelKeyCode) this.open(); return this.stopPropagation(e); }; Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; return false; }; Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function() { var tab = this.getTab(); if (!tab) return; var self = this; Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false); Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false); Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, false); if (this.enableKeyboardNavigation) { // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't // rely on adding the tabindex attribute if it is missing to enable keyboard navigation // by default. // Find the first element within the tab container that has a tabindex or the first // anchor tag. var tabIndexEle = null; var tabAnchorEle = null; this.preorderTraversal(tab, function(node) { if (node.nodeType == 1 /* NODE.ELEMENT_NODE */) { var tabIndexAttr = tab.attributes.getNamedItem("tabindex"); if (tabIndexAttr) { tabIndexEle = node; return true; } if (!tabAnchorEle && node.nodeName.toLowerCase() == "a") tabAnchorEle = node; } return false; }); if (tabIndexEle) this.focusElement = tabIndexEle; else if (tabAnchorEle) this.focusElement = tabAnchorEle; if (this.focusElement) { Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false); Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false); Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false); } } }; Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture) { try { if (element.addEventListener) element.addEventListener(eventType, handler, capture); else if (element.attachEvent) element.attachEvent("on" + eventType, handler); } catch (e) {} }; Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func) { var stopTraversal = false; if (root) { stopTraversal = func(root); if (root.hasChildNodes()) { var child = root.firstChild; while (!stopTraversal && child) { stopTraversal = this.preorderTraversal(child, func); try { child = child.nextSibling; } catch (e) { child = null; } } } } return stopTraversal; }; Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function() { var panel = this.element; var tab = this.getTab(); var content = this.getContent(); if (this.contentIsOpen || this.hasClassName(panel, this.openClass)) { this.addClassName(panel, this.openClass); this.removeClassName(panel, this.closedClass); this.setDisplay(content, "block"); this.contentIsOpen = true; } else { this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); this.setDisplay(content, "none"); this.contentIsOpen = false; } this.attachPanelHandlers(); }; Spry.Widget.CollapsiblePanel.prototype.getTab = function() { return this.getElementChildren(this.element)[0]; }; Spry.Widget.CollapsiblePanel.prototype.getContent = function() { return this.getElementChildren(this.element)[1]; }; Spry.Widget.CollapsiblePanel.prototype.isOpen = function() { return this.contentIsOpen; }; Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element) { var children = []; var child = element.firstChild; while (child) { if (child.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(child); child = child.nextSibling; } return children; }; Spry.Widget.CollapsiblePanel.prototype.focus = function() { if (this.focusElement && this.focusElement.focus) this.focusElement.focus(); }; ///////////////////////////////////////////////////// Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts) { this.timer = null; this.interval = 0; this.fps = 60; this.duration = 500; this.startTime = 0; this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition; this.onComplete = null; this.panel = panel; this.content = panel.getContent(); this.doOpen = doOpen; Spry.Widget.CollapsiblePanel.setOptions(this, opts, true); this.interval = Math.floor(1000 / this.fps); var c = this.content; var curHeight = c.offsetHeight ? c.offsetHeight : 0; this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight; if (!doOpen) this.toHeight = 0; else { if (c.style.display == "none") { // The content area is not displayed so in order to calculate the extent // of the content inside it, we have to set its display to block. c.style.visibility = "hidden"; c.style.display = "block"; } // Clear the height property so we can calculate // the full height of the content we are going to show. c.style.height = ""; this.toHeight = c.offsetHeight; } this.distance = this.toHeight - this.fromHeight; this.overflow = c.style.overflow; c.style.height = this.fromHeight + "px"; c.style.visibility = "visible"; c.style.overflow = "hidden"; c.style.display = "block"; }; Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function() { var self = this; this.startTime = (new Date).getTime(); this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); }; Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function() { if (this.timer) { clearTimeout(this.timer); // If we're killing the timer, restore the overflow property. this.content.style.overflow = this.overflow; } this.timer = null; }; Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function() { var curTime = (new Date).getTime(); var elapsedTime = curTime - this.startTime; if (elapsedTime >= this.duration) { if (!this.doOpen) this.content.style.display = "none"; this.content.style.overflow = this.overflow; this.content.style.height = this.toHeight + "px"; if (this.onComplete) this.onComplete(); return; } var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration); this.content.style.height = ((ht < 0) ? 0 : ht) + "px"; var self = this; this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); }; Spry.Widget.CollapsiblePanelGroup = function(element, opts) { this.element = this.getElement(element); this.opts = opts; this.attachBehaviors(); }; Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions; Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement; Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren; Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget) { if (!element || !widget) return; if (!element.spry) element.spry = new Object; element.spry.collapsiblePanel = widget; }; Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element) { return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null; }; Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function() { if (!this.element) return []; return this.getElementChildren(this.element); }; Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex) { return this.getPanels()[panelIndex]; }; Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function() { if (!this.element) return; var cpanels = this.getPanels(); var numCPanels = cpanels.length; for (var i = 0; i < numCPanels; i++) { var cpanel = cpanels[i]; this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts)); } }; Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex) { var w = this.getElementWidget(this.getPanel(panelIndex)); if (w && !w.isOpen()) w.open(); }; Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex) { var w = this.getElementWidget(this.getPanel(panelIndex)); if (w && w.isOpen()) w.close(); }; Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function() { var cpanels = this.getPanels(); var numCPanels = cpanels.length; for (var i = 0; i < numCPanels; i++) { var w = this.getElementWidget(cpanels[i]); if (w && !w.isOpen()) w.open(); } }; Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function() { var cpanels = this.getPanels(); var numCPanels = cpanels.length; for (var i = 0; i < numCPanels; i++) { var w = this.getElementWidget(cpanels[i]); if (w && w.isOpen()) w.close(); } };

Voila vous avez l'ensemble de la source. C'est un juste retour des choses si cela peut aider car la communauté m'aide tout les jours...
si vous avez des questions et des idées pour améliorer ce template merci.

N'oublier l'arborecence :

-->dossier du template(le nom que vous voulez)
>fichier "item.xml"
>fichier "item.php"
>fichier "item.png"
>le reste des fichiers concernant l'affichage par catégorie


>sous dossier "css"(en minuscule sinon modifier item.xml)
>fichier "item.css"


>sous dossier "SpryAssets"(respectez majuscule et minuscule sinon modifier item.xml, SpryCollapsilePanel.js)

>fichier "SpryCollapsilePanel.js"
>fichier "SpryCollapsilePanel.css"


>sous dossier "images" (si vous avez des background personalisés ou des elements graphiques.)

Please Log in or Create an account to join the conversation.

More
13 years 9 months ago #8360 by micker
hello génial !!!
t'aurais un lien pour le voir en action ou mettre des images de démos ?
Merci pour ta participation en tout cas

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
13 years 9 months ago #8361 by simjoubert
j'y travail pour plus de lisibilité.
avec ce forum il n'ya pas moyen d'insérer une image sans quelle soit hébergée ailleurs? sinon mode d'emploi svp!

Please Log in or Create an account to join the conversation.

More
13 years 9 months ago #8362 by micker
hello mes l'image ici
imagik.fr/
et colle le lien dans ta balise image
Merci

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
13 years 9 months ago #8371 by simjoubert
voici une image du template avec le code

[img
[size=9:dhh38gwq]imagik.fr[/size]

exemple tout les onglets sont fermés
[img
[size=9:dhh38gwq]imagik.fr[/size]

exemple le premier onglet est ouvert les autres sont fermés
[img
[size=9:dhh38gwq]imagik.fr[/size]

exemple le premier et le troisième onglets ont été ouverts les autres sont fermés
[img
[size=9:dhh38gwq]imagik.fr[/size]

voila dés que mon site est en ligne je vous envoi le lien pour une démo live.

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.479 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline