معرفی و دانلود ۵۰ پلاگین‌ کاربردی جی کوئری

معرفی و دانلود ۵۰ پلاگین‌ کاربردی جی کوئری

مشخصات مقاله

معرفی و دانلود ۵۰ پلاگین‌ کاربردی جی کوئری

معرفی 50 پلاگین‌ کاربردی jQuery

50 Awesome jQuery Plugins

پلاگین‌های کاربردی جی کوئری

انواع پلاگین‌ها در jQuery:

در دنیای جی کوئری (JQuery)، توسعه دهندگان (developer-programmer) فراوانی وجود دارند که پلاگین های مفید و کاربردی نوشته اند. هنگامی که شما می خواهید از بین این همه پلاگین، پلاگین (plugin) موردنظر خود را پیدا کنید، کار سختی می تواند باشد. ما در این مقاله می خواهیم تعدادی از پلاگین های مفید و جدید را معرفی و بررسی کنیم. این پلاگین ها به چند دسته اصلی تقسیم می شوند:

Dialog, Form, Scrolling & Parallax, Text Effect, Grids, Custom Scrollbar, Backgrounds, Gallery & Image Effect, Misc

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

فهرست پلاگین های جی کوئری دیالوگ (Dialog)

 

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

1- پلاگین Alertify:

پلاگین آلرتیفای (Alertify) یک کتابخانه ای از اسکریپت های جی کوئری می باشد که سبک است و برای به نمایش در آوردن پیام ها (Notifications) و دیالوگ ها (Dialogs) بکار می رود.

پلاگین Alertify

براحتی توسط استایل های CSS قابل ویرایش و شخصی سازی است و یک API ساده دارد.

متدهای موردنیاز برای راه اندازی پلاگین Alertify:

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

// alert dialog
alertify.alert("Message");
// confirm dialog
alertify.confirm("Message", function (e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});

2- پلاگین Avgrund:

پلاگین avgrund یکی دیگر از پلاگین های دیالوگ جی کوئری است که به اندازه پلاگین alertify دارای امکانات نیست اما وب سایت شما بعد از استفاده از آن بسیار زیباتر خواهد شد. این پلاگین افکت زیبایی برای باکس های دیالوگ ایجاد می کند و آنهم به این صورت است که بک گراند zoomout و blur (مات) و تیره می شود و باکس دیالوگ روی آن ظاهر می شود.

پلاگین Avgrund

راه اندازی اولیه پلاگین Avgrund:

برای راه اندازی اولیه این پلاگین، دستور جی کوئری زیر را بنویسید:

$('element').avgrund();

برای تنظیمات این پلاگین اسکریپت زیر را تعریف کنید:

$('element').avgrund({
	width: 380, // max is 640px
	height: 280, // max is 350px
	showClose: false, // switch to 'true' for enabling close button
	showCloseText: '', // type your text for close button
	closeByEscape: true, // enables closing popup by 'Esc'..
	closeByDocument: true, // ..and by clicking document itself
	holderClass: '', // lets you name custom class for popin holder..
	overlayClass: '', // ..and overlay block
	enableStackAnimation: false, // another animation type
	onBlurContainer: '', // enables blur filter for specified block
	openOnEvent: true, // set to 'false' to init on load
	setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc.
	onLoad: function (elem) { ... }, // set custom call before popin is inited..
	onUnload: function (elem) { ... }, // ..and after it was closed
	template: 'Your content goes here..' // or function (elem) { ... }
});

 

فهرست پلاگین های جی کوئری فرم (Form)

معمولا پر کردن فرم در وب سایت ها برای کاربران کاری خسته کننده می باشد. بویژه اگر فرم دارای هیچ اعتبارسنجی (validation) سمت کاربر (Client Side) نباشد و پس از ارسال فرم (submit) و یکبار رفرش شدن (refresh) صفحه، خطاهای موجود به کاربر نشان داده شوند. پلاگین های موجود در این بخش، با اعمال زیبایی های بصری و نیز بهبود عملکرد فرم ها، باعث کاربرپسندتر (user friendly) شدن فرم ها و نیز بهبود تجربه کاربری (UX) آنها می شوند.

