معرفی ۵۰ پلاگین‌ کاربردی jQuery – بخش اول

معرفی ۵۰ پلاگین‌ کاربردی jQuery – بخش اول

۵۰ Awesome jQuery Plugins – Part1

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

 

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

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

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

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

 

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

 

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

 

۱- پلاگین 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"
    }
});

 

۲- پلاگین 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) آنها می شوند.

 

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

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

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

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

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

 

۴- پلاگین Long Press:

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

پلاگین Long Press

 

 

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

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

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

۶- پلاگین Complexify:

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

پلاگین Complexify

 

۷- پلاگین Jquery Knob:

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

پلاگین Jquery Knob

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

 

۸- پلاگین Pickadate:

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

پلاگین Pickadate

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

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

پلاگین Pickadate

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

 

۹- پلاگین Chosen:

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

پلاگین chosen

 

۱۰- پلاگین Fancy Input:

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

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

پلاگین fancy input

 

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

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

پلاگین typeahead

 

۱۲- پلاگین Parsley.js:

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

پلاگین parley

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

پلاگین parsley

 

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

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

 

۱۳- پلاگین 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
    }
});

 

۱۴- پلاگین Cool Kitten:

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

پلاگین Cool Kitten

 

۱۵- پلاگین Sticky:

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

پلاگین Sticky

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

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

 

در مقاله بعد، سایر پلاگین های جی کوئری را معرفی و بررسی خواهیم کرد…/ 


برچسب‌ها:

افزونه جی کوئریپلاگین alertifyپلاگین avgrundپلاگین jqueryپلاگین اسکرولپلاگین پارالاکسپلاگین جی کوئریپلاگین دیالوگپلاگین های jquery

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

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

سیزده − 6 =