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({Il colpevole si trova nella dichiarazione onActive: è in quel momento che viene applicata la proprietà block.
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');
}
};
},
...
...
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