3- پلاگین آی‌چک (iCheck):

پلاگین iCheck امکان کنترل روی فرم ها را بیشتر می کند و براحتی قابل شخصی سازی می باشد. با موبایل سازگاری دارد و از پوسته (skin) های فلت (flat) بهره می برد.

پلاگین آی‌چک (iCheck)

برای شروع استفاده از این پلاگین، به وب سایت github مراجعه کرده و آنرا دانلود کنید. سپس باید فایل js و css آنرا به صفحه خود بچسبانید. در نهایت توسط چند دستور جی کوئری زیر، می توانید تمام radio و checkbox های فرم خود را به iCheck تبدیل کنید:

$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal'
});
});

 

4- پلاگین Long Press:

پلاگین Long Press یک پلاگین جی کوئری است که این امکان را فراهم می کند تا براحتی بتوانید از علامت ها و symbol های خاص در نوشتار خود استفاده کنید. هنگامی که دکمه ای از صفحه کلید را نگه می دارید، تمام کاراکترهای مرتبط با آن در پایین صفحه نمایش داده می شود:

پلاگین Long Press

5- پلاگین آپلود فایل (File Upload Jquery Plugin):

پلاگین آپلود فایل یک ابزاری است که دارای امکاناتی نظیر: انتخاب چندین فایل (multiple file selection) و پشتیبانی از Drag & Drop و نوار پیشرفت (Progress bar) و پیش نمایش تصاویر (Image preview) می باشد. با زبان های برنامه نویسی سمت سرور (Server side) مانند php, java, node,… قابل استفاده است.

پلاگین آپلود فایل (File Upload Jquery Plugin)

6- پلاگین Complexify:

پلاگین Complexify یک ابزاریست برای بررسی پیچیدگی رمزهای عبور. شما می توانید از این پلاگین در فرم های ثبت نام (sign up forms) برای نمایش درصد امنیت پسورد ورودی کاربر استفاده کنید. شما می توانید در این پلاگین تنظیم کنید که رمز عبور ورودی کاربر حتما شامل حروف بزرگ و کوچک و عدد و symbol (مانند @) و… باشد. این بررسی سمت کاربر (client side) می باشد و بهتر است در سمت سرور نیز این بررسی را برای اطمینان از امنیت پسوردهای کاربران انجام دهید. در این مقاله، از این پلاگین در یک فرم ثبت نام استفاده شده است.

پلاگین Complexify

7- پلاگین Jquery Knob:

پلاگین Knob برای پیاده سازی و تبدیل input های کلاسیک به المان های بصری Dial بکار می رود. این المان ها بظاهر شبیه ولوم صدای رادیوضبط های قدیمی می باشد!

پلاگین Jquery Knob

دارای ویژگی هایی نظیر: قابل لمس بودن در موبایل و تبلت (touchable) و زیبایی بصری و قابلیت کم و زیاد کردن آن توسط اسکرول ماوس (mousewheel) و صفحه کلید و… می باشند.

8- پلاگین Pickadate:

پلاگین pickadate ابزاری است برای انتخاب تاریخ و ساعت که ریسپانسیو و Mobile Friendly می باشد. استفاده از آن ساده است و براحتی می توان آنرا توسط css سفارشی سازی کرد.

پلاگین Pickadate

برای استفاده از این پلاگین، پس از مراجعه به وب سایت http://amsul.ca/pickadate.js فایل های css و js موردنیاز را دانلود کرده و به صفحه وب خود اضافه نمائید. سپس با دستور زیر، می توانید این پلاگین را راه اندازی کنید و پلاگین را روی input موردنظرتان صدا کنید:

 
 $('.datepicker').pickadate();

