Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu der Vergleichsansicht

typo3:tt_news_listen-ansicht_mit_jahreszahlen [12.07.2014 19:43] (aktuell)
wolfgang angelegt
Zeile 1: Zeile 1:
 +===== tt_news: Listen-Ansicht mit Jahreszahlen =====
  
 +Für ein Projekt bestand die Anforderung darin, in der Listenansicht der tt_news die Meldungen nach Jahr separiert auszugeben.
 +
 +Auf die Schnelle eine Möglichkeit,​ die Jahreszahl der News per Javascript ins DOM einzubauen.
 +
 +==== Anpassungen im HTML-Template ====
 +
 +<code html>
 +<!-- im Template der tt_news Anpassungen für die LIST-View -->
 +
 +div class="​news-list-container">​
 +###​NEWS_CATEGORY_ROOTLINE###​
 + <!-- ###​CONTENT###​ begin
 +   This is the part of the template substituted with the list of news:
 +   -->
 +   ​
 + <!-- ###NEWS### begin
 + Template for a single item
 + -->
 +
 + <​table class="​newslist">​
 + <​tbody>​
 + <​tr>​
 + <​td class="​tekst_10px_inspring newsdate"​ width="​100">###​NEWS_DATE###</​td>​
 + <​td class="​tekst_10px_inspring"><​!--###​LINK_ITEM###​-->###​NEWS_TITLE###<​!--###​LINK_ITEM###​--></​td>​
 + </​tr>​
 + </​tbody>​
 + </​table>​
 +
 +
 + <!-- ###NEWS### end-->
 + <!-- ###​CONTENT### ​ end -->
 +###​BROWSE_LINKS###​
 +</​div>​
 +</​code>​
 +
 +==== Javascript auf der Seite mit Listenansicht ====
 +
 +**jQuery muss eingebunden sein.**
 +
 +<code typoscript>​
 +// Script um das Jahresdatum über der Newsliste anzuzeigen
 +
 +page.headerData.2222 = TEXT
 +page.headerData.2222.value (
 +<​script>  ​
 +$(function() {
 +   
 +
 +   ​first=true;​
 +
 +   ​currentyear = "​01.01.2099"​.split('​.'​);​
 +   ​$("​.newsdate"​).each(function (i) {
 +        ​
 +        if(first){
 +        $(this).parent().before('<​tr><​th class="​tekst_10px_inspring"><​span class="​kop_werken_grijs">​Datum</​span></​th><​th class="​tekst_10px_inspring"><​span class="​kop_werken_grijs">​Nieuws</​span></​th></​tr>'​);​
 +        //​alert(newyear[2]);​
 +        }
 +
 +        newyear = $(this).html().split('​.'​);​
 +
 +        if(currentyear[2]!= newyear[2]){
 +        $(this).parent().before('<​tr><​td class="​year"​ colspan="​2">'​+newyear[2]+'</​td></​tr>'​);​
 +        //​alert(newyear[2]);​
 +        }
 +
 +       ​first=false;​
 +       ​currentyear=newyear;​
 +      });
 +});
 +
 +</​script>​
 +)
 +</​code>​