JPane compatibile con IE7

Home

Apr | 10 15 Giovedì

	JPane compatibile con IE7
Autore : tampe125 » Questo articolo è stato letto: 5079 volte »

Guide - Joomla 1.5

Joomla! ha una procedura interna molto utile per creare elementi composti da "sliders" oppure da "tab". In quest'ultimo caso, purtroppo, il risultato non è perfettamente visualizzato in IE7. In questo articolo vi mostrerò come effettuare alcune modifiche per avere un risultato compatibile con i browser più moderni.

Subito prima di iniziare faccio una piccolissima precisazione: i test sono stati effettuati su piattaforma Windows con i seguenti browser:

Mozilla Firefox
Chrome
IE7 - IE8
Opera
Safari

Come avrete già intuito è stato volutamente ignorato IE6: è un browser datato, per cui è impensabile continuare a sviluppare per degli strumenti creati quasi 10 anni fa.
La piattaforma Mac non è stata testata perchè il computer su cui lavoro è un PC: se qualcuno può aiutare con altri test, è benvenuto :)

Detto questo, partiamo subito con la situazione. In alto potete vedere come si dovrebbero presentare i tab, mentre più sotto si trova la visualizzazione in IE7:

I problemi, a ben vedere, in realtà sono due:

1. Le "linguette" appaiono "staccate" dal loro contenuto
2. Il contenuto appare "indentato"

Andiamo con ordine.
Per "riattaccare" le due parti è sufficiente aggiungere questa regola CSS in un foglio di stile specifico per IE7 (in questo esempio chiamato iefix.css)

div.current {margin: -4px 0px 0px 0px;}

Ora dovete creare una regola condizionale per caricare il foglio di stile (maggiori info sulle regole condizionali).
Passiamo al secondo problema: il testo indentato.
Per risolvere il tutto sarebbe sufficiente aggiungere la proprietà "display: inline"; purtroppo lo script di Joomla! aggiunge già la proprietà "display: block" direttamente sull'elemento (inline), per cui anche se scrivessimo una regola ad hoc non verrebbe mai applicata: l'elemento ha una priorità maggiore sulla regola CSS.

var JTabs = new Class({

    getOptions: function(){
        return {

            display: 0,

            onActive: function(title, description){
                description.setStyle('display', 'block');
                title.addClass('open').removeClass('closed');
            },

            onBackground: function(title, description){
                description.setStyle('display', 'none');
                title.addClass('closed').removeClass('open');
            }
        };
    },

...
...

Il colpevole si trova nella dichiarazione onActive: è in quel momento che viene applicata la proprietà block.

Ma non tutto è perduto!
Infatti è possibile richiamare l'istanza JPane con dei parametri, che verranno utilizzati nella creazione del codice Javascript.
Per cui aggiungete questo codice e POI richiamate l'istanza:

$params = array("onActive" => "function(title, description){
                              description.setStyle('display', 'inline');
                              title.addClass('open').removeClass('closed');}");

$overviewpane    =& JPane::getInstance('Tabs', $params);

Et voilà! Tutto è magicamente al suo posto!

Fabbrica Binaria - Soluzioni originali ad esigenze quotidiane

Commenta questo articolo sul forum

< Prec.		Succ. >

Vedi anche:

27/10/2011 09:00 - DJ-ImageSlider per gallerie immagini di effetto
26/06/2010 06:32 - Visualizzare articoli in scorrimento con il modulo LofArticlesSroller
02/04/2008 11:54 - Image Slider 2.0 : immagini cool a comparsa [MOD]

Articoli più recenti:

05/06/2010 13:09 - Come realizzare una videoconferenza su Joomla
04/06/2010 06:39 - Un simpatico lettore mp3 nei vostri articoli con JosDewplayer plugin
31/05/2010 18:10 - Moduli: style, classe e suffisso css
27/05/2010 10:50 - Upgrade di Joomla! - Pro e contro
21/05/2010 00:15 - Effetti di animazione nel testo
14/05/2010 12:00 - Backup automatici con Cron e Joomlapack
01/05/2010 08:00 - Tabs Manager GK3: per inserire contenuti in schede
23/04/2010 19:54 - Il modello MVC in Joomla
22/04/2010 09:57 - I permessi Linux e l'hosting
17/04/2010 10:00 - Una frase al giorno

<< Articolo precedente

Ricerca su Joomla.it