ساخت باکس های رنگی با کمک جی کوئری

دسته‌ها : جی کوئری علی میرزائی 3 دیدگاه‌ها

ساخت باکس های رنگی با کمک جی کوئری

سلام به همگی،
چند وقت پیش دنبال راهی بودم تا به تعدادی از عناصر html، رنگهای پس زمینه متفاوتی بدم، به همین خاطر به سراغ جی کوئری رفتم و با چند خط کد مشکلم به سادگی حل شد. در پست آموزشی امروز به این مسأله میپردازیم و در ادامه خواهید دید که چقدر کار با جی کوئری ساده و مفیده.

برای شروع کار، لازمه تا تعدادی المان html به شکل زیر تعریف کنیم:

 HTML:

<ul class="box">
<li><a href="http://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="http://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="http://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="http://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="http://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="http://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="http://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
</ul>

و در ادامه به سراغ بخش اصلی کار، یعنی جی کوئری میریم.
در قدم اول: یک آرایه با عناصر شماره رنگ تعریف میکنیم. (نکته » می تونید به تعداد دلخواه، عناصر این آرایه رو کم یا زیاد کنید.)
و در قدم بعد: با تعریف سکلتور عناصر بالا و استفاده از خاصیت .css()  به تک تک المانها مقادیر آرایه رو استایل دهی میکنیم.

JQUERY:

var colors = ["4D3D98", "0C8B44", "88288F", "D24827", "00A0B1"];
$('.box li').each(function(i) {
$(this).css('background-color', '#'+colors[i % colors.length]);
});

و کار تمومه…

راستی یادتون باشه که برای استفاده از جی کوئری، حتما باید کتابخونش در صفحتون فراخوانی شده باشه :)

دیدگاه کاربران در مورد این نوشته

  1. سلام دوست عزیز
    سپاس از مطالب مفیدتان
    اگر سورس یا آموزش هدر سایتتون (ابرها) رو هم بزارید ممنون میشم .
    سپاس

    توسط نیما پاسخ

    1. سلام،
      برای این کار میتونید از اسکریپت spritely استفاده کنید:
      http://spritely.net

      توسط علی میرزائی پاسخ

  2. Good learning
    thanks

    توسط محمد پاسخ

دیدگاه خود را بیان کنید