پلاگین Pickadate

با مراجعه به وب سایت https://codepen.io/collection/vLcih/ می توانید نمونه هایی از این پلاگین را مشاهده کنید.

9- پلاگین Chosen:

پلاگین chosen ابزاری است که می تواند یک المان select معمولی html را به یک لیست بازشوی قابل جستجو (Searchable Dropdown List) تبدیل کند. شخصی سازی (customize) آن توسط استایل های css راحت می باشد.

پلاگین chosen

10- پلاگین Fancy Input:

پلاگین fancy input باعث می شود که هنگام تایپ کردن و یا حذف کاراکتر از داخل input و یا textarea، کاربر افکت زیبایی را مشاهده کند. این افکت توسط انیمیشن های css3 ایجاد شده است. برای راه اندازی این پلاگین در وب سایت خود، با مراجعه به وب سایت github و دانلود فایلهای مربوطه، فایل جی کوئری این پلاگین را پس از کتابخانه اصلی جی کوئری اضافه کنید و دستور زیر را پس از آن تعریف کنید:

$('div :input').fancyInput();

پلاگین fancy input

11- پلاگین Typeahead.js:

پلاگین typeahead یک کتابخانه سریع برای پیاده سازی تکمیل خودکار (autocomplete) است که توسط کمپانی توئیتر (twitter.com) طراحی شده است که از باکس سرچ وب سایت توئیتر الهام گرفته است که امکانات و ویژگی های بسیار زیادی دارد. هنگامی که کاربر در حال تایپ کردن است، پیشنهادهای مرتبط با آن به کاربر نمایش داده می شود و پربازدیدترین آیتم بعنوان اولین آیتم ظاهر می شود. در تصویر زیر، کاربر با تایپ کلمه Donald با اسامی زیادی روبرو می شود که نام دونالد ترامپ بعنوان پربازدیدترین آنها در بالای لیست نمایش داده شده است.

پلاگین typeahead

12- پلاگین Parsley.js:

پلاگین parsley.js ابزاریست برای اعتبارسنجی (validation) فرم های وب سایت. توسط این پلاگین، بدون نیاز به نوشتن حتی یک خط کد جاوااسکریپت، می توانید فرم های خود را اعتبارسنجی کنید.

پلاگین parley

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

پلاگین parsley

فهرست پلاگین های جی کوئری اسکرول صفحه و پارالاکس (Page Scrolling & Parallax)

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

13- پلاگین Windows:

توسط پلاگین windows می توانید وب سایت هایی طراحی کنید که دارای چندین بخش عمودی می باشند و هر بخش کل اسکرین نمایشگر (موبایل، تبلت، دسکتاپ و…) را پوشش می دهد.

پلاگین Windows

تنظیمات پلاگین Windows:

توسط دستورات جاوااسکریپت زیر می توانید تنظیمات این پلاگین را انجام دهید:

$('.window').windows({
    snapping: true,
    snapSpeed: 500,
    snapInterval: 1100,
    onScroll: function(scrollPos){
        // scrollPos:Number
    },
    onSnapComplete: function($el){
        // after window ($el) snaps into place
    },
    onWindowEnter: function($el){
        // when new window ($el) enters viewport
    }
});

14- پلاگین Cool Kitten:

پلاگین cool kitten یک فریم ورک واکنش گرا (responsive framework) می باشد که برای طراحی وب سایت های تک صفحه ای و پارالاکس مفید می باشد. با مراجعه به وب سایت github آنرا دانلود نمائید.

پلاگین Cool Kitten

 

15- پلاگین Sticky:

پلاگین sticky این امکان را به شما می دهد تا هر المان یا بخشی از سایت تان را که مایل بودید، پس از اسکرول نیز در معرض دید کاربران باقی بماند. برای بخش هایی مانند منوی اصلی سایت (Navigation Menu) و یا نوار به اشتراک گذاری (Sharing Bar)

پلاگین Sticky

کار با این پلاگین بسیار راحت می باشد. تنها موردی که ممکن است نیاز به تنظیم داشته باشد فاصله از بالای صفحه (top offset) می باشد که آنرا به شکل زیر انجام می دهیم:

$("#sticker").sticky({topSpacing:0});

تا اینجای مقاله، پلاگین های دیالوگ (Dialog)، فرم (Form)،  پارالاکس و اسکرول صفحه (Parallax & Scroll) را معرفی و بررسی کردیم. در ادامه، پلاگین های دیگر را معرفی خواهیم کرد.

 

16- پلاگین  Super Scrollorama:

پلاگین super scrollorama یک پلاگین جالب و کاربردی است برای پیاده سازی اسکرول با انیمیشن هایی جذاب.

پلاگین super scrollorama

می توانید دستورات زیر را برای انجام تنظیمات این پلاگین تعریف کنید:

 
$(document).ready(function() {
  var controller = $.superscrollorama();
  controller.addTween('#fade',
    TweenMax.from($('#fade'), .5, {css:{opacity:0}}));
});

 

17- پلاگین Stellar.js:​

پلاگین stellar.js یک پلاگینی در جی کوئری است که توسط آن می توانید اسکرول پارالاکس (Parallax Scrolling) را روی هر المانی پیاده سازی کنید.

پلاگین stellar.js

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

$('#main').stellar();

 

18- پلاگین ScrollPath:

پلاگین Scrollpath یکی دیگر از پلاگین های جی کوئری در زمینه اسکرول و پارالاکس می باشد. اما آنچیزی که این پلاگین را از پلاگین های قبلی متمایزمی کند، قابلیت تعیین مسیر اسکرول است.

پلاگین Scrollpath

پلاگین Scrollpath از ساختار canvas برای طراحی مسیر اسکرول استفاده می کند. متدهایی مانند MoveTo و LineTo و Arc . برای مسیریابی راحت تر این امکان وجود دارد که مسیر را مشاهده کنید (مانند تصویر فوق).

 

فهرست پلاگین های جی کوئری افکت های متنی (Text Effects)

پیشرفت های زیادی در زمینه تایپوگرافی (typography) در وب طی سال های اخیر صورت گرفته است. بعنوان مثال، در سالهای نه چندان دور، تنها امکان استفاده از فونت های استانداری مانند arial , Tahoma وجود داشت و نمی توانستیم از فونت های دلخواه (مانند نازنین و رویا و…) در صفحات وب سایت خود بهره ببریم. اما به لطف پیشرفت های مذکور در زمینه تایپوگرافی وب، چند سالی است که این امکان وجود دارد. و توسط css3 می توان این فونت ها را بهبود بخشید.

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

19- پلاگین Textillate.js:

پلاگین textillate.js ابزاری است که با ادغام قدرت های animate.css و lettering.js توانسته انیمیشن های زیبایی را به المان های متنی صفحات وب اعمال کند.

پلاگین Textillate.js

AnimateCSS

پایه و اساس این انیمیشن ها CSS3 می باشد که می تواند به متن (TEXT) افکت های جالب و جذابی (حتی در موبایل) اعمال کند.

تعداد زیادی افکت و انیمیشن در پلاگین Textillate.js تعریف شده است که می توان از آنها براحتی و بصورت رایگان استفاده کرد.

20- پلاگین Arctext.js:

پلاگین arctext.js امکانی را برای طراحان وب فراهم می کند تا حروف یک متن را بصورت کمان (Arc) حالت دهند. به تصویر زیر نگاه کنید:

پلاگین arctext.js

بر اساس پلاگین lettering.js می باشد و radius مناسب را برای هر یک از حروف محاسبه می کند و در نهایت استایل های css3 را روی آنها اعمال می کند.

 

