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

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

۵۰ Awesome jQuery Plugins – Part3

 

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

 

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

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

 

۳۰- پلاگین Tubular.js:

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

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

 پلاگین Tubular.js

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

 

۳۱- پلاگین Backstretch:

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

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

پلاگین backstretch

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

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

 

۳۲- پلاگین Supersized:

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

پلاگین supersized

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

 

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

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

 

۳۳- پلاگین TouchTouch:

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

پلاگین TouchTouch

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

 

۳۴- پلاگین iPicture:

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

پلاگین ipicture

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

 

۳۵- پلاگین Adipoli:

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

پلاگین Adipoli

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

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

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

 

۳۶- پلاگین 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) کنید.

 

۳۷- پلاگین TiltShift.js:

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

پلاگین tiltShift.js

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

 

۳۸- پلاگین Threesixty.js:

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

پلاگین threeSixty.js

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

 

۳۹- پلاگین Swipe:

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

پلاگین swipe

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

 

۴۰- پلاگین CamanJs:

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

پلاگین CamanJs

 

۴۱- پلاگین SpectragramJS:

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

پلاگین spectragramJS

 

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

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

 

۴۲- پلاگین jQuery Countdown:

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

پلاگین Countdown

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

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

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

 

۴۳- پلاگین List.js:

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

پلاگین List.js

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

 

۴۴- پلاگین PointPoint:

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

پلاگین PointPoint

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

 

۴۵- پلاگین Social Feed:

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

پلاگین Social Feed

 

۴۶- پلاگین Hook.js:

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

پلاگین Hook.js

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

 

۴۷- پلاگین PercentageLoader:

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

پلاگین PercentageLoader

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

 

۴۸- پلاگین Chart.js:

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

پلاگین chart.js

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

 

۴۹- پلاگین Tooltipster:

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

پلاگین Tooltipster

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

 

۵۰- پلاگین Toolbar.js:

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

پلاگین Toolbar.js

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

 

جایزه!!!

۵۱- پلاگین gmaps.js:

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

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

پلاگین gmaps.js

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

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

 

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

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

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


برچسب‌ها:

پلاگین BackStretchپلاگین chart.jsپلاگین gmaps.jsپلاگین Hook.jsپلاگین SuperSizedپلاگین Toolbar.jsپلاگین tubular.jsپلاگین بک گراندپلاگین پس زمینهپلاگین جی کوئری

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

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

یک × یک =