Afficher/masquer plusieurs DIV et mémoriser son état

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Afficher/masquer plusieurs DIV et mémoriser son état

Afficher/masquer plusieurs DIV et mémoriser son état

par Mortillus » 07 mai 2010, 08:47

Bonjour,
J'ai lu le tuto Afficher/masquer un DIV et mémoriser son état en Javascript qui est génial.

Ma demande est un peux différente

Je voudrais afficher plusieur dans des div ou autre

J'ai ma configuration

Code : Tout sélectionner

<script type="text/javascript" src="'.__PS_BASE_URI__.'modules/addonvente/js/jquery.js"></script> <style type="text/css"> #flowtabs { width:900px; height:40px !important; margin:0 !important; padding:0; margin-bottom:-2px; } #flowtabs li { float:left; margin:0; padding:0; text-indent:0; list-style-type:none; } #flowtabs li a { background: #dddddd url("'.$this->_path.'images/tab.png") no-repeat 0 -80px; display:block; height: 40px; width: 100px; padding:0px 10px; margin:0px; /* font decoration */ color:#000; font-size:12px; line-height:33px; text-align:left; text-decoration:none; } #flowtabs li a img.img_lang { margin-top: -2px; margin-right: 5px; } #flowtabs a.tab_on { background-color: #DDFFAA; } #flowtabs a.tab_general { background-color: #FFF6D3; } #flowtabs a.tab_lang_default { background-color: #D1EAEF; } #flowtabs a:hover { background-position: 0 -40px; } #flowtabs a.current { background-position: 0 0 !important; cursor:default; font-weight: bold; } #flowpanes { background: #fffff0 none; width:898px; border: 1px solid #999; border-top: none; } #flowpanes .flowpanes_content { color:#000; margin:20px 14px; } #flowpanes div h2 { font-weight:normal; letter-spacing:1px; margin:10px 0 0 0; font-size:22px; } #flowpanes a { font-size:14px; } #flowpanes div.narrow { padding-right:120px; } .tab_void { margin-top: 3px; height: 35px; background-color: #F4F4F4; border-top: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; } #content_tabs{ margin-left: 14px; } </style>
J'ai mon tableau de lien

Code : Tout sélectionner

<div id="content_tabs"> <ul id="flowtabs"> <li ><a href="#" title="General" class="tab_general" >'.$this->l('General').'</a></li> <li ><a href="#" title="Customiz" class="tab_general" >'.$this->l('Customiz').'</a></li> <li ><a href="#" title="Category" class="tab_on tab_lang_default" >'.$this->l('Category').'</a></li> <li ><a href="#" title="Flash" class="tab_on " >'.$this->l('Flash Sales').'</a></li> <li><a href="#" title="Countant" class="tab_on " >'.$this->l('Coutant Price').'</a></li> <li ><a href="#" title="stocks" class="tab_on " >'.$this->l('clearance').'</a></li> <li ><a href="#" title="prive" class="tab_on " >'.$this->l('Sale prive').'</a></li> <li ><a href="#" title="Promotion" class="tab_on " >'.$this->l('Promotion').'</a></li> <li ><a href="#" title="Sale" class="tab_on " >'.$this->l('On sale !').'</a></li> <li ><div class="tab_void"></div></li> </ul>

J'ai mes correspondances en div

Code : Tout sélectionner

$this->_html .= ' <div id="flowpanes"> <br clear="all"> <div class="flowpanes_content" id="General">'; $this->_displayGeneral(); $this->_displayForm(); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="Customiz">'; $this->_displayCustomiz(); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="Category">'; $this->_displayCategoryPrice(); $this->showCategories(); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="Flash">'; $this->startVenteFlash(); $this->checkVF(); $this->_displayVenteflash(); $this->getVentesFlash(1); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="Countant">'; $this->startVenteFlash(); $this->checkVF(); $this->_displayCoutantPrice(); $this->getVentesFlash(2); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="stocks">'; $this->startVenteFlash(); $this->checkVF(); $this->_displayreductionofstocks(); $this->getVentesFlash(3); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="prive">'; $this->startVenteFlash(); $this->checkVF(); $this->_displayreductionofstocks(); $this->getVentesFlash(4); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="Promotion">'; $this->_displayReduction(); $this->getReduction("Promotion"); $this->_html .= '</div>'; $this->_html .= '<div class="flowpanes_content" id="Sale">'; $this->_displayReduction(); $this->getReduction("On sale !"); $this->_html .= '</div></div>';
Dans mon div customiz je voudrais aussi pouvoir avoir une case radio qui affiche ou cache une partie d'un formulaire

Code : Tout sélectionner

$this->_html .= '<div class="flowpanes_content" id="Customiz">'; $this->_displayCustomiz(); $this->_html .= '</div>';

Code : Tout sélectionner

$this->_html .= '<fieldset><legend><img src="../img/admin/contact.gif" />'.$this->l('Customiz color of text, visible, width, caractere modul').'</legend> <table class="table" border="0" width="800" cellpadding="0" cellspacing="2" id="maform"> <form action="'.$_SERVER['REQUEST_URI'].'" method="post" name="customiz" id="maform">'; /*********************************************************** GENERAL BLOCK *************************************************************************************/ $this->_html .= '<TR><TH colspan="6" style="text-align:center;font-weight: bold; font-size: 1.1em;">'.$this->l('GENERAL BLOCK').' : </TH></TR>'; $this->getblocks("1"); /*********************************************************** PRIVATE BLOCK *************************************************************************************/ $this->_html .= '<TR><TH colspan="6" style="text-align:center;font-weight: bold; font-size: 1.1em;">'.$this->l('PRIVATE BLOCK').' : </TH></TR>'; $this->getblocks("prive"); /*********************************************************** FLASH BLOCK *************************************************************************************/ $this->_html .= '<TR><TH colspan="6" style="text-align:center;font-weight: bold; font-size: 1.1em;">'.$this->l('FLASH BOCK').' : </TH></TR>'; $this->getblocks("flash"); /*********************************************************** CLEARANCE BLOCK *************************************************************************************/ $this->_html .= '<TR><TH colspan="6" style="text-align:center;font-weight: bold; font-size: 1.1em;">'.$this->l('CLEAREANCE BLOCK').' : </TH></TR>'; $this->getblocks("dest"); /*********************************************************** COUNTANT BLOCK *************************************************************************************/ $this->_html .= '<TR><TH colspan="6" style="text-align:center;font-weight: bold; font-size: 1.1em;">'.$this->l('COUTANT BLOCK').' : </TH></TR>'; $this->getblocks("coutant"); /*********************************************************** PROMO BLOCK *************************************************************************************/ $this->_html .= '<TR><TH colspan="6" style="text-align:center;font-weight: bold; font-size: 1.1em;">'.$this->l('PROMO BLOCK').' : </TH></TR>'; $this->getblocks("promo"); /*********************************************************** VALIDER *************************************************************************************/ $this->_html .= '<TD colspan=5><p align="center"><input name="AddDesign" type="submit" value="'.$this->l(' Add ').'" class="button"></p></TD>'; $this->_html .= ' </table> </fieldset> </form> <br /> ';
En fait je voudrais afficher qu'un tableau a la fois Général vente flash etc ....

Et j'ai 2 soucis la première c'est qu'il ne mémorise pas l'onglet mais grace a votre tuto je pense pouvoir le corriger.
Mais par contre sous mozilla sa fonctionne nickel mais avec IE ou autre c'est blinder erreur et rien ne s'affiche au bon endroit.
Merci d'avance.