21- پلاگین Bacon:

توسط پلاگین Bacon می توانید متون موردنظر را در اطراف یک تصویر خمیده و یا یک خط چیدمان کرد. برای روشن شدن قضیه، به تصویر زیر دقت کنید:

 پلاگین Bacon

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

22- پلاگین Lettering.js:

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

پلاگین Lettering.js

23- پلاگین jQuery Shuffle Letters:

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

در تصویر نمونه زیر، عبارت Welcome to Mohtavaban.com را تست کردیم:

پلاگین jQuery Shuffle Letters

پلاگین jQuery Shuffle Letters

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

 
// Shuffle the container with custom text
$('h1').shuffleLetters({
    "text": "show this text!" // optional
});

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

 

24- پلاگین FitText.js:

پلاگین FitText.js این امکان را به طراحان وب می دهد تا کلمه یا عبارت موردنظر را در container آن بصورت full width نمایش دهد و در تمام اسکرین ها مانند تبلت و موبایل نیز تمام صفحه باشد.

متونی که با توسط این پلاگین در container خود fit شده اند در تمام نمایشگرها ریسپانسیو خواهند بود.

 

فهرست پلاگین های جی کوئری گریدها (Grids):

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

25- پلاگین Gridster.js:

پلاگین gridster.js امکان ایجاد ستون ها و گریدهای با قابلیت drag یا draggable را برای طراحان فراهم می کند. حتی می توان بصورت داینامیک، گریدی را حذف و یا اضافه کرد.

پلاگین Gridster.js

 این پلاگین برای پروژه هایی مانند داشبورد (Dashboard) مفید می باشد.

پلاگین gridster.js

26- پلاگین Freetile:

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

پلاگین Freetile

روش کار این پلاگین بطور کلی بدین صورت است که باید آن را روی container اعمال کنیم. خود پلاگین بقیه کارها را انجام می دهد. یعنی المان های داخل آن container را طوری چیدمان می کند که از فضای موجود بهترین استفاده را ببرد (استفاده بهینه از فضا:optimal use of space)

27- پلاگین Stalactite:

پلاگین Stalactite یک کتابخانه از جی کوئری است که محتویات صفحه وب را بر اساس فضای موجود، فشرده (pack) می کند و از متد Lazy Loading استفاده می کند.

پلاگین Stalactite

برای ایجاد افکت بهتر، هنگامی که کاربر اسکرول می کند، گریدهای صفحه چیده می شوند.

 

فهرست پلاگین های جی کوئری نوار اسکرول سفارشی (Custom Scrollbar)

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

28- پلاگین nanoScroller.js:

پلاگین nanoScroller.js امکانی را برای طراحان وب فراهم می کند تا بتوانند دیزاین اسکرول پیش فرض مرورگرها را شبیه Mac OS طراحی کنند.

پلاگین nanoScroller.js

این پلاگین، از زبان نشانه گذاری minimal HTML و اسکرول پیش فرض مرورگرها بهره می برد. اسکرولی که توسط پلاگین nanoScroller ایجاد می شود در دستگاه های iPad و iPhone و تبلت های اندروید نیز قابل استفاده و مشاهده است.

29- پلاگین Custom Content Scroller:

پلاگین Custom Content Scroller یک پلاگین سفارشی سازی scrollbar می باشد که بطور کامل توسط css قابل طراحی و شخصی سازی می باشد. به دو صورت افقی (horizontal) و عمودی (vertical) قابل استفاده است و با بهره بردن از پلاگین mousewheel امکان استفاده از Mouse wheel را نیز دارد.

پلاگین Custom Content Scroller

پلاگین فوق دارای ویژگی های نظیر: دکمه اسکرول (Scrolling Button)، افکت easing، تعیین اندازه طول اسکرول بصورت اتوماتیک، نوار اسکرول تو در تو (Nested Scrollbar) و… می باشد.

