جشنواره تخفیف‌های تابستانی به مدت یک هفته! کد تخفیف ۲۵% : SUMMER 

50 کتابخانه پرکاربرد و پر طرفدار jQuery (قسمت دوم)

دوشنبه ۲۱ خرداد ۹۷ توسط سینا دالوند

50 کتابخانه پرکاربرد و پر طرفدار jQuery  (قسمت دوم)

 


گراید(Grids)

کتابخونه های این بخش برای بهبود تقسیم کردن محتوای در گراید است ، این کتابخانه های با محاسبه بهترین روش محتوا ها را در گراید ها تقسیم میکنند.

25. Gridster.js

Gridster.js (گیت هاب) کتابخانه jQuery است که امکان ساخت گراید های با سایز های مختلف در چندین ستون رو به توسعه دهنده میدهد و مهمترین ویژگی این کتابخانه امکان کشیدن و رها کردن (drag & drop) است که میتوان در آن گراید ها را جابجا کرد یا همچنین امکان اضافه کردن گراید را به صورت ران تایم به سیستم میدهد . این کتابخانه میتواند یکی از بهترین کتابخانه ها در کمک در بهبود صفحه پنل کاربر باشد !

i_0023_27.jpg

26. Freetile

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

i_0022_28.jpg

27. Stalactite

Stalactite (گیت هاب) این کتابخانه نیز مانند کتابخانه قبلی محتوای درون المان اصلی را با توجه به فضای موجود به بهترین شکل مدیریت میکند ، از ویژگی های دیگر این کتابخانه نمایش تک تک محتوا به صورت انیمیشنی fade in هست که رابطه کاربری خوبی به دنبال دارد برای دیدن نمونه کلیک کنید .

i_0021_29.jpg

 


اسکرول بار شخصی سازی شده(Custom scrollbars)

شاید یکی از جالب ترین ویژگی های وب پیج ها با رابطه گرافیکی کاربر پسند ، داشتن اسکرول بار متفاوت است ؛ به طور عادی هر مرورگر وب اسکرول بار خود را دارد ولی اگر تصمیم به تغییر آن گرفتیم چه کنیم ؟

در این شرایط کتابخانه های زیر میتوانند بهترین انتخاب باشند. *البته این نکته را هم در نظر داشته باشید که ممکن است همه مرورگر ها نتوانند این اسکرول بار های کاستوم را اعمال کنند

 

28. nanoScroller.js

nanoScroller.js (گیت هاب) این کتابخانه بهترین راه برای تبدیل اسکرول بار رایج مرورگر به Mac OS هست ، اگر شما هم از طرفدار های سیستم عامل مک باشید میتونید از این کتابخونه برای تبدیل اسکرول بار مرورگر به اسکرول بار مک استفاده کنید ، نکته مهم این اسکرول بار آن است که در اسمارت فون ها هم به خوبی کار میکند و سازگاری کامل دارد.

 

i_0020_30.jpg

 

29. jQuery Custom Content Scroller

jQuery Custom Content Scroller (گیت هاب) یکی از بهترین کتابخانه های شخصی سازی اسکرول است ، در این کتابخونه میتوان اسکرول بار عمودی یا افقی وب پیجتون رو با Css به طور کامل شخصی سازی کنید و همچنین میتوان ویژگی اسکرول کردن با استفاده از غلتک موس رو با کتابخونه jQuery mousewheel plugin به وب پیج اضافه کرد ، ویژگی های مهم این کتابخونه داشتن دکمه های اسکرول ، اسکرول سریع ، اندازه گیری و اعمال ارتفاع خودکار اسکرول بار با توجه به ارتفاع محتوا ، کال بک اسکرول ، و ... است.

i_0019_31.jpg

 


پس زمینه (Backgrounds)

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

 

30. Tubular.js

Tubular.js یک کتابخونه جی کوئری است که که میتوان با استفاده از آن فیلم و کلیپ های یوتیوب را به عنوان پس زمینه تنظیم کرد تنها کافی است که ای دی المان مورد نظر را به کتابخانه بدهید و سپس ای دی فیلم را در آن درج کنید و تمام!

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

همچنین این کتابخانه امکان استاپ و پلی کرد همچنین تنظیم صدا را فراهم کرده 

i_0017_33.jpg

 

31. Backstretch

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

