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

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

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

 

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

 


دیالوگ ها(Dialogs)

1. Alertify.js

Alertify (گیت هاب) یک کتابخونه کوچیک JQuery هست که میتونید با اون پنجره و دیالوگ های مورد نظرتون رو به شکل و طرح دلخواه شخصی سازی کنید. شخصی سازی این دیالوگ ها به راحتی توسط css امکان پذیر است و همچنین این کتابخونه یک API ساده دراختیارتان قرار میدهد ؛ برای استفاده تنها کافی است فایل js ان را در پروژه خود قرار دهید و سپس مانند کد زیر از آن استفاده کنید :

// alert dialog
alertify.alert("Message");

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

 

2. jQuery Avgrund

jQuery Avgrund (گیت هاب) یکی دیگه از کتابخونه های پرکاربرد در بحث دیالوگ ها کتابخونه Avgrund هست که امکانات خوبی برای ساخت دیالوگ های شخصی سازی شده در اختیار توسعه دهنده های قرار میده اما این نکته قابل ذکر هست که این کتابخونه نسبت به Alertify امکانات کمتری داره !

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

i_0047_3.jpg

 


فرم ها

شاید یکی از بدترین بخش های وب ، پرکردن فرم ها برای کابرها باشه! چون هربار بعد از وارد کردن اطلاعات گیر میده که این غلطه ، این تکراریه و ... ، در این بخش قصد داریم چند کتابخانه مفید معرفی کنیم بلکه کمی کاربر ها رو مشتاق به پرکردن فرم کنیم !

 

3. iCheck

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

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

 

4. Long Press

Long Press(گیت هاب) همونطور که از اسم این کتابخونه مشخصه میدونیم قراره با فشار دادن طولانی دکمه ها سر و کار داشته باشیم ، و به این شکل عمل میکنه که برای مثال با نگهداشتن کلید H ،در پایین صفحه یک لیست از کاراکتر های مشابه H یعنی(Ĥ Ħ ĥ ẖ) ظاهر میشه که میتونید با کلید های جهت اونها رو انتخاب کنید (البته برای حروف فارسی کار نمیکنه) !

i_0045_5.jpg

 

5. jQuery File Upload

jQuery File Upload (گیت هاب) شاید به جرات بشه گفت که یکی از کتابخونه های قوی در بخش اپلود فایل این کتابخونه است ، این کتابخونه با داشتن ویژگی های "کشیدن و رها ردن،نمایش درصد اپلود ، chunked  ،استاپ و ادامه دادن اپلود ، تغییر سایز عکس ها در سمت کاربر) تونسته محبوبیت خوبی پیدا کنه و همچنین سازگاری اون با تمام مرورگر ها و عدم وابستی به زبان بک اند باعث انعطاف پذیر تر شدن این کتابخونه شده ! 

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

i_0044_6.jpg

 

6. Complexify

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

*راهنمای کتابخونه Complexify

i_0043_7.jpg

 

7. jQuery Knob

jQuery Knob (گیت هاب) یکی از کتابخونه های قوی برای نمایش و انتخاب درصد کتابخونه زیر هست که از کلیک موس و اسکرول ، تاچ توسط اسمات فون ها و ...  پشتیبانی میکنه و از همه مهمتر ریسپانسیو هست و در اسکرین سایز های مختلف هیچ مشکلی نداره !

<input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness="0.3" value="29">

 

i_0042_8.jpg

 

8. Pickadate.js

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

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

 

i_0041_9.jpg

 

9. Chosen

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

i_0040_10.jpg

 

10. Fancy Input

Fancy Input (گیت هاب) اگر یک input text خوب طراحی کردید ، توصیه میکنم به کتابخونه زیر نگاهی بندازید ، این کتابخونه مقدار های وارد شده در input رو به صورت انیمیشنی وارد و پاک میکنه (البته با فارسی سازگار نیست)

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

 

11. Typeahead.js

Typeahead (گیت هاب) با سریع ترین کامل کننده خودکار (auto compelete) متن که توسط شرکت توییتر ارائه شده اشنا بشید ! 

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

i_0038_12.jpg

 

12. Parsley.js

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

i_0037_13.jpg

 


پارالاکس و اسکرول کردن صفحه

از اونجایی که خودم یکی از طرفدار های پر و پا قرص قالب ها تک صفحه ای هستم ، این بخش از همه بخش ها برام جذاب تره ! 

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

 

13. 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
    }
});
i_0036_14.jpg

 

14. Cool Kitten

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

i_0035_15.jpg

 

15. Sticky

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

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

 

16. Super Scrollorama

Super Scrollorama (گیت هاب) این کتابخانه به توسعه دهنده ها این امکان رو میده که با توجه به مقدار اسکرول صفحه ، المان های مورد نظرشون رو به صورت انیمیشنی جابجا کنن و به اونها انواع انیمیشن ها رو اعمال کنن ،برای نمونه میتونید به صفحه اصلی همین کتابخونه مراجعه کنید.

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

 

17. Stellar.js

Stellar.js (گیت هاب) از این کتابخانه میتونید برای دادن قابلیت پارالاکس به هر المانی در صفحه استفاده کنید و همچنین به توسعه دهنده توانایی تنظیم سرعت و مقدار اون رو هم میده.

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

 

18. Scrollpath

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

.

i_0031_19.jpg

 


جلوه های نوشته

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

19. Textillate.js

Textillate.js (گیت هاب) این کتابخونه یکی از کتابخونه های قوی متن هست که با دو کتابخونه دیگه (animate.css وlettering.js) ترکیب شده و کنترل زیادی به توسعه دهنده برای اعمال افکت و انیمیشن های مختلف بر روی متن های موجود در صفحه وب میده ، انیمیشن ها موجود در این کتابخونه بر پایه CSS3 هستن و قابلیت اعمال شمار زیادی از انیمیشن های متنوع بر روی صفحات وب چه در دسکتاپ و چه در اسمارت فون ها میده.

i_0030_20.jpg

 

20. Arctext.js

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

i_0029_21.jpg

 

21. Bacon

Bacon (گیت هاب) این کتابخونه میتونه به متن مورد نظر این ویژگی رو بده که در دو طرف یک خط یا یک منحنی تقسیم بشن که به شما توانایی بالای در اجرای طرح های تاپیوگرافی رو میده .

i_0027_23.jpg

 

22. Lettering.js

Lettering.js (گیت هاب) یک کتابخانه بسیار ساده ولی تاثیرگذار برای اعمال جلوه های خاص بر روی متن است.این کتابخونه با تبدیل هر حرف به یک span ، این ویژگی را فراهم میکند که برای هر حرف جلوه ای خاص طراحی شود.

i_0026_24.jpg

23. jQuery Shuffle Letters

jQuery Shuffle Letters (دمو) از این کتابخونه میتویند برای دادن طرح نمایشی جنریت شدن متن از حروف و علائم به یک جمله استفاده کنید و نکته قابل توجه این کتابخانه این است که با زبان فارسی کاملا سازگاری دارد.

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

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

i_0025_25.jpg

 

24. FitText.js

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

i_0024_26.jpg

 

 

25 کتابخانه مفید بعدی در قسمت دوم منتشر خواهد شد.


کلیدواژه: jQuery مفید پر کاربرد کتابخانه پلاگین جی کوئری جذاب مهم

منابع: tutorialzine.com

دیدگاه ها:
hrokhbakhsh
۳ ماه قبل
reply
ممنون از سایت خوبتون
پشتیبانی آرکادمی
۳ ماه قبل در پاسخ به hrokhbakhsh
reply
سپاس از همراهی شما 🌹
ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.