Я успадкувала веб-частину від клієнта старого продавця, і він став проблемою іміджу розмір. Зображення повинні бути 60×50 але для деякого непарного причини, оригінальний постачальника змусила їх в 42×42, так, щоб вони стисло:
Гарне зображення |
Поганий імідж |
Ось розмітки (дещо спрощене письмо):
<Таблиця клас = 'extended outlook'>
<thead>
<TR>
<го Ширина ='100′>3 Вівторок</го>
</TR>
</thead><tbody>
<TR-клас = 'прогнози'>
<TD ширина ='100′>
<ul>
<Лі клас = 'високий'>Висока: 72&Тру;F</Лі>
<Лі клас = "низький">Низький: 44&Тру;F</Лі>
<Лі клас = 'умови'>Сонячно
<IMG src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/EN/Trans/cond007.png’ Ширина ='42’ Висота ='42’ Alt =” />
</Лі>
</ul>
</TD>
</TR></tbody>
</Таблиця>
Ви помітите, що навіть незважаючи на шлях до самого зображення показує належного вимір (60×50) оригінальний постачальника змусив його в 42×42. Чому? Божевільний.
У всякому разі, Я хотів швидко і легко вирішення цього питання, і я звернувся до jQuery. Трюк був знайти всі відповідні <IMG> Мітки. Я не хочу, щоб гидоту будь-які інші теги img (яких є багато). Це трохи jQuery зробили свою справу:
<скрипт тип = текст/javascript"" src ="http://Ajax.googleapis.com/AJAX/libs/Jquery/1.5/JQuery.min.js"></сценарій>
<скрипт тип = "текст/javascript">
$(документ).готові(функція () {$(' li.condition > IMG').Кожен(функція (індекс, елемент)
{
$(елемент).CSS("ширина", "60");
$(елемент).CSS("Висота", "50");
});
}); // завантаження документа
</сценарій>
Що біт код знаходить колекції <Лі> Мітки, чиї клас є "стан" і <IMG> дітей. Потім він спроектувала через все це. Працював як шарм.
Я ймовірно може оптимізувати його, але я ніколи не був на unix хлопцем, вирішеня π Щоб 18 точність цифр за допомогою sed і awk, і я не такий, якщо jQuery хлопець або .
</кінець>
Йди за мною на Twitter в http://www.twitter.com/pagalvin