Ho ereditato una web part da vecchio fornitore di un client ed ha un problema di dimensioni immagine. Le immagini dovrebbero essere 60×50 ma per qualche strano motivo, il fornitore originale li ha costretti in 42×42, modo da apparire schiacciati:
|
Buona immagine |
Cattiva immagine |
 |
|
Ecco il codice (un po' semplificato):
<table class = 'esteso-outlook'>
<thead>
<TR>
<TH Width = 100′>3 Martedì</TH>
</TR>
</thead><tbody>
<Classe TR = 'previsioni'>
<larghezza TD = 100′>
<UL>
<Classe li = 'high'>Alta: 72°F</li>
<Classe li = 'bassa'>Basso: 44°F</li>
<Classe li = 'condizione'>Sunny
<img src =’http://deskwx.WeatherBug.com/images/forecast/icons/Localized/60×50/en/trans/cond007.png’ larghezza = 42’ altezza = 42’ Alt =” />
</li>
</UL>
</TD>
</TR></tbody>
</tabella>
Avrete notato che anche se il percorso dell'immagine di sé Mostra la dimensione corretta (60×50) il fornitore originale costretto in 42×42. Perché? Crazy.
In ogni caso, Volevo una soluzione rapida e semplice a questo problema e mi rivolsi a jQuery. Il trucco è stato quello di individuare tutte le appropriate <img> Tag. Non volevo fare muck con qualsiasi altro tag img (di cui ci sono molti). Questo po ' di jQuery ha fatto il trucco:
<script type = "text/javascript" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></script di>
<tipo di script = "text/javascript">
$(documento).pronto(funzione () {$(' li.condition > img').ogni(funzione (indice, elemento)
{
$(elemento).CSS("larghezza", "60");
$(elemento).CSS("altezza", "50");
});
}); // al caricamento del documento
</script di>
Quel po ' di codice trova la collezione <li> Tag cui classe è "condizione" e <img> bambini. Esso quindi scorre tutto ciò. Ha lavorato come un fascino.
Probabilmente potrei a razionalizzare e, ma non sono mai stato un tipo di ragazzo di unix che risolto π A 18 precisione di cifre usando sed e awk e io non sono quel tipo se jQuery ragazzo sia 
.
</fine>
Seguimi su Twitter a http://www.twitter.com/pagalvin
