Forums de la communauté francophone du CMS TYPO3: Tt_News Amenu Afficher/masquer Les Mois En Cliquant Sur L'année - Forums de la communauté francophone du CMS TYPO3

Aller au contenu

Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Tt_News Amenu Afficher/masquer Les Mois En Cliquant Sur L'année

#1 L'utilisateur est hors-ligne   cyborg 

  • Membre
  • PipPip
  • Groupe : Membres
  • Messages : 88
  • Inscrit(e) : 04-avril 07

Posté 07 janvier 2012 à 20:14

si ça peut servir... voici un petit Javascript, prototype et jquery, permettant de cacher les mois et de ne laisser afficher que les années dans les AMENU tt_news et d'afficher/masquer les mois lorsque l'on clique sur l'année. si on a cliquer sur un mois le menu de l'année sera déplier au chargement de la page :

avant
Image IPB

après
Image IPB







si vous utilisez prototype.js :

<script type="text/javascript" language="javascript">
		if (typeof ttnewsArchiveDateMenus == 'undefined') {	
			function ttnewsArchiveDateMenus(psAction, poElt)
			{
				poElt.nextSiblings().each(function(subLi) {
					if (subLi.hasClassName('news-amenu-item-year')) throw $break;
					switch (psAction) {
						case 'hide': 
							if (subLi.hasClassName('amenu-act')) {
								ttnewsArchiveDateMenus('show', poElt);
								throw $break;
							}
							subLi.hide(); break;
						case 'show':
							subLi.show(); break;
						case 'toggle': 
						default:
							subLi.toggle(); 
					}
				});
			}
		}
		$('li[class="news-amenu-item-year"]').each(function (li) {
   		ttnewsArchiveDateMenus('hide', li);
   		li.setStyle({'cursor': 'pointer'});
   		Event.observe(li, 'click', function(evt) {
  			Event.stop(evt);
  			ttnewsArchiveDateMenus('toggle', this);
   		});
		});
</script>



si vous utilisez JQuery :

<script type="text/javascript" language="javascript"> 
 	jQuery(function($){
			if (typeof ttnewsArchiveDateMenus == 'undefined') {
				function ttnewsArchiveDateMenus(psAction, poElt)
				{
					poElt.nextUntil('li.news-amenu-item-year').each(function(piPos,subLi) {
						switch (psAction) {
							case 'hide': 
								if ($(this).hasClass('amenu-act')) {
									ttnewsArchiveDateMenus('show', poElt);
									return false; // jquery break
								}
								$(this).hide('fast'); break;
							case 'show':
								$(this).show('fast'); break;
							case 'toggle': 
							default:
								$(this).toggle('fast'); 
						}
					});
				}
			}
			$('li[class="news-amenu-item-year"]').each(function () {
           	ttnewsArchiveDateMenus('hide', $(this));
           	$(this).css({'cursor': 'pointer'});
           	$(this).click(function(evt) {
  				evt.stopPropagation();
  				ttnewsArchiveDateMenus('toggle', $(this));
           	});
			});
		});
</script>



pour que ce code fonctionne vous devez il suffit de l'insérer dans votre template tt_news : tt_news_v3_template.html sous la balise </ul> :

<!-- ###TEMPLATE_ARCHIVE### begin
	Subpart for the news archive menu
 -->
<div class="news-amenu-container">
	<ul>
	<!-- ###CONTENT### begin -->
		<!-- ###MENUITEM### begin -->
		###ARCHIVE_YEAR###
		<li ###ARCHIVE_ACTIVE###><!--###LINK_ITEM###-->###ARCHIVE_TITLE###: ###ARCHIVE_COUNT### ###ARCHIVE_ITEMS###<!--###LINK_ITEM###--></li>
		<!-- ###MENUITEM### end-->
	<!-- ###CONTENT###  end -->
	</ul>

<!-- INSERER LE CODE JS ICI -->


</div>
<!-- ###TEMPLATE_ARCHIVE### end -->

Ce message a été modifié par cyborg - 07 janvier 2012 à 22:43.

0

#2 L'utilisateur est hors-ligne   friteuseb 

  • Pilier du forum
  • PipPipPipPipPipPipPip
  • Groupe : Administrateur
  • Messages : 4849
  • Inscrit(e) : 22-octobre 03

Posté 08 janvier 2012 à 12:23

Merci !
Cyril Wolfangel
Intégrateur TYPO3 Certifié
Representative - TYPO3 French Committee
Directeur technique - Eventex Nord
0

Partager ce sujet :


Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)