Eine alte Clienthersteller einen Webpart geerbt und es hat ein Imageproblem Größe. Die Bilder sollten 60×50 aber aus irgendeinem Grund, der ursprüngliche Hersteller gezwungen, in 42×42, So suchen sie gequetscht:
Gutes Bild |
Schlechtes Image |
Hier befindet sich das markup (etwas vereinfacht):
<table Class = "erweitert-Outlook">
<THEAD>
<TR>
<Th Breite = 100′>3 Dienstag</Th>
</TR>
</THEAD><TBODY>
<TR-Klasse = 'Prognose'>
<td Width = 100′>
<UL>
<Li Class = 'hoch'>Hoch: 72&DEG;F</Li>
<Li Class = "niedriger">Niedrig: 44&DEG;F</Li>
<Li Class = 'Zustand'>Sonnig
<Img Src =’http://deskwx.WeatherBug.com/images/Forecast/Icons/Localized/60×50/en/Trans/cond007.png’ Breite = 42’ Höhe = 42’ Alt =” />
</Li>
</UL>
</TD>
</TR></TBODY>
</Tabelle>
Sie werden feststellen, dass obwohl die Pfad zu dem Bild selbst zeigt die richtige dimension (60×50) der ursprüngliche Hersteller gezwungen es 42×42. Warum? Verrückt.
Auf jeden Fall, Ich wollte eine schnelle und einfache Lösung für dieses Problem und ich wandte mich an jQuery. Der Trick bestand darin, alle entsprechenden finden <IMG> Markierungen. Ich wollte nicht mit anderen Img Tags Dreck über (davon gibt es viele). Dieses Bit von jQuery Tat die Tücke:
<Skript-Typ = "Text/Javascript" Src ="http://AJAX.googleapis.com/AJAX/libs/jQuery/1.5/jQuery.Min.js"></Skript>
<Skript-Typ = "Text/Javascript">
$(Dokument).bereit(Funktion () {$(' li.condition > Img').jeder(Funktion (Index, Artikel)
{
$(Artikel).CSS("Breite", "60");
$(Artikel).CSS("Höhe", "50");
});
}); // auf Dokument laden
</Skript>
Das Bit des Codes wird die Auflistung <Li> Markierungen, deren Klasse ist "Bedingung" und <IMG> Kinder. Dann durchläuft es all das. Wirkten gefällt ein Anmut.
Ich konnte es wahrscheinlich optimieren, aber ich war nie einer der Unix-Typ, das π gelöst An 18 Ziffern Genauigkeit mit Sed und Awk und ich bin nicht diese Art, wenn jQuery entweder Kerl .
</Ende>
Folgen Sie mir auf Twitter bei http://www.twitter.com/pagalvin