استفاده از پلاگین های جی کوئری

Ratings
(0)

مسئله

کتابخانه ی جی کوئری کوچک و جذاب است و یک کتابخانه ی قدرتمند جاوا اسکریپت است؛ اما تمام قابلیت های آن به طور پیش فرض بارگذاری نمی شوند.

راه حل

جی کوئری قابلیت توسعه پذیری دارد. اگر هسته ی جی کوئری نتواند خواسته های ما را انجام دهد، در صورت امکان، می توانیم از پلاگین های مخصوص این کار، استفاده کنیم. برای اضافه کردن یک پلاگین به صفحه، تمام کاری که باید انجام دهیم این است که فایل js. پلاگین مورد نظر را دانلود کنیم؛ سپس کتابخانه ی جی کوئری را در کدها اضافه کنیم، سپس بلافاصله پس از آن، پلاگین مذکور را درکدها اضافه کنیم. سپس می توانیم در فایل js. یا در بلوک کدهای صفحه، این پلاگین را فراخوانی کنیم و هر تنظیمی که بخواهیم را اعمال کنیم. در زیر یک مثال، در مورد استفاده از پلاگین جی کوئری cycle مشاهده می کنید که توسط Mike Alsup نوشته شده است:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Chapter 3 - Recipe 8 - Adding Functionality with Plugins</title>
 <style type="text/css">
  .pics {
    height: 232px;
    width: 232px;
    padding: 0;
    margin: 0;
  }
 .pics img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0
  }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!--اکنون اضافه کردن پلاگین مورد نظر-->
<script type="text/javascript" src="/scripts/2.8/jquery.cycle.all.min.js?v2.60"></script>
 <script type="text/javascript">
 <!--
 (function($){
   $(document).ready(function(){
     $('.pics').cycle('fade');
   });
 })(jQuery);
//-->
</script>
</head>
<body>
 <div class="pics">
 <img src="/images/2.8/beach1.jpg" width="200" height="200" alt="Beach 1" />
 <img src="/images/2.8/beach2.jpg" width="200" height="200" alt="Beach 2" />
 <img src="/images/2.8/beach3.jpg" width="200" height="200" alt="Beach 3" />
</div>
</body>
</html>

 

 (تصویر 3.9)تصویر 3.9

 همان طور که مشاهده کردید، با یک خط کد، می توانیم یک اسلایدشو ایجاد کنیم، که هر بار یک تصویر را نشان می دهد و سپس محو می شود و عکس بعدی به طور اتوماتیک پدیدار می شود. پلاین cycle نیز توسعه پذیر است؛ زیرا توسعه دهندگان طوری آن را نوشته اند که گزینه هایی دارد که می توانیم افکت های انتقال(transition) و چینش(layouts) را تغییر دهیم.

توضیحات

 جی کوئری دارای بزرگترین کمیته ی برنامه نویسان از هر کتابخانه ی جاوااسکریپت است. این کمیته ی بزرگ باعث ایجاد یک مجموعه ی بزرگ از پلاگین ها و آموزش ها است که در وب در دسترس قرار دارند. جی کوئری یک مجموعه از پلاگین ها که توسط برنامه نویسان ایجاد شده اند در این آدرس دارد. تاکنون بیش از 1600 پلاگین در این مجموعه وجود دارد و ما می توانیم در دیگر مجموعه ها پلاگین های متفاوت بیشتری نیز پیدا کنیم. از نویسندگان پلاگین، نیز دعوت به عمل آمده است تا پلاگین های خود را ارسال کنند و در مورد پلاگین خود توضیحی دهند و لینک به آن پلاگین و مستندات آن را ارسال کنند.  این مجموعه(repository) کار را برای برنامه نویسان راحت می کند و به آنها امکان می دهد تا به دنبال قابلیت های مورد نیاز خود در پلاگین ها بگردند. اگر شانس کافی داشته باشیم، بعنوان یک برنامه نویسی می توانیم بر اساس نیازهای خود یک پلاگین را در  مجموعه پلاگین های جی کوئری پیدا کنیم. اگر گاهی اوقات پلاگین مورد نیاز ما پیدا نمی شود، و بهتر است خودمان یک پلاگین را ایجاد کنیم. برای ایجاد یک پلاگین باید نکات زیر را در نظر داشته باشیم:

1. نام پلاگین خود را به صورت jquery.[name of plugin].js نام گذاری کنید، مانند jquery.debug.js

2. تمام متدهای جدید در داخل شیء jQuery.fn قرار می گیرند؛ تمام تابع ها نیز در داخل شیء جی کوئری(jQuery) قرار می گیرند.

3. در درون متدها، کلمه ی کلیدی this به شیء جی کوئری فعلی(current jQuery object) اشاره می کند. 

4. هر متد یا تابعی که اضافه می کنیم باید در انتهایش یک سمی کالن(;) قرار دهیم، در غیر این صورت، درحین فشرده شدن(compressed) با شکست مواجه خواهد شد.

5. متد ما باید آبجکت جی کوئری(jQuery object) را برگرداند(return کند)، مگر اینکه خلاف آن ذکر شود. 

6. شما باید از دستور this.each بر روی مجموعه ی فعلی از عناصر مورد تطابق قرار گرفته، تکرار ایجاد کنید- به این طریق، کدهای تمیز و سازگاری ایجاد خواهد شد.

7. همواره به جای علامت $ از jQuery در درون کدهای خود استفاده کنید-این کار به کاربران امکان می هد تا در مکان های دلخواه، برای جی کوئری،  این نام مستعار را تغییر دهند.

 برای اطلاعات بیشتر و مثال های اضافی در زمینه ی ایجاد پلاگین ها، می توانید به صفحه ی نویسنده در سایت jQuery مراجعه کنید. و یا اینکه می توانید به فصل 12 از این کتاب مراجعه کنید.

  {module کمک نقدی به نویسنده}

  • بازدید: 647

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال