25
تشکر

آموزش مقدماتی ساخت پلاگین جی کوئری

جی کوئری

جی کوئری

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

در این مطلب به آموزش مقدماتی ساخت پلاگین جی کوئری میپردازیم.

برای مثال ما میخواهیم پلاگینی درست کنیم که طراح وب میتواند با استفاده از آن رنگ متن های خود را تغییر دهد. البته اینکار را با CSS به راحتی میتوان انجام داد, اما ما به جهت بخش آموزشی آن اینکار را با ساختن پلاگین جی کوئری انجام میدهیم.

در این پلاگین ما از روش متد برای ساختن پلاگین استفاده میکنیم.

یک فایل js با نام دلخواه بسازید و آماده کار شوید. ابتدا باید بدنه اصلی متد را بسازیم. یک نام هم برای این بدنه انتخاب میکنیم.

$.myPlugin = function(selector){

};

همانطور که میبینید این متد یک آرگومان به نام selector دارد. کاربر میتواند از طریق این آرگومان نام عنصری را که قرار است رنگ آن را تغییر دهد برای پلاگین بفرستد.

یک مشکل در ابتدای کار ساخت پلاگین وجود دارد. اگر ما این متد را به همین روش توسعه دهیم و کامل کنیم در صورتی که آن را در یک پروژه واقعی به کار ببریم ممکن است به دلیل وجود چندین کتابخانه جاوا اسکریپت در یک پروژه, کتابخانه ها با یکدیگر تداخل پیدا کنند. برای جلوگیری از این تداخل این متد را داخل تابع زیر قرار میدهیم.

(function($){
    $.myPlugin = function(selector){

    };
})(jQuery);

خب ما ابتدا عناصری را که کاربر به پلاگین میفرستد درون متغیر obj میریزیم.

var obj = $(selector);

در ادامه کدی مینویسیم که باعث میشود متن های عناصر مورد نظر قرمز شود.

obj.each(function(){
    $(this).css({'color': 'red'});
});

تا اینجا کدهای پلاگین ما مانند زیر باید باشد:

(function($){
  $.myPlugin = function(selector){
    
    var obj = $(selector);
    
    obj.each(function(){
      $(this).css({'color': 'red'});
    });
      
  };
})(jQuery);

نحوه استفاده از این پلاگین به صورت زیر است:

<script type="text/javascript">
    $(document).ready(function(){
        $.myPlugin('.text');
    })
</script>

اما مشکلی که در این پلاگین وجود دارد این است که انتخاب رنگ برای کاربر وجود ندارد و همه متن ها را به قرمز تبدیل میکند. برای حل این مشکل یک آرگومان دیگر به نام settings به پلاگین اضافه میکنیم.

(function($){
    $.myPlugin = function(selector, settings){

ما میخواهیم علاوه بر رنگ متن, رنگ بکگراند را هم از کاربر بگیریم. به همین خاطر باید یک آرگومان دیگر هم اضافه کنیم. اما اینکار عاقلانه نیست. زیرا ممکن است ما بخواهیم قابلیت های دیگری هم اضافه کنیم و ممکن نیست بتوانیم برای هر یک از آنها یک آرگومان در نظر بگیریم. بنابراین از آرگومان settings به عنوان یک آرایه استفاده میکنیم. بنابراین کد ما به صورت زیر خواهد بود:

(function($){
  $.myPlugin = function(selector, settings){
    
    var obj = $(selector);
    var config = settings;
    
    obj.each(function(){
      $(this).css({'color': config.color, 'background': config.background});
    });
      
  };
})(jQuery);

نحوه استفاده:

<script type="text/javascript">
    $(document).ready(function(){
         $.myPlugin('.text', {
             color: 'red',
             background: 'blue'
        });
    })
</script>

خب اگر کاربر مقدارهای color و background را به پلاگین ندهد, پلاگین دچار خطا خواهد شد. بنابراین ما باید مقدارهای پیشفرض برای این آرگومان در نظر بگیریم تا در صورتی که کاربر از دادن این اطلاعات خودداری کرد پلاگین از مقادیر پیشفرض استفاده کند. بنابراین نحوه تعریف متغیر config را به صورت زیر تبدیل میکنیم:

var config = $.extend({
    color: '#ffffff',
    background: '#146DA8'
}, settings)

در کد بالا ما از متد extend استفاده کردیم. این متد در صورتی که کاربر مقادیر color و backgrund را فرستاده باشد جایگزین مقادیر پیشفرض میکند در غیر این صورت همان مقادیر پیشفرض وجود خواهند داشت.

کار ما به اتمام رسید.

کدهای پلاگین و صفحه استفاده کننده را میتوانید در زیر ببینید. پلاگین:

(function($){
  $.myPlugin = function(selector, settings){
    
    var obj = $(selector);
    var config = $.extend({
      color: '#ffffff',
      background: '#146DA8'
    }, settings)
    
    obj.each(function(){
      $(this).css({'color': config.color, 'background': config.background});
    });
      
  };
})(jQuery);

صفحه استفاده کننده:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="jquery.Plugin.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $.myPlugin('.text', {
        color: 'red',
        background: 'blue'
      });
    })
  </script>
</head>
<body>
  <p class="text">آپارنت محلی برای توسعه دهندگان و طراحان وب</p>
</body>
</html>
  • dost می‌گه:

    bebakhshid man daghighan hamin code haro be barname ezafe kardam vali javab nemide chon class text ro dar tage p nemishnase?

  • dost می‌گه:

    vaghean mamnon kheyli khob va mofid bod

  • محمد می‌گه:

    سلام مرسی بابت اموزش عالیت
    داداش من دارم یه قالب جوملا طراحی میکنم و باید این قالب چند رنگه باشه !
    یعنی با کلیک روی یه عکس بشه یه فایل css رو اجرا کنه که من توی اون فایل استایل های مربوط به اون رنگ رو درج کنم و سایت با اون تصاویر و رنگ بندی دیده بشه !
    ممنون میشم برای انجامش کمکم کنی و راهنماییم کنید !
    مرسی

  • مهتاب می‌گه:

    mer30 very good

  • یاس می‌گه:

    مرسی ممنون

  • zamani می‌گه:

    متشکرم
    مفیدبود

  • mohsen sharify می‌گه:

    ممنون از مطلب مفید شما


  • نظرات این مطلب بسته است.