چگونه یک پلاگین جی کوئری ایجاد کنیم و یا از پلاگین های آماده استفاده کنیم ( JQuery Plugin )

آموزش مخفی و نمایان کردن منو با jquery یا sticky menu
آموزش مخفی و نمایان کردن منو با jquery یا sticky menu
۱۱ اسفند ۱۳۹۸
روش استفاده از پلاگین های jquery

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

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

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

در مرحله اول قبل انجام هر کاری، باید فایل اصلی جی کوئری (jquery) را به صفحه وب خود اضافه کنید چون تمامی پلاگین ها به خود فایل jquery وابسته هستن که اگر این فایل نباشد امکان استفاده از آن پلاگین وجود ندارد در زیر یک مثال از نحوه اضافه کردن این فایل را به صفحه وب را برای شما قرار داده ام هچنین شما میتوانید این فایل را ازی یک cdn به صفحه اضافه کنید یا حتی به صورت لوکال این کار را انجام دهید.

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

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

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

مر حله سوم هم اضافه کردن یک سری  تنظیمات یا ویژگی های خاص به پلاگین است که از طریق این تنظیمات یا  config پلاگین خود را سفارشی کنید برای نمونه میتوان مثال زیر را در نظر گرفت :

 

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

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

این پلاگین فقط دو تا فایل داره که یکی برای استایل دهی به پلاگین هستش و دیگری فایل js پروژه است که هسته اصلی پلاگین ما رو شامل میشه

اضافه کردن فایل css در بالای صفحه قبل از بسته شدن تگبه این صورت :

 

در نهایت اضافه کردن فایل های جاواسکریپت یا همون هسته پلاگین به پروژه، دقت داشته باشین که فایل پلاگین بعد از فایل اصلی jquery به پروژه اضافه شود در غیر این صورت ممکن است پلاگین شما به درستی کار نکند.

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

نحوه نوشتن یک پلاگین jqeury به صورت خیلی ساده و کاربردی

در jquery یک ویژگی یا (property)  با نام fn  وجود داره که در تابع $ قرار داره ویژگی property fn نگهدارنده متد ها یا توابع  jquery است . یعنی شما میتونید از طریق این property  متد های جدیدی به jquery اضافه کنید نحوه اضافه کردن متد به property به این شکل است که شما در زیر شاخه این property اسم متد یا تابع خود را مشخص می کنید

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

در مرحله بعد باید این متدmyPlugin را برابر با یک تابع ناشناخته (anonymous function) قرار دهیم به صورت زیر :

 

خوب بعد از این کار حالا شما میتوانید تمامی کار های که میخواهیم پلاگین myPlugin  در صفحات وب برای شما انجام دهد را در داخل این تابع ناشناخته (anonymous function) قرار دهید

 

من برای در بهتر این موضوع یک مثال ساده برای شما انجام می دهم تا درک این موضوع برای شما آسان تر شود

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

خوب در مرحله اول باید از طریق روشی که در بالا گفتم متد خود را به jqeury اضافه کنیم به صورت زیر

 

اگر بخواهم کد های بالا را برای شما یک بار دیگه توضیح دهم در مرجله نخست من با (property)  با نام fn متد myPlugin را به متد های jquery اضافه کردم و سپس یک تابع ناشناخته (anonymous function) را برابر این متد قرار دادم که این تابع مشخص میکند که این متد باید چه کاری انجام دهد

سپس با شی this و متد .css رنگ و اندازه قونت آن را تغییر دادم دقت داشته باشید که شی this  به المانی که هر المانی که به myPlugin نسبت می دهیم اشاره میکند

نمونه کامل آن به صورت زیر است :

خروجی آن به صورت است :

My Name Is Mohammad

 

این یک نمونه بسیار ساده از نحوه نگارش یک پلاگین جی کوئری بود

در اینجا میخوام چند نکته کلید را به شما بگم که باید به اون توجه داشته باشید :

اولی اینکه اگر بخواهید دیگر متد های جی کوئری روی این پلاگین شما بتوانند اعمال شوند باید پلاگین جی کوئری شما المان خود را return  کند که اصطلاحا به این method chaining گفته میشود

به مثال زیر دقت کنید :

بررسی مفهومی به نام (self-invoking-functions) در نوشتن یک پلاگین جی کوئری

برای نوشتن پلاگین جی کوئری به صورت استاندار باید آن را داخل یک (self-invoking-functions) تعریف و سپس شی $ یا jQuery  را به صورت پارامتر به آن پاس میدیم این کار سبب میشود که از تداخل متغییر ها و متد ها جلوگیری شود روش تعریف درست آن به صورت زیر است :

یک نمونه پلاگین جی کوئری

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

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

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

پنج − یک =