فهرست پلاگین های جی کوئری پس زمینه (Background):

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

30- پلاگین Tubular.js:

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

$('#wrapper').tubular({videoId: '0Bmhjf0rKe8'});

 پلاگین Tubular.js

پلاگین tubular.js همچنین امکان pause و play کردن ویدئو و نیز تنظیم صدای آنرا به شما می دهد.

31- پلاگین Backstretch:

پلاگین backstretch پلاگینی ساده از جی کوئری است که به شما بعنوان طراح وب امکان ست کردن تصویر پس زمینه Dynamically-Resized و اسلایدشوی تصاویر به هر صفحه و یا المانی از صفحات وب را می دهد.

این پلاگین بطور اتوماتیک تصویر پس زمینه را به اندازه wrapper اصلی در می آورد و با تغییر اندازه صفحه نمایش (مانند موبایل و تبلت و…) تصویر پس زمینه حالت واکنش گرایی (responsive) خود را حفظ می کند.

پلاگین backstretch

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

اگر مایلید بدون استفاده از پلاگین، بک گراند با تصاویر فول اسکرین داشته باشید، می توانید به مقاله “تصویر فول اسکرین بعنوان پس زمینه توسط CSS” مراجعه نمائید.

32- پلاگین Supersized:

پلاگین supersized یک پلاگین پیشرفته از جی کوئری است که تصاویر پس زمینه فول اسکرین را فراهم می کند. توسط این پلاگین می توانید تصاویری را بصورت اسلایدشو برای پس زمینه وب سایت تان در نظر بگیرید که تمام طول و عرض صفحه را در تمام نمایشگرها می پوشاند.

پلاگین supersized

این قابلیت پلاگین Supersized برای وب سایت های عکاسی و شخصی و نمونه کار (رزومه کاری) می تواند مفید باشد. این پلاگین تنظیمات زیادی دارد مانند افکت ها و انیمیشن های مختلف برای اسلایدشو و…

 

فهرست پلاگین های جی کوئری افکت های تصویر و گالری تصاویر:

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

33- پلاگین TouchTouch:

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

پلاگین TouchTouch

 شما بعنوان طراح وب براحتی می توانید با ویرایش یک فایل css استایل های پیش فرض این پلاگین را به میل خود تغییر دهید.

34- پلاگین iPicture:

پلاگین ipicture یک پلاگین جی کوئری می باشد که می تواند تصاویر تعاملی (interactive) ایجاد کند. بدین صورت که می توان در بخش هایی از تصویر، مانند تصویر زیر، tooltip و یا hint به کاربر نمایش دهیم.

پلاگین ipicture

در تولتیپ مذکور و یا hint می توانید کدهای HTML بنویسید. بنابراین قابلیت نمایش تصویر، ویدئو و متن در آنها وجود دارد. استایل آن را نیز می توانید توسط ویرایش کدهای CSS آن شخصی سازی کنید.

35- پلاگین Adipoli:

پلاگین Adipoli یک پلاگین جی کوئری است که می تواند افکت های مختلفی را بهنگام بردن ماوس بر روی تصاویر (Hover) ایجاد کند. مانند: سیاه و سفید شدن تصویر، رنگی شدن تصویر و…

