ابھی تک مزید jQuery–ایک تصویر کا سائز تبدیل کریں مثال کے طور پر

میں نے ایک کلائنٹ کے پرانے وینڈر سے ایک ویب حصہ وراثت میں ملے اور یہ ایک تصویر کا سائز مسئلہ ہے.  تصاویر 60 ہونا چاہئے×50 لیکن کچھ عجیب وجہ سے, اصل وینڈر 42 میں نے انہیں مجبور کر دیا×42, تاکہ وہ squashed نظر:

 

اچھا تصویری

برا تصویری

یہاں مارکاپ ہے (کسی حد تک آسان):

<ٹیبل کلاس = 'توسیع آؤٹ لک'>
  <thead>
    <TR>
      <ویں  چوڑائی = '100′>3 منگل</ویں>
    </TR>
  </thead>

  <tbody>
    <TR کلاس = 'پیشن گوئی'>
      <TD چوڑائی = '100′>
        <ST>
          <لی کلاس = 'اعلی'>ہائی: 72&آپ;F</لی>
          <لی کلاس = 'کم'>کم: 44&آپ;F</لی>
          <لی کلاس = 'شرط'>سنی
            <IMG ایسآرسی =’
HTTP://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ چوڑائی = '42’ اونچائی = '42’ ALT =” />
          </لی>
        </ST>
      </TD>
    </TR>

  </tbody>

</ٹیبل>

آپ نوٹ کریں گے کہ اگرچہ تصویر خود کا راستہ مناسب طول و عرض سے پتہ چلتا ہے (60×50) اصل وینڈر 42 میں مجبور کر دیا×42.  کیوں?  پاگل.

ویسے بھی, میں نے اس مسئلے کے لئے ایک فوری اور آسان حل چاہتے تھے اور میں jQuery پر تبدیل کر دیا.  مناسب ٹرک کے تمام تلاش کرنے کے لئے تھا <IMG> ٹیگز.  میں نے کسی بھی دوسرے IMG ٹیگ کے ساتھ کے بارے میں گوبر نہیں کرنا چاہتے تھے (بہت سے موجود ہیں جن میں سے).  jQuery کا یہ تھوڑا سا چال کیا:

<نوشتہ قسم متن/جاوا سکرپٹ"=" ایسآرسی ="HTTP://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></سکرپٹ>

<نوشتہ قسم "متن/جاوا" =>
     $(دستاویز).تیار(تقریب () {

         $(' li.condition > IMG ').ہر ایک(تقریب (انڈیکس, شے)
           
{
             $(شے).سی ایس ایس("چوڑائی", "60"); 
             $(شے).سی ایس ایس("بلندی", "50");
            });
     }); // دستاویز بوجھ پر
</سکرپٹ>

کوڈ کی ہے کہ تھوڑا سا مجموعہ پائے <لی> جس کلاس ٹیگز "شرط" اور ہے <IMG> بچوں.  اس کے بعد اس کے تمام کے ذریعے iterates.  ایک جادو کی طرح کام کیا.

میں شاید اس کو کارگر بنانے کے کر سکتے ہیں, لیکن میں π حل ہے کہ UNIX آدمی کی ایک قسم تھی کبھی نہیں کے لئے 18 ہندسوں صحت سے متعلق sed اور awk کا استعمال کرتے ہوئے اور میں jQuery آدمی تو یا تو اس طرح نہیں ہوں مسکراہٹ.

</آخر>

اپنے بلاگ کو سبسکرائب کریں.

ٹویٹر پر مجھ پر عمل کریں http://www.twitter.com/pagalvin

رکن کی نمائندہ تصویر

آپ کا ای میل ایڈریس شائع نہیں کیا جائے گا. ضرورت ہے شعبوں نشان لگا دیا گیا رہے ہیں *