Jquery tabs et array imbriqués [RESOLU] |
Bienvenue invité ( Connexion | Inscription )
Jquery tabs et array imbriqués [RESOLU] |
14 Jul 2014, 08:49
Message
#1
|
|
Ceinture jaune+ OSC Groupe : Membres Messages : 124 Inscrit : 7-November 07 Lieu : Lyon Membre no 19668 |
Bonjour,
Je cherche à imbriquer 2 Jquery Tabs pour avoir un menu et un sous-menu qui se déclenches au passage de la souris. Avec un menu simple, pas de problème (ou presque pas) : menu simple. Mais une fois le sous-menu imbriqué, je perds l'interactivité des onglets et tous les enregistrements de la BDD sont listés les uns sous les autres : sous-menu Voici le code : Code <div id="contentTop"> <?php $agri_contenu = Array(); $conteur_agri = 1; $liste_query = tep_db_query("select distinct eo.products_options_id, eov.products_options_values_id, eov.products_options_values_name, eovtoeo.products_options_values_to_products_options_id from " . TABLE_PRODUCTS_OPTIONS . " eo, " . TABLE_PRODUCTS_OPTIONS_VALUES . " eov, " .TABLE_PRODUCTS_OPTIONS_VALUES_TO_PRODUCTS_OPTIONS . " eovtoeo where eo.products_options_id = '1' and eo.products_options_id = eovtoeo.products_options_id and eov.products_options_values_id = eovtoeo.products_options_values_id and eov.language_id = '" . (int)$languages_id . "' order by eov.products_options_values_name"); ?> <ul> <?php while ($liste = tep_db_fetch_array($liste_query)) { ?> <li> <a href="#contentTop-<?php echo $conteur_agri; ?>">| <?php echo $liste['products_options_values_name']; ?> |</a> </li> <?php $agri_contenu[] = array( 'num_agri' => $conteur_agri, 'products_options_id' => $liste['products_options_id'], 'products_options_values_id' => $liste['products_options_values_id'], 'products_options_values_name' => $liste['products_options_values_name'], 'products_options_values_to_products_options_id' => $liste['products_options_values_to_products_options_id'], ); $conteur_agri++; } ?> </ul> <?php reset($agri_contenu); foreach( $agri_contenu as $agri ) { ?> <div id="contentMiddleTop"> <?php $fermes_contenu = Array(); $conteur_fermes = 1; $products_query = tep_db_query("select distinct ea.options_id, p.products_id, pd.products_name, pd.products_baseline from " . TABLE_PRODUCTS_ATTRIBUTES . " ea, " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where ea.options_values_id = '" . $agri['products_options_values_id'] . "' and ea.products_id = p.products_id and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); ?> <ul> <?php while ($products = tep_db_fetch_array($products_query)) { ?> <li> <a href="#contentMiddleTop-<?php echo $conteur_fermes; ?>">| <?php echo $products['products_name']; ?> |</a> </li> <?php $fermes_contenu[] = array( 'num_agri' => $conteur_agri, 'num_ferme' => $conteur_fermes, 'products_id' => $products['products_id'], 'products_name' => $products['products_name'], 'products_baseline' => $products['products_baseline'], ); $conteur_fermes++; } ?> </ul> <?php reset($fermes_contenu); foreach( $fermes_contenu as $fermes ) { ?> <div id="contentMiddle"> <div id="contentMiddleLeft" class="pinLeft"> <div id="titleWrap" class="contentText"> <h1><?php echo $fermes['products_name']; ?></h1> <?php if (tep_not_null($fermes['products_baseline'])) { echo '<p id="baseline">' . $fermes['products_baseline'] . '</p>'; } ?> </div> <div id="synhtesisWrap"> <div id="synhtesisLeft" class="contentText"> <?php echo '<h2>' . tep_draw_separator('pixel_red.gif', '27', '1') . TEXTE_ACTEURS . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?> <p> <ul> <?php $membres_query = tep_db_query("select distinct m.members_id, m.members_firstname, m.members_lastname from " . TABLE_MEMBERS . " m, " . TABLE_ADDRESS_BOOK . " ab where m.members_id = ab.members_id and entry_company = '" . $fermes['products_id'] . "' order by m.members_firstname"); while ($membres = tep_db_fetch_array($membres_query)) { echo '<li>' . $membres['members_firstname'] . ' ' . $membres['members_lastname'] . '</li>'; } ?> </ul> </p> </div> <div id="synhtesisRight" class="contentText"> <?php echo '<h2>' . tep_draw_separator('pixel_red.gif', '77', '1') . TEXTE_COORDONNEES . tep_draw_separator('pixel_red.gif', '77', '1') . '</h2>'; ?> <p> <ul> <?php $product_info_query = tep_db_query("select p.products_id, p.products_street_address, p.products_postcode, p.products_city, p.products_phone_mobile, p.products_phone_fix, pd.products_name, pd.products_baseline, pd.products_description, pd.products_url from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . $fermes['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); $product_info = tep_db_fetch_array($product_info_query); ?> <li><?php echo stripslashes($product_info['products_street_address']) . ' - ' . stripslashes($product_info['products_postcode']) . ' ' . stripslashes($product_info['products_city']); ?></li> <li><?php echo 'Mobile : ' . stripslashes($product_info['products_phone_mobile']); if (tep_not_null($product_info['products_phone_fix'])) echo ' / Fixe : ' . stripslashes($product_info['products_phone_fix']); ?> </li> <?php if (tep_not_null($product_info['products_url'])) echo '<li>Site Web : <a href="http://' . $product_info['products_url'] . '" target="_blank">' . stripslashes($product_info['products_url']) . '</a></li>'; ?> </ul> </p> </div> <div id="synhtesisCenter" class="contentText"> <?php echo '<h2>' . tep_draw_separator('pixel_red.gif', '27', '1') . TEXTE_ACTIVITES . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?> <p> <ul> <?php $activites_query = tep_db_query("select distinct eo.products_options_id, eo.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " eo, " . TABLE_PRODUCTS_ATTRIBUTES . " ea where eo.products_options_id = ea.options_id and ea.products_id = '" . $fermes['products_id'] . "' and eo.language_id = '" . (int)$languages_id . "' order by eo.products_options_name"); while ($activites = tep_db_fetch_array($activites_query)) { ?> <?php echo '<li>' . $activites['products_options_name'] . '</li>'; ?> <?php } ?> </ul> </p> </div> </div><!--fin synthesisWrap--> <div class="clearer" style="text-align:center;"><?php echo tep_draw_separator('pixel_red.gif', '250', '1'); ?></div> <div id="detailsWrap" class="contentText"> <?php echo $product_info['products_description']; ?> </div><!--fin detailsWrap--> </div><!--fin contentMiddleLeft--> <div id="contentMiddleRight" class="pinRight"> <?php $pi_query = tep_db_query("select products_id, image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . $fermes['products_id'] . "' order by sort_order"); ?> <div id="piGal-<?php echo $fermes['products_id']; ?>" class="piGal"> <ul> <?php $pi_counter = 0; while ($pi = tep_db_fetch_array($pi_query)) { $pi_counter++; $pi_entry = '<li style="float:left;"><a href="'; $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false); $pi_entry .= '" target="_blank" style="background:none;" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>'; $pi_entry .= '</li>'; echo $pi_entry; } ?> </ul> </div> </div><!--fin contentMiddleRight--> <script type="text/javascript"> $('#piGal-<?php echo $fermes['products_id']; ?> ul').bxGallery({ maxwidth: 300, maxheight: 300, thumbwidth: <?php echo (($pi_counter > 1) ? '97' : '0'); ?>, thumbcontainer: 400, load_image: 'ext/jquery/bxGallery/spinner.gif' }); </script> <script type="text/javascript"> $("#piGal-<?php echo $fermes['products_id']; ?> a[rel^='fancybox']").fancybox({ cyclic: true }); </script> </div><!--fin contentMiddle--> <?php } //fin array fermes ?> </div><!--fin contentMiddleTop--> <?php } //fin array agri ?> </div><!--fin contentTop--> <script> $(function() { $( "#contentTop" ).tabs({ event: "mouseover" }); $( "#contentMiddleTop" ).tabs({ event: "mouseover" }); }); </script> Ce qui est sûr, c'est que je ne maîtrise pas l'imbrication des arrays. Auriez-vous une solution ? Merci Ce message a été modifié par equisol - 16 Jul 2014, 12:53. -------------------- Goo69
|
|
16 Jul 2014, 12:50
Message
#2
|
|
Ceinture jaune+ OSC Groupe : Membres Messages : 124 Inscrit : 7-November 07 Lieu : Lyon Membre no 19668 |
Ce fût laborieux, mais je viens de trouver l'origine du problème.
Pas de problème d'array mais de javascript. Ce bout de script ne fonctionne pas pour imbriquer les Tabs de jquery : Code <script> $(function() { $( "#contentTop" ).tabs({ event: "mouseover" }); $( "#contentMiddleTop" ).tabs({ event: "mouseover" }); }); </script> Par contre, en utilisant non pas 2 id différents mais une classe commune, alors ça fonctionne ! Code <script> $(function() { $( ".tabsElements" ).tabs({ event: "mouseover" }); }); </script> J'ai revu le nom des div pour que ce soit plus propre et voici donc ce que ça donne : Code <div id="contentWrap"> <div id="tabsElements" class="tabsElements"> <div id="contentTop"> <?php $tab_contenu = Array(); $conteur_tab = 1; $liste_query = tep_db_query("select distinct eo.products_options_id, eov.products_options_values_id, eov.products_options_values_name, eovtoeo.products_options_values_to_products_options_id from " . TABLE_PRODUCTS_OPTIONS . " eo, " . TABLE_PRODUCTS_OPTIONS_VALUES . " eov, " .TABLE_PRODUCTS_OPTIONS_VALUES_TO_PRODUCTS_OPTIONS . " eovtoeo where eo.products_options_id = '1' and eo.products_options_id = eovtoeo.products_options_id and eov.products_options_values_id = eovtoeo.products_options_values_id and eov.language_id = '" . (int)$languages_id . "' order by eov.products_options_values_name"); ?> <ul> <?php while ($liste = tep_db_fetch_array($liste_query)) { ?> <li> <a href="#product-<?php echo $conteur_tab; ?>">| <?php echo $liste['products_options_values_name']; ?> |</a> </li> <?php $tab_contenu[] = array( 'num_tab' => $conteur_tab, 'products_options_id' => $liste['products_options_id'], 'products_options_values_id' => $liste['products_options_values_id'], 'products_options_values_name' => $liste['products_options_values_name'], 'products_options_values_to_products_options_id' => $liste['products_options_values_to_products_options_id'], ); $conteur_tab++; } ?> </ul> </div><!--fin contentTop--> <?php reset($tab_contenu); foreach( $tab_contenu as $product ) { ?> <div id="tabsSubElements" class="tabsElements"> <div id="product-<?php echo $product['num_tab']; ?>"> <div id="contentMiddleTop"> <?php $subtabs_contenu = Array(); $conteur_subtabs = 1; $products_query = tep_db_query("select distinct ea.options_id, p.products_id, pd.products_name, pd.products_baseline from " . TABLE_PRODUCTS_ATTRIBUTES . " ea, " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where ea.options_values_id = '" . $product['products_options_values_id'] . "' and ea.products_id = p.products_id and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); ?> <ul> <?php while ($products = tep_db_fetch_array($products_query)) { ?> <li> <a href="#subElement-<?php echo $conteur_subtabs; ?>">| <?php echo $products['products_name']; ?> |</a> </li> <?php $subtabs_contenu[] = array( 'num_sub_product' => $conteur_subtabs, 'products_id' => $products['products_id'], 'products_name' => $products['products_name'], 'products_baseline' => $products['products_baseline'], ); $conteur_subtabs++; } ?> </ul> </div><!--fin contentMiddleTop--> <?php reset($subtabs_contenu); foreach( $subtabs_contenu as $subElement ) { ?> <div id="subElement-<?php echo $subElement['num_sub_product']; ?>"> <div id="contentMiddle"> <div id="contentMiddleLeft" class="pinLeft"> <div id="titleWrap" class="contentText"> <h1><?php echo $subElement['products_name']; ?></h1> <?php if (tep_not_null($subElement['products_baseline'])) { echo '<p id="baseline">' . $subElement['products_baseline'] . '</p>'; } ?> </div> <div id="synhtesisWrap"> <div id="synhtesisLeft" class="contentText"> <?php echo '<h2 style="padding-left:20px;">' . TEXTE_ACTEURS . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?> <p> <ul> <?php $membres_query = tep_db_query("select distinct m.members_id, m.members_firstname, m.members_lastname from " . TABLE_MEMBERS . " m, " . TABLE_ADDRESS_BOOK . " ab where m.members_id = ab.members_id and entry_company = '" . $subElement['products_id'] . "' order by m.members_firstname"); while ($membres = tep_db_fetch_array($membres_query)) { echo '<li>' . $membres['members_firstname'] . ' ' . $membres['members_lastname'] . '</li>'; } ?> </ul> </p> </div> <div id="synhtesisRight" class="contentText"> <?php echo '<h2 style="padding-left:20px;">' . TEXTE_COORDONNEES . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?> <p> <ul> <?php $product_info_query = tep_db_query("select p.products_id, p.products_street_address, p.products_postcode, p.products_city, p.products_phone_mobile, p.products_phone_fix, pd.products_name, pd.products_baseline, pd.products_description, pd.products_url from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . $subElement['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); $product_info = tep_db_fetch_array($product_info_query); ?> <li><?php echo stripslashes($product_info['products_street_address']) . '<br>' . stripslashes($product_info['products_postcode']) . ' ' . stripslashes($product_info['products_city']); ?></li> <li><?php echo 'Mobile : ' . stripslashes($product_info['products_phone_mobile']); ?></li> <?php if (tep_not_null($product_info['products_phone_fix'])) echo '<li>Fixe : ' . stripslashes($product_info['products_phone_fix'] . '</li>'); ?> <?php if (tep_not_null($product_info['products_url'])) echo '<li><a href="http://' . $product_info['products_url'] . '" target="_blank">' . stripslashes($product_info['products_url']) . '</a></li>'; ?> </ul> </p> </div> <div id="synhtesisCenter" class="contentText"> <?php echo '<h2 style="padding-left:20px;">' . TEXTE_ACTIVITES . tep_draw_separator('pixel_red.gif', '27', '1') . '</h2>'; ?> <p> <ul> <?php $activites_query = tep_db_query("select distinct evo.products_options_values_id, evo.products_options_values_name from " . TABLE_PRODUCTS_OPTIONS_VALUES . " evo, " . TABLE_PRODUCTS_ATTRIBUTES . " ea where evo.products_options_values_id = ea.options_values_id and ea.products_id = '" . $subElement['products_id'] . "' and evo.language_id = '" . (int)$languages_id . "' order by evo.products_options_values_name"); while ($activites = tep_db_fetch_array($activites_query)) { ?> <?php echo '<li>' . $activites['products_options_values_name'] . '</li>'; ?> <?php } ?> </ul> </p> </div> </div><!--fin synthesisWrap--> <div class="clearer" style="text-align:center;"><?php echo tep_draw_separator('pixel_red.gif', '250', '1'); ?></div> <div id="detailsWrap" class="contentText"> <?php echo $product_info['products_description']; ?> </div><!--fin detailsWrap--> </div><!--fin contentMiddleLeft--> <div id="contentMiddleRight" class="pinRight"> <?php $pi_query = tep_db_query("select products_id, image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . $subElement['products_id'] . "' order by sort_order"); ?> <div id="piGal-<?php echo $subElement['products_id']; ?>" class="piGal"> <ul> <?php $pi_counter = 0; while ($pi = tep_db_fetch_array($pi_query)) { $pi_counter++; $pi_entry = '<li style="float:left;"><a href="'; $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false); $pi_entry .= '" target="_blank" style="background:none;" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>'; $pi_entry .= '</li>'; echo $pi_entry; } ?> </ul> </div> </div><!--fin contentMiddleRight--> <script type="text/javascript"> $('#piGal-<?php echo $subElement['products_id']; ?> ul').bxGallery({ maxwidth: 300, maxheight: 300, thumbwidth: <?php echo (($pi_counter > 1) ? '97' : '0'); ?>, thumbcontainer: 400, load_image: 'ext/jquery/bxGallery/spinner.gif' }); </script> <script type="text/javascript"> $("#piGal-<?php echo $subElement['products_id']; ?> a[rel^='fancybox']").fancybox({ cyclic: true }); </script> </div><!--fin contentMiddle--> </div><!--fin subElement-x --> <?php } ?> </div><!--fin product-x--> </div><!--fin tabsSubElements--> <?php } ?> </div><!--fin tabsElements--> <div id="contentBottom"></div> <div id="contentEnd" style="text-align:center; padding-top:10px; padding-bottom:10px;"> <?php echo tep_image(DIR_WS_IMAGES . 'hameau.png'); ?> </div> </div><!--fin contentWrap --> Il subsiste encore un problème cependant, celui des vignettes de bxGallery, qui fait l'objet d'un sujet dans la thématique "Design OsC2.3" mais qui n'a pas encore trouvé sa solution : http://www.oscommerce-fr.info/forum/index....showtopic=71261 -------------------- Goo69
|
|
Version bas débit | Nous sommes le : 29th March 2024 - 16:16 |
Ce site est déclaré auprès de la commision Nationale de l'Informatique et des Libertés (déclaration n°: 1043896) |