اگر برای استفاده از این ویژگی خیلی مشتاق هستید اما تمایلی به استفاده از این کتابخونه ندارید توصیه میکنم به این پیج حتماسر بزنید (set a full screen background image purely with CSS).

i_0016_34.jpg

 

32. Supersized

Supersized (گیت هاب) کتابخانه پیشرفته تنظیم عکس تمام صفحه در وب پیج است ، با استفاده از این کتابخانه میتوانید عکس های رو به صورت اسلاید تمام صفحه مرتب و نمایش دهید ، این کتابخانه میتواند برای بینظیر کردن سایت های عکاسی مورد استفاده قرار بگیرد ؛ همچنین تنظیمات زیادی داره که دست توسعه دهنده را برای کاستومایز کردن باز گزاشته و همچنین دارای انیمیشن های متفاوتی است!

supersized.jpg

گالری و افکت تصاویر(Galleries and image effects)

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

33. jQuery TouchTouch

jQuery TouchTouch (دمو) این کتابخونه که پارسال منتشر شد یکی از بهترین و ساده ترین کتابخونه ها برای نمایش عکس های به صورت گالری همراه با اعمال انیمیشن است که به خوبی بر روی گوشی های هوشمند کار میکند ، این کتابخونه از انیمیشن های css برای نمایش استفاده میکند ، همچنین میتوانید توسط فایل Css انیمیشن خودتان را اعمال کنید !

i_0007_43.jpg

 

34. iPicture

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

 

i_0006_44.jpg

 


35. Adipoli jQuery Image Hover Plugin

 Adipoli یک پلاگین است که با استفاده از آن میتوان هاور های انیمیشنی بر روی عکس ها اعمال کرد.این پلاگین میتواند عکس ها را هنگام هاور رنگی کرده و هنگام برداشتن موس آنها را به رنگ سیاه و سفید تغییر رنگ دهند، همچنین میتواند عکس ها را مقداری سفید کرده یا آنها را تیره کند ، برای استفاده از این کتابخونه تنها لازم است فایل js آن را وارد کنید و سپس مانند کد زیر عمل کنید:

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

با استفاده از این کتابخونه میتوانید هاور و افکت های زیبایی در تصاویر نمانه کار خود اعمال کنید !

 

i_0005_45.jpg

 

36. Swipebox

Swipebox (گیت هاب) یکی از کتابخانه های نمایش عکس به صورت گالری است که تصاویر را تمام صفحه کرده و امکان سویچ بین آنها را با کلید های چپ و راست در دسکتاپ و سویپ کردن در اسمارت فون ها فراهم کرده است ؛ برای استفاده تنها کافی است که فایل js را به پروژه خود اصافه کرده و مانند کر زیر عمل کنید :

<a href="big/image.jpg" title="My Caption">
    <img src="small/image.jpg" alt="image">
</a>
این پلاگین هم میتواند با css به شکل دلخواه شخصی سازی شود !

 

i_0004_46.jpg

 

37. TiltShift.js

TiltShift.js (گیت هاب) کتابخانه ای است که با آن میتوان اطراف مرکز یک عکس مربعی را به صورت عادی مات کرد و هنگام هاور آن را شفاف کرد . برای درک بهتر کاربرد این کتابخانه بهتر است از صفحه اصلی آن بازدید کنید؛ تنها مشکلی این کتابخانه دارد عدم پشتیبانی از تمام مرورگر هاست به طوری که تنها بر روی کروم و سافاری اجرا میشود !

i_0003_47.jpg

 

38. Threesixty.js

Threesixty.js (گیت هاب) کتابخانه ای است که با استفاده از آن میتوان ویو های قابل کشیدن (چرخش ویو با کشیدن و رها کردن موس) ایجاد کرد ! 

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

 

i_0002_48.jpg

39. Swipe.js

Swipe.js (گیت هاب) کتابخانه اسلاید ریسپانسیو است که حتی در اسمارت فون ها به خوبی کار میکند و امکان عوض کردن پیج ها با سویپ را فراهم میکند .

swipe.jpg

 

40. CamanJS

CamanJS (گیت هاب) کتابخانه قدرتمندی است که با استفاده از آن میتوان کنتراست و ویژگی های گرافیکی عکس ها را کنترل کرد و آنها را به شکل دلخواه تغییر داد . با استفاده از این کتابخانه قادر به دستکاری پیکسل های عکس خواهی بود دقیقا مانند فتوشاپ ! 

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