پلاگین Adipoli

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

 
$('#image1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});

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

 

36- پلاگین Swipebox:

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

پلاگین Swipebox

این پلاگین حرکات swipe (کشیدن انگشتان به سمت چپ و راست در صفحات لمسی) و کلیدهای چپ و راست کیبورد را شناسایی می کند و توسط آنها نیز می توان تصاویر اسلایدشو را به عقب و جلو برد. برای راه اندازی این پلاگین، بعد از اینکه فایل های CSS/JS مربوطه را دانلود کردید و به صفحه وب اضافه نمودید، کافیست مانند زیر، کلاس swipebox را به تصویر موردنظر خود اعمال کنیم:

<a href="big/image.jpg" title="My Caption">
<img alt="image" src="small/image.jpg" />
</a>

مانند سایر پلاگین های این بخش، با ویرایش فایل css این پلاگین، می توانید آنرا شخصی سازی (Customize) کنید.

 

37- پلاگین TiltShift.js:

پلاگین tiltShift.js یک پلاگین تروتمیز جی کوئری است که افکت tilt-shift را روی تصاویر اعمال می کند. از قابلیت filter در css3 استفاده می کند.

پلاگین tiltShift.js

نکته ای که وجود دارد اینست که این پلاگین در مرورگر اینترنت اکسپلورر (IE) کار نمی کند.

38- پلاگین Threesixty.js:

پلاگین threeSixty.js پلاگین جی کوئری است که می تواند نمایش 360 درجه ای و قابل Drag را فراهم کند. برای کار با این پلاگین، باید مسیر تصاویری را که از زوایای مختلف از محصول و یا شی موردنظر خود گرفته ایم را به پلاگین بدهیم. باقی کارها را خود پلاگین انجام خواهد داد و یک نمایش 360 درجه ای را برای شما فراهم می کند.

پلاگین threeSixty.js

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

39- پلاگین Swipe:

پلاگین swipe پلاگین دیگریست برای ایجاد گالری های ریسپانسیو. آن چیزی که این پلاگین را ویژه می کند، طراحی اختصاصی آن برای صفحات لمسی (Touch Screen) می باشد.

پلاگین swipe

این پلاگین در تمام مرورگرها (و IE 7 به بعد) بدرستی کار می کند.

40- پلاگین CamanJs:

پلاگین CamanJs یک پلاگین قدرتمند برای ویرایش و دستکاری تصاویر است. بر اساس المان canvas ساخته شده است. توسط این پلاگین کنترل زیادی روی پیکسل های تصاویر خواهید داشت و تنظیماتی شبیه فتوشاپ را می توانید بر روی تصاویر اعمال کنید.

پلاگین CamanJs

41- پلاگین SpectragramJS:

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

پلاگین spectragramJS

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

پلاگین های واقع در این بخش، جزء هیچیک از دسته های قبلی (مانند گالری، افکت متن و…) نمی باشند، اما ارزش معرفی و بررسی را دارند.

42- پلاگین jQuery Countdown:

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

پلاگین Countdown

کار کردن با آن آسان است و فقط کافیست فایل های js و css آن را پس از دانلود، به صفحه وب خود اضافه کنید و توسط اسکریپت زیر، پلاگین countdown را راه اندازی کنید:

 
$('#countdown').countdown({
    timestamp   : new Date(2015, 0, 3) // January 3rd, 2015
}

در کد فوق، شمارش معکوس در div با آیدی countdown نمایش داده خواهد شد.

 

43- پلاگین List.js:

پلاگین List.js این امکان را برای شما فراهم می کند که به لیست استاندارد html ، ویژگی های جستجو (searching)، مرتب سازی (sorting) و فیلتر (filtering) را اضافه می کند. شما می توانید بصورت داینامیک، آیتم هایی را حذف، اضافه و یا ویرایش کنید.

پلاگین List.js

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

44- پلاگین PointPoint:

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

پلاگین PointPoint

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

45- پلاگین Social Feed:

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

پلاگین Social Feed

46- پلاگین Hook.js:

حتما تابحال با این ویژگی در اپلیکیشن های موبایل و تبلت مانند اینستاگرام روبرو شده اید: هنگامی که صفحه را با دست تان به پایین می کشید، صفحه رفرش می شود. توسط پلاگین Hook.js می توانید این ویژگی جالب را به وب سایت خود اضافه کنید.

پلاگین Hook.js

با رفرش شدن صفحه وب سایت، محتوا و پست های جدید بنمایش در می آیند.

47- پلاگین PercentageLoader:

برای نمایش درصد پیشرفت یک فرآیند در وب سایت بصورت ویژوالی و زیبا، می توانید از پلاگین PercentageLoader استفاده کنید.

پلاگین PercentageLoader

این پلاگین برای پیاده سازی زیبایی بصری progressbar ها، از canvas موجود در HTML5 بهره برده است. این پلاگین تنها 10 کیلوبایت حجم دارد. بدین دلیل که بجای استفاده از تصویر، از وکتور استفاده شده است. بنابراین قابلیت استفاده در سایزهای مختلف را دارد. (بدون افت کیفیت)

48- پلاگین Chart.js:

پلاگین chart.js یک کتابخانه ای است که از المان canvas واقع در html5 برای ایجاد چارت های جذاب و کاربرپسند، بهره می برد. دارای 6 دسته کلی نمودار و چارت می باشد که هریک از این دسته ها به بخش های مختلفی تقسیم می شود.

پلاگین chart.js

پلاگین chart.js به هیچ کتابخانه دیگری نیاز ندارد و مستقل می باشد. سایز این پلاگین حدود 5 کیلوبایت می باشد که بسیار سبک و کم حجم است. با فلش (flash) خداحافظی کنید!

49- پلاگین Tooltipster:

برای نمایش انواع تولتیپ، پلاگین Tooltipster یکی از بهترین پلاگین ها می باشد. در موبایل و دسکتاپ قابل استفاده است و شما بعنوان طراح وب، کنترل کاملی بر روی محتوای تولتیپ (tooltip) دارید. از callback function های مختلفی پشتیبانی می کند.

پلاگین Tooltipster

اگر دنبال یک پلاگین کم حجم تر برای ایجاد تولتیپ می گردید، پلاگین Hint.css بهترین گزینه برای شما خواهد بود.

50- پلاگین Toolbar.js:

برای نمایش یک باکس پاپ آپ زیبا که بصورت تولبار (نوار ابزار:toolbar) باشد، می توانید از پلاگین Toolbar.js استفاده کنید.

پلاگین Toolbar.js

اکشن ها و آیکون های آنها (مانند edit و remove و…) قابل ویرایش و حذف و اضافه می باشند. این پلاگین بخصوص در برنامه های موبایل که فضای کمتری برای نمایش دارند بسیار مفید می باشد.

جایزه!!!

51- پلاگین gmaps.js:

پلاگین پنجاه و یکم را بعنوان هدیه به شما کاربران عزیز در نظر گرفته ایم!

پلاگین gmaps.js یک پلاگین مفید و قدرتمند جی کوئری می باشد که کار با نقشه گوگل (Google Map) را به مراتب آسان می کند.

پلاگین gmaps.js

امکاناتی نظیر لیست زیر را خواهیم داشت:

  • قراردادن علامت (marker) بر روی نقشه در محل دلخواه
  • کنترل زوم روی نقشه (zoomin و zoomout)
  • تعیین مختصات روی نقشه (coordinate)
  • منتظر رویداد بودن (listen to events)
  • و…

تمام ویژگی های فوق را می توان در اسکریپت جی کوئری تعریف کرد.

سری آموزشی پلاگین های مفید جی کوئری در اینجا به پایان می رسد. از همراهی شما سپاسگذارم. در صورتی که پلاگین مفیدی را می شناسید که جایش در بین 50 پلاگین معرفی شده خالی است، لطفا به ما اطلاع دهید…

منبع: http://tutorialzine.com

5/5 (1 نظر)

اطلاعات مقاله

معرفی و دانلود ۵۰ پلاگین‌ کاربردی جی کوئری

فرم ارسال دیدگاه درباره

معرفی و دانلود ۵۰ پلاگین‌ کاربردی جی کوئری

دیدگاه کاربران درباره

معرفی و دانلود ۵۰ پلاگین‌ کاربردی جی کوئری

دیدگاهی وجود ندارد