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

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

پلاگین جی کوئری مجموعه ای از کدهای جی کوئری است که کار خاصی را انجام می دهد.

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

این یک مثال ساده از آموزش پلاگین نویسی جی کوئری میباشد. در این مثال ابتدا یک فایل با پسوند js آماده کرده و سپس آن را به فایل اصلی خود یعنی فایل html وصل می کنیم.

توضیحات پلاگین :

در این مثال قصد داریم یک پلاگین بنویسیم که تمام لینک ها را بصورت سبزرنگ دراورد.

کد js پلاگین نویسی جی کوئری :

باید توجه داشته باشید که ابتدا باید فایل جی کوئری را به صفحه html لینک کنید.

پس ابتدا کد زیر را در یک فایل js بنام sh711.js قرار می دهیم.

$.fn.greenify = function() {
this.css( "color", "green" );
return this;
}
$( "a" ).greenify().addClass( "greenified" );

کد html پلاگین نویسی جی کوئری:

سپس آن را به فایل sh.html وصل می کنیم.

در قسمت پایین کد html را مشاهده می کنید.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://sh711.com">sh711.com</a>
<p>aaa</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="sh711.js"></script>
</body>
</html>

اتصال پلاگین به فایل html :

حال در قسمت پایین یعنی قبل از تگ بسته html کد زیر را قرار می دهیم. کد زیر برای اتصال فایل جی کوئری و فایل پلاگین جی کوئری است.

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="sh711.js"></script>

ساخت پلاگین جی کوئری :

مثال 2

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

در این مثال قصد داریم قبل از هر نام که در فایل js است یک کلمه hello قرار دهیم.

برای تغییر نام باید در به فایل js بروید و سپس نام را تغییر دهید می بینید که یک کلمه hello قبل از نام قرار می گیرد.

در حالت معمولی ، هیچ نامی در فایل html وجود ندارد و این از ویژگی های جی کوئری است که اصطلاحا فایل html را داینامیک می کند.

کد js ساخت پلاگین جی کوئری :

کد js ساخت پلاگین جی کوئری را در فایلی بنام test1.js قرار داده ایم حتما یاد تان باشد فایل با پسوند js ذخیره شود.

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

کد html ساخت پلاگین جی کوئری :

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

<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: lightsteelblue;
}
</style>
</head>
<body>
<h2>plugin jquery 2</h2>
<a href="https://sh711.com">sh711.com</a>
<div id="here"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="test1.js"></script>
<script>
$( document ).ready(function() {
$( '#here' ).hello();
});
</script>
</body>
</html>



نویسنده : هدایت عباسی

ثبت نظر