i_0001_49.jpg

 

41. SpectragramJS

Spectragram (گیت هاب) کتابخانه ای است که امکان استفاده از API اینستاگرام را ساده تر میکند ؛ این کتابخانه میتوانید feed ها ، عکس های محبوب ، عکس ها با تگ های خاص را به راحتی دریافت کنید و انها را برای نمایش محیا سازد.

i_0000_50.jpg

 


Misc

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

 

42. jQuery Countdown

jQuery Countdown (دمو) پلاگینی است که با استفاده از آن میتوان روز ، ساعت و ... مانده تا زمان مشخصی را به صورت انیمیشنی نمایش داد ، این پلاگیت زمان را به طور خودکار آپدیت میکند و استفاده از آن بسیار ساده است تنها کافی است که فایل js آن را به پروژه خود اضافه کرده و مانند کد زیر عمل کنید:

$('#countdown').countdown({
    timestamp   : new Date(2015, 0, 3) // January 3rd, 2015
}
شمارشگر به طور خودکار در المان Div با کلاس countdown اضافه و فعال میشود .

i_0028_22.jpg

 

43. List.js

List.js (گیت) کتابخانه ای است که برای کار با لیست در html استفاده میشود و توانایی مرتب سازی و اعمال فیلتر را بر روی ایتم های درون لیست را داراست . شما با استفاده از این کتابخانه میتوانید ایتم های خود را به صورت پویا اضافه یا کم کنید .

i_0015_35.jpg

 

44. jQuery PointPoint

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

این کتابخانه با قرار دادن یک نشانگر در کنار موس به طوری که در همه جهت ها به نقطه مورد نظر اشاره میکند باعث جلب توجه کاربر به آن نقطه خواهد شد .

i_0018_32.jpg

 

45. Social Feed

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

i_0014_36.jpg

46. Hook.js

Hook.js (گیت هاب) کتابخانه جالبی است که امکان تازه سازی وب پیج ، توسط کشیدن انگشت از بالای صفحه با پایین را فراهم می آورد (swipe refresh) ، از این کتابخانه میتوانید برای اپدیت صفحاتی که دائما محتوای جدید به آن ها اضافه میشود استفاده کرد.

i_0013_37.jpg

47. jQuery PercentageLoader

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

i_0012_38.jpg

 

48. Chart.js

Chart.js (گیت هاب) یک کتابخانه جدید است که از آن میتوان برای کشیدن 6 نوع نمودار مختلف استفاده کرد ، این کتابخانه همانند کتابخانه قبلی با استفاده از canvas های HTML5 طراحی شده است و برای بهبود گرافیک و رابطه کاربری نمایش آن با انیمیشن های مختلف ادغام شده است و کاملا قابلیت شخصی سازی دارد.

با این حال که این کتاباخنه تنها 5 کیلوبایت حجم دارد هیچ وابستگی به کتابخانه دیگری نداره و به تنهایی میتوان از آن در پروژه استفاده کرد!

i_0011_39.jpg

49. Tooltipster

Tooltipster (گیت هاب) یک کتابخانه قدرتمند برای نمایش تولتیپس است و به خوبی در دسکتاپ و اسمارت فون ها کار میکند و به توسعه دهنده اجازه کنترل کاملی بر محتوا میدهد ؛ همچنین تعداد محدودی کال بک در نظر گرفته شده که میتوان نسبت به هر عمل واکنش دلخواهی تعریف کرد .

اگر احساس میکند که به کتابخانه ای بهتر و حرفه ای تر نیاز دارید به  hint.css  رجوع کنید.

 

i_0010_40.jpg

 

50. Toolbar.js

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

با استفاده از این کتابخانه میتواند باعث بهبود فضای خالی بین المان ها شوید.

i_0009_41.jpg

 

51. gmaps.js

gmaps.js (گیت هاب) کتابخانه پرکاربردی است که تصمیم گرفتم آن را به عنوان 51 کتابخانه معرفی کنم !

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

 

i_0008_42.jpg

کلیدواژه: jquery Library best useful بهترین کتابخونه جی کوئری کاربردی مفید

منابع:

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.