آموزش جاوا اسکریپت

نحوه ایجاد افزونه jQuery سفارشی

ایجاد افزونه jQuery سفارشی
25 فروردین

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

بیشتر محبوبیت jQuery به این دلیل است که باعث کاهش چشمگیر زمان توسعه می شود. شعار آنها این است “کمتر بنویس، بیشتر کار کن” ، که خلاصه ای از مزایای jQuery است.

آنچه jQuery را بسیار عالی می کند، افزونه ها هستند. افزونه ها بخش هایی قابل استفاده مجدد از کد هستند که به شما کمک می کنند Javascript را حتی کمتر بنویسید تا به ویژگی های خاصی در سمت مشتری برسید. به عنوان مثال، می توانید از افزونه ها برای ایجاد نمایش اسلایدها، گالری ها، پاپ آپ ها و موارد دیگر استفاده کنید.

در این آموزش می آموزید که چگونه می توانید افزونه jQuery دلخواه خود را در 4 مرحله ایجاد کنید.

مرحله 1. ایجاد پلاگین جی کوئری پایه

در این آموزش قصد داریم افزونه ای بسازیم که یک پیام، به علاوه نام یک شخص چاپ کند.

با کد زیر یک فایل با نام jquery-hello.js ایجاد کنید:

(function ( $ ) {
 
    $.fn.hello = function( options ) {
 
        // Default options
        var settings = $.extend({
            name: 'John Doe'
        }, options );
 
        // Apply options
        return this.append('Hello ' + settings.name + '!');
 
    };
 
}( jQuery ));

در کد قبلی:

$.fn.hello

… نام پلاگین ما را تعریف می کند. در این حالت hello.

name: 'Himan Soufi'

… گزینه های پیش فرض را تعریف می کند. در این حالت نام و مقدار پیش فرض “Himan Soufi” است.

this.append('Hello ' + settings.name + '!')

… متن “”سلام اسم شخص!” را چاپ می کند.

مرحله 2. بارگیری افزونه

آخرین نسخه jQuery، افزونه hello و تماس با افزونه را در یک فایل HTML بارگذاری کنید.

در این مثال، من می خواهم این را به هد فایل index.html خود اضافه کنم:

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/jquery-hello.js"></script>
<script>
$( document ).ready(function() {
    $( '#here' ).hello();
});
</script>

داخل body، قسمت زیر را اضافه کنید:

<div id="here"></div>

مرحله 3. تست افزونه

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

تست افزونه jQuery

تماس با افزونه سلام را ویرایش کنید تا یک نام سفارشی درج شود:

<script>
$( document ).ready(function() {
    $( '#here' ).hello({
        name: 'Valentin Garcia'
    });
});
</script>

سایت خود را تازه کنید:

تست افزونه jQuery

مرحله 4. اضافه کردن یک ویژگی جدید

شما می توانید با به روزرسانی jquery-hello.js، به راحتی ویژگی جدیدی را در افزونه مانند رنگ فونت ادغام کنید:

(function ( $ ) {
 
    $.fn.hello = function( options ) {
 
        // Default options
        var settings = $.extend({
            name: 'Himan Soufi',
            color: 'red'
        }, options );
 
        // Apply options
        return this.append('Hello ' + settings.name + '!').css({ color: settings.color });
 
    };
 
}( jQuery ));

قسمت های جدید کد:

color: 'red'

… هنگامی که رنگ سفارشی بعداً تعریف نشده باشد، رنگ پیش فرض را تعیین می کند.

.css({ color: settings.color })

… خاصیت رنگ را به عنوان CSS درون خطی اعمال می کند.

تماس با افزونه hello را به روز کنید تا یک رنگ سفارشی داشته باشد:

<script>
$( document ).ready(function() {
    $( '#here' ).hello({
        name: 'Valentin Garcia',
        color: 'green'
    });
});
</script>

نحو جدید اکنون شامل موارد زیر است:

color: 'green'

… “سبز” را به عنوان یک رنگ سفارشی برای رد کردن “قرمز” پیش فرض تعریف می کند.

سایت خود را تازه کنید:

تست افزونه jQuery

می توانید با اضافه کردن ویژگی های جدید یا سفارشی کردن نمونه ها، بازی کنید.

5/5 - (5 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *