jfmulticontent Tabs mit jQuery Address

Viele nette UI-Elemente der jQuery-UI Bibliothek wie Tabs oder Accordions haben zunächst einmal keine Funktion zur Änderung der Adresszeile integriert.

Abhilfe kann dabei das Plugin jQuery Address schaffen.

Um beispielsweise die Tabs der TYPO3-Erweiterung jfmulticontent mit jQuery Address zu verzahnen, kann man folgende Anpassungen vornehmen:

  1. Einbindung des jQuery Address Plugins
  2. Kopieren der Datei typo3conf/ext/jfmulticontent/res/tx_jfmulticontent_pi1.js in ein gewünschtes Verzeichnis
  3. Anpassen des TS von der Erweiterung jfmulticontent
  4.          plugin.tx_jfmulticontent_pi1 {
                   templateFileJS = fileadmin/js/tx_jfmulticontent_pi1.js 
             }
            
  5. Anpassen des JS-Templates für die Erweiterung jfmulticontent
  6. <!-- ###TEMPLATE_TAB_JS### begin -->
    jQuery(document).ready(function(){
        <!-- ###FIX_HREF### -->
        jQuery('####KEY### ul li a').each(function(id, item){
            var temp = item.href.split('#');
            var temp_last = temp[temp.length-1];
            var search = /^###PREG_QUOTE_KEY###/;
            if (search.test(temp[temp.length-1])){
                item.href = '#'+temp_last;
            }
        });
        <!-- ###FIX_HREF### -->
        var $tabs = jQuery('####KEY###').tabs({
            ###OPTIONS###
        })###ROTATE###;
    
        var linkSelector = '####KEY### ul:first a';
        var contentSelector = '####KEY### div:first';
        var currentSelector = function(value) {
            value = value.replace('/', '');
            return 'a[href=#' + value + ']';
        };
    
        $(linkSelector).address();
    
        $.address.init(function(event) {
            $tabs.tabs({selected: $(linkSelector).index($(currentSelector(event.value)))});
            
    
        }).externalChange(function(event) {
            $tabs.tabs('select', $(currentSelector(event.value)).attr('href'));
        }).change(function(event) {
            // Sets the page title
            $.address.title($.address.title().split(' | ')[0] + ' | ' +
                $(currentSelector(event.value)).text());
        }).history(true);
    
    });
    <!-- ###TEMPLATE_TAB_JS### end -->
    

Veröffentlicht von

avatar

Sebastian Schreiber

Ich bin 1980 in Bergisch Gladbach geboren. Nach dem Abitur und Zivildienst habe ich 2000 an der Fachhochschule Lippe & Höxter das Studium der Medienproduktin begonnen und nach längeren Aufenthalten in Valencia und Berlin 2003 das Studium mit dem Abschluss Bachelor of Science in Medienproduktion abgeschlossen. Nach einer Festanstellung kurz nach dem Studium in einer kleinen Webagentur in Köln mit Schwerpunkt TYPO3 bin ich nun seit 2008 freiberuflicher Webentwickler.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.