اشتراکها
معرفی چند Gist مفید #C
اشتراکها
سایت tutorials point
اشتراکها
چرا مشتری شما باید فقط 90% راضی باشد
اشتراکها
دوره رایگان SPA Templates
نظرات مطالب
EF Code First #12
خیر. برنامههای وب چند کاربری هستند. ProductService استاتیک یعنی به اشتراک گذاری یک وهله بین تمام کاربران سایت.
اشتراکها
برنامهنویسی و محیط زیست
مطالب
JQuery Plugins #1
جیکوئری به عنوان مهمترین و پرکاربردترین کتابخانه جاوا اسکریپتی، حالا در اکثر سایتهای اینترنتی استفاده میشود و هر روز به قابلیتها و امکانات آن اضافه میگردد. اما بیش از خود این کتابخانه، پلاگینهای آن است که تحول عظیمی را در طراحی وب سایتها ایجاد نموده است. از انواع اسلایدها، تصاویر، منوها، Tooltip ها، نمودارها، انیمیشن، جداول و هزاران پلاگین دیگر، همه و همه کدهای جاوا اسکریپتی است که با استفاده از جی کوئری به صورت پلاگین نوشته شده است و امکان استفاده مجدد را به ما میدهد.
محتوای پلاگین
حفظ خاصیت زنجیرهای پلاگین ها
در پلاگین بالا با از تابع each برای روی this و برگرداندن آن با return برای حفظ خاصیت زنجیرهای پلاگین استفاده مینماییم. در تابع each میبایست از (this)$ برای انجام عملیات بر روی شیء پاس داده شده استفاده کنیم. بدین صورت بعد از صدا زدن پلاگین، دوباره میتوانیم از هر پلاگین یا تابع جی کوئری دیگری بر روی خروجی استفاده نماییم.
از کجا شروع کنیم
برای نوشتن پلاگین یک تابع با نام خاصیتی جدید را به jQuery.fn اضافه مینماییم.
اما، برای اینکه بتوانیم از میانبر $ در پلاگین استفاده نماییم و تداخلی با سایر کتابخانهها نداشته باشد، از الگوی (IIFE (Immediately Invoked Function Expression D به صورت زیر استفاده مینماییم:
jQuery.fn.myPlugin = function() { //محتویات پلاگین را اینجا مینویسیم };
(function( $ ) { $.fn.myPlugin = function() { //محتویات پلاگین را اینجا مینویسیم }; })( jQuery );
محتوای پلاگین
حال میتوانیم در تابع، کدهای پلاگین خود را بنویسیم. برای دسترسی به شیء پاس داده شده به پلاگین، از کلمه کلیدی this استفاده کرده و لازم نیست از (this)$ استفاده نماییم. در زیر یک پلاگین ساده تهیه شده است که با رفتن ماوس بر روی یک متن، خطی زیر آن میکشد:
(function($){ $.fn.underline= function() { this.hover(function(){ $(this).css( { text-decoration : underline }) }, function(){ $(this).css( { text-decoration : none } ) }); }; })(jQuery); $("p").underline();
پلاگین بالا مقدار یا شیء ایی را بر نمیگرداند؛ اما اگر بخواهیم مقداری را برگردانیم از return استفاده مینماییم:
(function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; }; })( jQuery );
var tallest = $('div').maxHeight(); // بیشترین ارتفاع عنصر را برمی گرداند
حفظ خاصیت زنجیرهای پلاگین ها
در مثال بالا یک مقدار عددی برگردانده شده است؛ اما برای اینکه بتوانیم بصورت زنجیر وار خروجی پلاگین را به تابع یا هر پالاگین دیگری پاس دهیم از تابع each بصورت زیر استفاده مینماییم:
(function( $ ){ $.fn.lockDimensions = function( type ) { return this.each(function() { var $this = $(this); if ( !type || type == 'width' ) { $this.width( $this.width() ); } if ( !type || type == 'height' ) { $this.height( $this.height() ); } }); }; })( jQuery );
$('div').lockDimensions('width').css('color', 'red');
پیش فرضها و تنظیمات
در پلاگینهای پیشرفتهتر میتوانیم تنظیمات پیش فرضی را برای پلاگین در نظر بگیریم و این تنظیمات را به عنوان پارامتر ورودی از کاربر دریافت نماییم. جی کوئری دارای تابعی به نام extend است که امکان گسترش و ترکیب دو شیء را امکان پذیر میسازد به مثال زیر توجه نمایید:
(function( $ ){ $.fn.tooltip = function( options ) { var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { // Tooltip plugin code here }); }; })( jQuery );
$('div').tooltip({ 'location' : 'left' });
در این مثال، شیء settings با دو خاصیت location و background-color تعریف شده که با شیء options که از ورودی پلاگین دریافت نمودهایم با استفاده از تابع extend ترکیب شده است. خاصیتهای که تعیین نشده باشند با مقادیر پیش فرض آنها تکمیل میگردد.
ادامه دارد...