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

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

علاوه بر این، با تشریح قوانین ایجاد پلاگین های خود، یک افزونه کامل مجزا را به عنوان نمونه پیاده سازی خواهیم کرد. عملکرد آن اضافه کردن یک رفتار جدید برای عناصر انتخاب شده - تغییر رنگ در شناور است. بیایید افزونه را responsiveBlock (عنصر بلوک پاسخگو) بنامیم.

ساخت فایل با افزونه و اتصال آن

به طور معمول، پلاگین های جاوا اسکریپت در فایل های جداگانه قرار می گیرند. برای فایل‌های دارای پلاگین jQuery، یک قرارداد در مورد نام آنها وجود دارد - باید از قالب jquery.plaginName.js پیروی کند. بنابراین، فایل با افزونه ما باید jquery.responsiveBlock.js نامیده شود.

برای در دسترس قرار دادن افزونه ما در صفحه، باید فایل را با کتابخانه jQuery و سپس فایل js را با افزونه پلاگین خود متصل کنید:

~lt~script src="jquery.min.js"~gt~~lt~/script~gt~ ~lt~script src="jquery.responsiveBlock.js"~gt~~lt~/script~gt~

اساس پلاگین

این متغیر، در بدنه یک متد، همیشه حاوی شیء فعلی jQuery (مثلا که متد بر روی آن فراخوانی شده است) است. برای اینکه تمام عناصر انتخاب شده را به صورت جداگانه تکرار کنیم، از متد .each() استفاده می کنیم. و برای اینکه بتوانیم زنجیره متدها را ادامه دهیم، متد ما باید شی jQuery فعلی را برگرداند:

(تابع ($) ( jQuery.fn . responsiveBlock = تابع () ( var make = تابع () ( ) ; ) ) (jQuery) ;

افزودن خواص به افزونه

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

(تابع ($) ( jQuery.fn . responsiveBlock = تابع (گزینه ها) ( // لیستی از ویژگی ها را تنظیم کنید و مقادیر پیش فرض را برای آنها مشخص کنید. // اگر هنگام فراخوانی یک متد، سفارشی // گزینه های برخی از آنها به طور خودکار بازنویسی می شوند // مقادیر پیش فرض مربوطه options = $.extend (( defColor: "white" , hoverColor: "red" ) , option) ; var make = function() ( //پیاده سازی روش کار با یک عنصر صفحه جداگانه) ؛ این را برگردان .each (make) ; // در نهایت، متد responsiveBlock شی فعلی jQuery را برمی گرداند) ؛ ) ) (jQuery) ; // اکنون می توانید افزونه را با تنظیمات پیش فرض تنظیم کنید:$("div:first") .responsiveBlock () ; // یا مقادیر خود را برای برخی یا همه تنظیمات مشخص کنید$("div:last" ) .responsiveBlock (( defColor: "#bbbbbb" ) ; $("ul" ) .responsiveBlock (( defColor: "#aaaaaa" , hoverColor: "سبز" ) );

(برای درک بهتر این مثال، ارزش دارد که با هدف تابع $.extend آشنا شوید.)

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

اجرای بیشتر

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.min.js"~gt ~~lt~/script~gt~ ~lt~style~gt~ div(padding:10px; حاشیه:5px; حاشیه:3px قرمز ثابت) ~lt~/style~gt~~lt~/head~gt~ ~lt ~body~gt~ ~lt~div~gt~Block on page~lt~/div~gt~ ~lt~script~gt~ (function($)(jQuery.fn.responsiveBlock = function(گزینه ها)(گزینه ها = $ .extend(( defColor:"سفید"، //رنگ عنصری که نشانگر روی آن وجود ندارد )( // در اینجا این متغیر حاوی یک عنصر // DOM جداگانه است که باید // جلوه های پلاگین را اعمال کنید $(this).css("background-color",options.defColor) .mouseenter( function())($(this).css("background -color",options.hoverColor); )).mouseleave(function())($(this).css("background-color",options.defColor) ;)); )؛ این را برگردانید.each(make);) ; ))(jQuery); $("div").responsiveBlock(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

تولید رویداد

کتابخانه jQuery به شما امکان می دهد رویدادهای خود را بر روی عناصر سازماندهی کنید و سپس کنترل کننده های آنها را نصب کنید (مانند رویدادهای onClick یا onMousemove). برای ایجاد رویدادهای خود بر روی عناصر انتخاب شده، باید از متد .trigger() استفاده کنید و می توانید کنترل کننده های آنها را با استفاده از .on() نصب کنید. بنابراین، افزونه‌ها می‌توانند نه تنها عملکرد جدید، بلکه یک سیستم رویداد مرتبط را نیز ارائه دهند که می‌تواند توسط هر کاربر افزونه شما استفاده شود.

برای جلوگیری از تداخل نام رویدادهای افزونه خود با نام رویدادهای افراد دیگر، از فضاهای نام استفاده کنید. برای انجام این کار، استفاده از نام خود افزونه راحت تر است.

در افزونه ما، می‌توانید رویداد stateChange را سازماندهی کنید، این رویداد زمانی رخ می‌دهد که وضعیت عنصر تغییر کند (مکان‌نما شناور شود یا نه):

(تابع ($) ( jQuery.fn .responsiveBlock = تابع (گزینه ها) (گزینه = $.extend (( defColor: "سفید" , //رنگ عنصری که مکان نما روی آن وجود ندارد hoverColor: "قرمز" //رنگ عنصری که مکان نما روی آن قرار دارد) ، گزینه ها) ؛ var make = function() ( // در اینجا این متغیر دارای یک جداگانه خواهد بود // عنصر DOM که باید روی آن اعمال کنیم // جلوه های افزونه$(this ) .css ( "background-color" , options.defColor ) .mouseenter (function () ($(this) .css ("background-color" , options.hoverColor ) .trigger ("responsiveBlock.stateChange" ) . ; ) ؛ این را برگردان .each (make) ; ) ؛ ) ) (jQuery) ; // اکنون می توان کنترل کننده رویداد stateChange را به عناصر صفحه متصل کرد:$("div" ) .on ("responsiveBlock.stateChange" , handler) ;

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

در این مقاله کمتر بر روی خود کد جاوا اسکریپت تمرکز می کنیم و بیشتر به توصیه های عملی می پردازیم.

1 - با استفاده از قالب صحیح یک افزونه بنویسید

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

(تابع ($، پنجره، تعریف نشده) ($.fn.myPlugin = function(opts) ( var default = ( // متغیرهای پیش فرض خود را تنظیم کنید) // گسترش گزینه های استاندارد با گزینه های سفارشی var options = $.extend(defaults, opts || ()); return this.each(function())( // jQuery chainability // plugin actions )); ))(jQuery, window);

ابتدا یک تابع ناشناس ایجاد می کنیم که از ما در برابر استفاده از متغیرهای سراسری محافظت می کند. به طور پیش فرض، سه آرگومان ارسال می شود: $، window و undefined. آنها توسط هسته jQuery مورد نیاز خواهند بود.

سپس یک الگوی پلاگین jQuery، $.fn.PluginName می نویسیم. بنابراین ما افزونه را ثبت می کنیم تا بتوان از آن در قالب $(selector).method() استفاده کرد. اگر می خواهید به جای نوشتن افزونه ای که از توابع استفاده می کند مستقیماً آن را بسازید، آن را به این صورت بنویسید:

$.PluginName = تابع (گزینه ها) ( // گزینه ها و اقدامات افزونه)

این نوع افزونه نمی تواند زنجیره ای از توابع داشته باشد، از یک تابع مستقیم تشکیل شده است. مثلا:

$.splitInHalf = تابع (stringToSplit) ( طول var = stringToSplit.length؛ var stringArray = stringToSplit.split(stringToSplit؛ برگرداندن stringArray؛ )

در این کد، یک آرایه از رشته ها را برمی گردانیم. برای وضوح بیشتر، مثال دیگری:

$.getOddEls = تابع (jQcollection)( // بازگشت jQcollection.filter(function(index)( var i = index+1; return (شاخص % 2 != 0); ))؛ )

در این حالت کاربر یک شی jQuery دریافت می کند، یک فیلتر که از مجموعه jQuery گرفته شده است. پلاگین ها می توانند آرایه ها، رشته ها، اعداد، توابع و انواع داده های دیگر را برگردانند.

2 - کد خود را (به درستی) مستند کنید

مهمترین کاری که می توانید هنگام انتشار کد خود انجام دهید، مستندسازی است. این بدان معنی است که باید به توسعه دهندگان توضیح دهید که کد شما چه کاری انجام می دهد یا می تواند انجام دهد. هیچ کاربری نمی خواهد حدس بزند کد شما چه کاری می تواند انجام دهد.

مستندسازی عملی است که برای اجرای آن نیازی به قوانین خاصی نیست. اگرچه، از قبل واضح است که هر چه راحت تر و دقیق تر باشد، بهتر است.

لازم است هم در داخل کد (با نظر دادن) و هم در خارج - با یک سند جداگانه، توصیف هر کلاس، روش، گزینه، موارد استفاده آنها و غیره مستند شود.

3 - افزونه خود را در تنظیمات انعطاف پذیر کنید

اکثر افزونه های محبوب امکان دسترسی به متغیرها را فراهم می کنند تا کاربران بتوانند برخی از عملکردهای افزونه را کنترل کنند. همچنین، یک چیز خوب این است که می توانید تنظیمات خود را انجام دهید. به عنوان مثال، هنگام ایجاد یک افزونه اسلایدر، تنظیمات مربوطه عبارتند از سرعت اسکرول، نوع نمایش اسلاید و پسوند بلوک اسلایدر.

همچنین این یک تمرین خوب است که بتوانیم به نام کلاس ها و شناسه هایی که با آنها عنصر DOM را انتخاب می کنیم دسترسی داشته باشیم. علاوه بر این، آنها همچنین باید بتوانند در هر بار فراخوانی تابع callback به آن دسترسی داشته باشند. یا زمانی که نوار لغزنده حلقه می زند و به عنصر اول باز می گردد (تصویر).

این وظیفه شماست که به قابلیت استفاده و نیازهای کاربر فکر کنید.

بیایید به مثال دیگری نگاه کنیم: یک افزونه درخواستی را به API ارسال می کند، باید بتواند به شی برگشتی دسترسی داشته باشد. در اینجا نمونه ای از این مفهوم آورده شده است:

$.fn.getFlickr = function(opts) (این.each(function()) ( // jQuery chainability var defaults = ( // گزینه های پیش فرض cb: function(data)()، flickrUrl: // مقادیر استاندارد برای فراخوانی API ) // گزینه ها را با گزینه های سفارشی گسترش دهید var options = $.extend(defaults, opts || ())؛ // توابع ناهمزمان را فراخوانی کنید و سپس callback // شی برگشتی را به API $.ajax(flickrUrl, function(dataReturned)(options.cb.call(this, dataReturned); )); )));

این کد به ما امکان می دهد با استفاده از خط زیر به داده ها دسترسی پیدا کنیم:

$(selector).getFlickr(function(fdata)( // داده های flickr در شیء fdata ));

راه دیگری برای دسترسی به داده ها، استفاده از قلاب ها به عنوان گزینه است. در jQuery نسخه 1.7.1 و بالاتر، ما می توانیم پس از فراخوانی افزونه خود از .on(eventName, function()) برای استفاده از رفتار افزونه در توابع خود کاربران استفاده کنیم. به عنوان مثال، افزونه زیر نمونه خوبی از نحوه پیاده سازی این است:

$.fn.getFlickr = function(opts) ( این.each(function(i,el)( var $this = el; var defaults = ( flickrUrl: "http://someurl.com" ) var options = $. extend(defaults, opts || ());$.ajax(flickrUrl, function(dataReturned)($this.trigger("Callback", dataReturned); )).error(function())($this.trigger(" خطا "، dataReturned)؛ ))))))

این به ما توانایی فراخوانی افزونه getFlickr را می‌دهد، به‌علاوه برخی «آرزوها» را به آن متصل می‌کنیم.

$(selector).getFlickr(opts).on("بازخوانی"، تابع(داده)( // اقدام )).on("خطا"، تابع())( // رسیدگی به خطا ));

ممکن است حتی متوجه نباشید که چقدر مهم است که پلاگین جی کوئری خود را انعطاف پذیر و قابل تنظیم کنید. هرچه پلاگین شما پیچیده تر باشد، تنظیمات بیشتری باید داشته باشد.

4 - از تنظیمات زیاد استفاده نکنید

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

$(selector).myPlugin();

به طور کلی، گاهی اوقات این واقع بینانه نیست، زیرا کاربر می خواهد بتواند عملکرد را سفارشی کند. در این صورت باید هم گزینه «پیش‌فرض» و هم گزینه‌ای برای سفارشی‌سازی افزونه ارائه دهید. اما، همانطور که در این مثال از بازیابی توییت ها نشان داده شده است، سعی کنید فقط از پارامترهای لازم استفاده کنید (این افزونه فقط از یک پارامتر "نام کاربری" استفاده می کند).

$(selector).fetchTweets("jcutrell");

این پلاگین ها در بین توسعه دهندگان بسیار محبوب هستند ... توییت ها را می گیرد و آنها را در یک تگ پاراگراف می پیچد و فقط باید نام کاربری را وارد کنید.

5 - دستورات CSS را در یک فایل جداگانه قرار دهید

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

اکثر پلاگین ها شامل تصاویر و سبک های CSS هستند. اما نکته دوم را فراموش نکنید - سبک های CSS را با تصاویر نیز مستند کنید. بعید است که توسعه دهندگان بخواهند از طریق کد جستجو کنند تا آنچه را که باید تغییر دهند پیدا کنند.

استفاده از استایل بر اساس دسترسی کلاس/ID راحت‌تر است. اما کلاس‌ها و شناسه‌ها نیز باید در دسترس باشند و در مستندات توضیح داده شوند تا کاربر مجبور نباشد بفهمد در آنجا چه خبر است.

6 - نمونه هایی از استفاده از افزونه خود را ارائه دهید

اگر نمی توانید نمونه هایی از قابلیت های افزونه خود ارائه دهید، شروع به نوشتن آن نکنید. کاربران برای مدت طولانی به آن نگاه نخواهند کرد، آنها به سادگی آن را ترک می کنند تا به دنبال دیگری بگردند.

این کار سختی نیست، زیرا شما یک توسعه دهنده پلاگین هستید. تنبل نباش در اینجا چند ایده خوب برای مثال آورده شده است:

• مثال "Hello World" همیشه برای استفاده در افزونه هایی که با HTML و CSS کار می کنند راحت است.
• مثال های گسترده - فرصتی برای مشاهده تمام جنبه های عملکرد افزونه فراهم می کند. مثال ها باید تا حد امکان گزینه ها و احتمالات را نشان دهند.
• نمونه هایی از ادغام - اگر افزونه شما توانایی استفاده از افزونه های دیگر را دارد. حتماً نحوه ادغام افزونه دیگر را در کد خود نشان دهید.

۷- افزونه ای بنویسید که با اکثر نسخه های جی کوئری سازگار باشد

جی کوئری، مانند هر کتابخانه خوب، رشد می کند و توسعه می یابد. برخی از روش های قدیمی دیگر در دسترس نیستند، برخی از روش های جدید در حال معرفی هستند. یک مثال خوب برای این متد .on() است که یک راه حل همه کاره برای انتقال رویداد است. اگر با استفاده از این روش افزونه ای بنویسید، افرادی که از jQuery 1.6 استفاده می کنند کنار گذاشته می شوند. منظور من این نیست که کد شما باید حاوی متدهای منسوخ شده باشد، اما مطمئن شوید که نسخه جی کوئری را که از آن استفاده می کنید در مستندات خود ذکر کنید.

8 - تغییرات

در کنار به روز رسانی کد افزونه به نسخه جدید جی کوئری، نظارت و مستندسازی تمام به روز رسانی ها نیز ضروری است. بهترین راه برای انجام این کار استفاده از سرویس معروف GitHub است. این یک مخزن عمومی است که می توانید تمام نسخه های افزونه، تغییرات و موارد دیگر را در آن ذخیره کنید.

9 - یک افزونه محبوب بنویسید

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

اگر تصمیم دارید یک افزونه برای حوزه اجتماعی توسعه دهندگان بنویسید، دلیلی بیابید که چرا باید آن را بنویسید. همانطور که ما دوست داریم بگوییم: "چرا چرخ را دوباره اختراع کنیم"؟ البته گاهی اوقات روش های جدید و بهتری برای انجام کارهای مشابه مورد استقبال قرار می گیرد. اما باید دلایل عملی قانع کننده ای برای این وجود داشته باشد.

10 - یک نسخه فشرده از کد ارائه دهید

یک توصیه کوچک اما بسیار معقول! یک نسخه فشرده باعث محبوبیت افزونه شما می شود. همچنین برای توسعه دهندگان مهم است که بدانند محصول شما چقدر "وزن" خواهد داشت.

هنگام فشرده سازی کد، به یاد داشته باشید که نسخه غیر فشرده را ارائه دهید.

11 - کد شما خیلی نامفهوم است

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

اگر متغیرهای "a" یا "x" را نام ببرید، این اشتباه است!

همچنین سعی کنید تعداد خطوط هر تابع را کاهش دهید. درک این موضوع راحت تر و منطقی تر است.

12 - تست

امیدوارم همیشه کد خود را تست کنید، درست است؟ اگر نه، اگر از عملکرد آن مطمئن نیستید، چگونه می توانید آن را منتشر کنید. تست دستی همیشه مهم است، اما اگر صفحه را در مرورگر برای آزمایش عملکرد افزونه رفرش کنید، این درست نیست. من به شما توصیه می کنم از ابزارهایی مانند Qunit، Jasmine، Mocha استفاده کنید.

تمام کردن افکار

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

پلاگین های جی کوئری یکی از ضروری ترین اجزای سازنده وب سایت یا در واقع هر برنامه وب هستند. آنها به شما امکان می دهند عملکرد خود را گسترش دهید. این مقاله مفیدترین افزونه های سال 2012 را فهرست می کند. برای جستجوی راحت تر همه پلاگین ها به دسته های زیر تقسیم می شوند: طرح بندی صفحات وب - پلاگین ها، پلاگین های ناوبری، افزونه های فرم، پلاگین هایی برای ایجاد اسلایدر، پلاگین ها برای نمودارها و نمودارها، افکت ها برای تصاویر و موارد دیگر. همچنین در میان این افزونه ها افزونه هایی هستند که به شما در ایجاد اپلیکیشن های ریسپانسیو کمک می کنند.

پلاگین های صفحه آرایی

qualize.js یک پلاگین جی کوئری است که به شما امکان می دهد یک ساختار وب سایت مبتنی بر بلوک ایجاد کنید. این به شما امکان می دهد ارتفاع و عرض هر عنصر را تنظیم کنید.

یک افزونه جدید برای طرح‌بندی‌های واکنش‌گرا، Freetile به شما اجازه می‌دهد تا عناصری با هر اندازه‌ای را بدون نیاز به ایجاد ستون‌های شبکه با اندازه ثابت ایجاد کنید.

پلاگین Gridster.JS jquery برای ساخت شبکه های drag and drop. همچنین می توان از آن برای حذف پویا و افزودن عناصر از شبکه استفاده کرد.

Zoomooz.jsیک پلاگین jQuery با استفاده آسان برای بزرگنمایی هر عنصر در یک صفحه وب است. شما می توانید به راحتی با افزودن کلاس "zoomTarget" به هر عنصر HTML یک افکت زوم اضافه کنید. بزرگنمایی را می توان با کلیک بر روی صفحه تنظیم مجدد کرد. این افزونه در Internet Explorer 9، Safari 3+، Firefox 3.6+، Opera و Chrome تست شده است.

Wookmark افزونه ای برای ایجاد یک قالب چند ستونی پویا است.

jQuery HiddenPosition افزونه ای است که به شما امکان می دهد هر عنصری را اضافه کنید، حتی اگر پنهان باشد.

Stellar.js یک پلاگین جی کوئری است که یک افکت اختلاف منظر برای عناصر فراهم می کند.

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

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

به شما امکان می دهد حرکات متحرک را در اطراف سایت ایجاد کنید، از جمله تمام تغییرات ممکن

پلاگین های ناوبری

HorizontalNav یک پلاگین جی کوئری است که یک منوی افقی را به اندازه عرض کامل ظرف گسترش می دهد. اگر تا به حال سعی کرده اید که جلوه کشیده کردن صحیح منوی ناوبری را روی یک ظرف CSS برای یک پروژه ایجاد کنید، مطمئناً می دانید که انجام آن برای سازگاری بین مرورگرها چقدر دشوار است. این افزونه کار را آسان می کند.

stickyMojo یک پلاگین نوار کناری چسبنده جی کوئری سبک، سریع و انعطاف پذیر است. با فایرفاکس، کروم، سافاری و IE8+ کار می کند (به خوبی از نسخه های قدیمی IE پشتیبانی می کند).

ddSlick افزونه ای است که به شما امکان می دهد منوهای کشویی با تصاویر و توضیحات ایجاد کنید.

پلاگین برای سازماندهی ساده پانل های کشویی. این افزونه از کار با کوکی ها برای ذخیره وضعیت پانل ها پشتیبانی می کند. در میان گزینه‌ها، توابع بازگشتی برای سفارشی‌سازی فرآیند باز کردن و بستن بخش‌ها وجود دارد.

پلاگین برای ایجاد بلوک های جمع شونده که می توانند هر داده ای را در یک فضای محدود داشته باشند.

پلاگین های شکل دهی

این افزونه به شما امکان می دهد سطح پیچیدگی رمز عبور را تعیین کنید.

پلاگین JQuery برای تجسم فرآیند دانلود فایل ها. از کشیدن و رها کردن پشتیبانی می کند و پیش نمایش های فوری برای عکس ها ایجاد می کند.

افزونه ای که شماره کارت اعتباری را شناسایی و تأیید می کند. به شما امکان می دهد نوع کارت اعتباری را تعیین کنید.

پلاگین برای فیلتر کردن اطلاعات می توانید داده ها را بر اساس برچسب و در چندین برچسب و دسته فیلتر کنید.

افزونه ای که ورودی ایمیل را از نظر صحت در برابر یک لیست از پیش آماده شده بررسی می کند (شما می توانید محبوب ترین سرویس های ایمیل mail.ru، yandrex.ru، gmail و غیره را در اینجا قرار دهید).

پلاگین برای ایجاد لغزنده و چرخ فلک

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

iOSSlider

iosSlider یک پلاگین برای یک اسلایدر متقابل مرورگر پاسخگو است.

RSlider یک نوار لغزنده تطبیقی ​​تمام صفحه است. در بارهبه طور خودکار با عرض صفحه نمایش شما تنظیم می شود.

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

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

Adapter یک نوار لغزنده محتوای سبک وزن است که یک رابط کاربری ساده برای توسعه دهندگان فراهم می کند تا انیمیشن های تلنگر اسلاید دو بعدی یا سه بعدی ایجاد کنند. در حال حاضر از ویژگی های سه بعدی در وب کیت و مرورگرهای فایرفاکس پشتیبانی می شود. همه انتقال‌های دو بعدی در IE6+ و سایر مرورگرهای مدرن آزمایش شده‌اند.

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

Rhinoslider- کاملا انعطاف پذیر جی کوئریافزونه نمایش اسلاید. نه تنها افکت های متنوعی در دسترس است، بلکه می توانید سبک ها، افکت ها و ویژگی های خود را نیز به اسلایدر اضافه کنید.

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

Glisse.js یک گالری عکس جی کوئری ساده، پاسخگو و بسیار قابل تنظیم است.

پلاگین برای نمودارها و نمودارها

Morris.js یک کتابخانه سبک وزن است که از JQuery و Raphaël برای آسان کردن ترسیم نمودارهای سری زمانی استفاده می کند.

jQuery Org Chart افزونه ای است که به شما امکان می دهد ساختارهای درختی با عناصر تو در تو ایجاد کنید. داده ها در یک لیست نامرتب تو در تو وارد می شوند و استفاده از افزونه را فوق العاده آسان می کند.

پلاگین های تایپوگرافی

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

Textualizer - افزونه jQuery برای ایجاد افکت های زیبا بر روی متن. پشتیبانی شده: Chrome، Safari 4+، Firefox 3.5+، IE 6،7،8،9+، Opera 10.6+، Mobile Safari (iOS 4)

SlabText یک افزونه jQuery بسیار مفید است که قبل از تغییر اندازه هر خط، سرصفحه ها را خط به خط تقسیم می کند تا فضای افقی موجود را پر کند.

trunk8 یک افزونه کوتاه کردن متن برای JQuery است. به شما امکان می دهد یک بلوک بزرگ از متن را برای بازرسی اولیه به قسمت کوچکتر تبدیل کنید.

پلاگین هایی برای ایجاد افکت های مختلف برای تصاویر

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

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

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