در این مقاله میخوام به بررسی نحوه استفاده از پلاگین های آماده ی jquery و همچنین نحوه نوشتن یا کد نویسی یک پلاگین jquery یا نحوه ایجاد یک پلاگین جی کوئری را به شما آموزش بدم پس تا آخر این مقاله همراه من باشید.
در مرحله اول قبل انجام هر کاری، باید فایل اصلی جی کوئری (jquery) را به صفحه وب خود اضافه کنید چون تمامی پلاگین ها به خود فایل jquery وابسته هستن که اگر این فایل نباشد امکان استفاده از آن پلاگین وجود ندارد در زیر یک مثال از نحوه اضافه کردن این فایل را به صفحه وب را برای شما قرار داده ام هچنین شما میتوانید این فایل را ازی یک cdn به صفحه اضافه کنید یا حتی به صورت لوکال این کار را انجام دهید.
1 | <script src="assets/js/jquery-3.4.1.min.js"></script> |
اکثر پلاگین ها برای درست اجرا شدن یک ساختار نمونه از نحوه نوشتن کد های html را برای شما قرار میدهند تا این پلاگین بتواند با این ساختار کد کار کند.که این ساختار در اکثر پلاگین ها از قبل توسط توسعه دهنده های اون تعیین میشوند بعد کلاس یا ایدی تعیین شده رو به متد پلاگین اضافه کنید تا در نهایت بتونید از آن استفاده کنید من یک نمونه ساده از این ساختار کد html را برای شما مثال زده ام
1 2 3 4 5 6 7 8 | <div class="newSlider"> <div class="slid"> <img src="1.jpg" alt=""> </div> <div class="slid"> <img src="2.jpg" alt=""> </div> </div> |
فراخوانی پلاگین جی کوئری در در یک صفحه به صورت زیر است :
1 2 3 | <script> $('.newSlider').mySlider(); </script> |
همان طور که در مثال بالا مشاهده میکنید ما یک ساختار مشخص از کد های html را به کاربرانی که میخواهند از پلاگین جی کوئری ما استفاده کنند میدهیم که هرگاه بخواهند از این اسلایدر در هر کجا از صفحه وب خود استفاده کنند باید از این نمونه را در نظر داشته باشند و در نهایت با یک سلکتور آن را به متد پلاگین متصل کنند
مر حله سوم هم اضافه کردن یک سری تنظیمات یا ویژگی های خاص به پلاگین است که از طریق این تنظیمات یا config پلاگین خود را سفارشی کنید برای نمونه میتوان مثال زیر را در نظر گرفت :
1 2 3 4 5 6 7 8 9 10 | <script> $('.newSlider').mySlider({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 4, }) </script> |
همانطور که ملاحظه میکنید اسلایدر بالا دارای یک سری تنظیمات است که میتوان از طریق یک آبجکت مشخص و آن را به پلاگین جی کوئری ارسال کرد برای دانستن اینکه آیا این اسلایدر در پایین خود دکنه های جابه جایی بین اسلاید ها را داشته باشد یا نداشته باشد یا اینکه سرعت تغییر این اسلایدر و تعداد دفعات تکرار آن و … را میتوان از طریق این تنظیمات مشخص کرد.
مرحله آخر اضافه کردن فایل های اصلی پلاگین به صفحه است که این متیواند بسته به هر پلاگین فایل های مختلفی وجود داشته باشد که من در این مقاله فقط به بررسی یک نمونه ساده میپردازم شما نیز در هنگام استفاده از پلاگین های آماده jquery حتما داکیومنت اون پلاگین رو مطالعه نمایید
این پلاگین فقط دو تا فایل داره که یکی برای استایل دهی به پلاگین هستش و دیگری فایل js پروژه است که هسته اصلی پلاگین ما رو شامل میشه
اضافه کردن فایل css در بالای صفحه قبل از بسته شدن تگبه این صورت :
1 | <link rel="stylesheet" href="assets/css/style.css"> |
در نهایت اضافه کردن فایل های جاواسکریپت یا همون هسته پلاگین به پروژه، دقت داشته باشین که فایل پلاگین بعد از فایل اصلی jquery به پروژه اضافه شود در غیر این صورت ممکن است پلاگین شما به درستی کار نکند.
1 2 | <script src="assets/js/jquery-3.4.1.min.js"></script> <script src="assets/js/app.js"></script> |
خوب تا این مرحله ما فقط نحوه استفاده از پلاگین های آماده را به شما توضیح دادم اما در ادامه این مقاله میخواهم چهار چوب اصلی نوشتن یک پلاگین jquery را به شما آموزش بدم تا شما بتونید با ساختار اصلی و نحوه کد نویسی یک پلاگین ساده در jquery آشنا شوید.
در jquery یک ویژگی یا (property) با نام fn وجود داره که در تابع $ قرار داره ویژگی property fn نگهدارنده متد ها یا توابع jquery است . یعنی شما میتونید از طریق این property متد های جدیدی به jquery اضافه کنید نحوه اضافه کردن متد به property به این شکل است که شما در زیر شاخه این property اسم متد یا تابع خود را مشخص می کنید
من با یک مثال ساده میخوام نحوه استفاده از این property رو برای شما بهتر توضیح دهم برای مثال ما یک پلاگین با نام myPlugin ایجاد میکنیم به صورت زیر :
1 | $.fn.myPlugin |
در مرحله بعد باید این متدmyPlugin را برابر با یک تابع ناشناخته (anonymous function) قرار دهیم به صورت زیر :
1 2 3 | $.fn.myPlugin =function(){ } |
خوب بعد از این کار حالا شما میتوانید تمامی کار های که میخواهیم پلاگین myPlugin در صفحات وب برای شما انجام دهد را در داخل این تابع ناشناخته (anonymous function) قرار دهید
من برای در بهتر این موضوع یک مثال ساده برای شما انجام می دهم تا درک این موضوع برای شما آسان تر شود
برای نمونه من میخوام یک پلاگین ایجاد کنم که وقتی هر المانی را در صفحه به آن بدهیم رنگ و اندازه فونت آن المان موجود در صفحه را تغییر دهد.
خوب در مرحله اول باید از طریق روشی که در بالا گفتم متد خود را به jqeury اضافه کنیم به صورت زیر
1 2 3 4 | $.fn.myPlugin =function(){ this.css("color","red") this.css("font-size", "25px") } |
اگر بخواهم کد های بالا را برای شما یک بار دیگه توضیح دهم در مرجله نخست من با (property) با نام fn متد myPlugin را به متد های jquery اضافه کردم و سپس یک تابع ناشناخته (anonymous function) را برابر این متد قرار دادم که این تابع مشخص میکند که این متد باید چه کاری انجام دهد
سپس با شی this و متد .css رنگ و اندازه قونت آن را تغییر دادم دقت داشته باشید که شی this به المانی که هر المانی که به myPlugin نسبت می دهیم اشاره میکند
نمونه کامل آن به صورت زیر است :
1 2 3 4 5 6 7 8 | <div class="tag-sampel">My Name Is Mohammad</div> <script> $.fn.myPlugin =function(){ this.css("color","red") this.css("font-size", "25px") } $('.tag-sampel').myPlugin(); </script> |
خروجی آن به صورت است :
این یک نمونه بسیار ساده از نحوه نگارش یک پلاگین جی کوئری بود
در اینجا میخوام چند نکته کلید را به شما بگم که باید به اون توجه داشته باشید :
اولی اینکه اگر بخواهید دیگر متد های جی کوئری روی این پلاگین شما بتوانند اعمال شوند باید پلاگین جی کوئری شما المان خود را return کند که اصطلاحا به این method chaining گفته میشود
به مثال زیر دقت کنید :
1 2 3 4 5 6 7 8 9 | <div class="tag-sampel">My Name Is Mohammad</div> <script> $.fn.myPlugin =function(){ this.css("color","red") this.css("font-size", "25px") return this; } $('.tag-sampel').myPlugin().fadeOut(); </script> |
برای نوشتن پلاگین جی کوئری به صورت استاندار باید آن را داخل یک (self-invoking-functions) تعریف و سپس شی $ یا jQuery را به صورت پارامتر به آن پاس میدیم این کار سبب میشود که از تداخل متغییر ها و متد ها جلوگیری شود روش تعریف درست آن به صورت زیر است :
1 2 3 4 5 6 7 | (function ($) { $.fn.myPlugin = function () { this.css("color", "red") this.css("font-size", "25px") return this; } })(jQuery); |
خوب من یک پلاگین جی کوئری رو توسعه دادم که شما میتونید با مراجعه به صفحه توضیحات این پلاگین با نحوا ایجاد یک پلاگین کاربردی در jqeury آشنا بشین پلاگین من یک پلاگین آپلود فایل در جی کوئری هستش حتما یه نگاهی بهش بندازین شاید به درد تون بخوره
