jQuery plaginlari veb-sayt yoki har qanday veb-ilovani yaratishda eng zarur komponentlardan biridir. Ular sizning funksiyalaringizni kengaytirishga imkon beradi. Ushbu maqolada 2012 yilning eng foydali plaginlari keltirilgan. Qidiruvni osonlashtirish uchun barcha plaginlar quyidagi toifalarga bo'linadi: Veb-sahifa tartibi - plaginlar, navigatsiya plaginlari, Form plaginlari, slayderlar yaratish uchun plaginlar, diagrammalar va grafiklar uchun plaginlar, tasvirlar uchun effektlar va boshqalar. Shuningdek, ushbu plaginlar orasida javob beruvchi ilovalarni yaratishda sizga yordam beradigan plaginlar mavjud.
Sahifa tartibi plaginlari
equalize.js - bu jQuery plagini bo'lib, blokka asoslangan veb-sayt tuzilishini yaratishga imkon beradi. Bu har qanday elementning balandligi va kengligini sozlash imkonini beradi.
Ta'sirchan tartiblar uchun yangi plagin, Freetile har qanday o'lchamdagi elementlarni qattiq o'lchamdagi panjara ustunlarini yaratmasdan yaratishga imkon beradi.
Gridster.JS jQuery plaginini sudrab olib tashlash panjaralarini qurish uchun. Bundan tashqari, tarmoqdan elementlarni dinamik ravishda olib tashlash va qo'shish uchun ham foydalanish mumkin.
Zoomooz.js — istalgan veb-sahifa elementini kattalashtirish uchun ishlatish uchun qulay jQuery plaginidir. Har qanday HTML elementiga "zoomTarget" sinfini qo'shish orqali osongina masshtablash effektini qo'shishingiz mumkin. Sahifani bosish orqali kattalashtirishni tiklash mumkin. Plagin Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera va Chrome’da sinovdan o‘tgan.
Wookmark - bu dinamik ko'p ustunli shablonni yaratish uchun plagin.
jQuery HiddenPosition plagin bo'lib, u yashirin bo'lsa ham istalgan elementni qo'shish imkonini beradi.
Stellar.js jQuery plaginidir, u elementlar uchun parallaks effektini ta'minlaydi.
Bo'limlar o'rtasida harakatlanishda haqiqiy sahifani aylantirish effektini qo'shadigan jQuery plagini. Uskuna tezlashuvi qo'llaniladi. Planshet va smartfonlarda ishlaydi.
Javob beruvchi tipografiya uchun plagin. Bu sizga ideal shrift hajmini yaratuvchi selektordan foydalanish imkonini beradi.
Sayt atrofida jonlantirilgan harakatlarni, shu jumladan barcha mumkin bo'lgan o'zgarishlarni yaratishga imkon beradi
Navigatsiya plaginlari
HorizontalNav - bu jQuery plagini bo'lib, u gorizontal menyuni konteynerning to'liq kengligiga moslashtiradi. Agar siz loyiha uchun CSS-konteynerga navigatsiya menyusini to'g'ri cho'zish effektini yaratishga harakat qilgan bo'lsangiz, brauzerlar o'rtasidagi muvofiqlik uchun buni qilish qanchalik qiyinligini aniq bilasiz. Ushbu plagin buni osonlashtiradi.
stickyMojo - bu engil, tez va moslashuvchan jQuery yopishqoq yon panel plaginidir. U Firefox, Chrome, Safari va IE8+ bilan ishlaydi (IE ning eski versiyalarini juda yaxshi qo'llab-quvvatlaydi).
ddSlick - bu tasvirlar va tavsiflar bilan ochiladigan menyularni yaratishga imkon beruvchi plagin.
Ochiladigan panellarni oddiy tashkil qilish uchun plagin. Plagin panellar holatini saqlash uchun cookie-fayllar bilan ishlashni qo'llab-quvvatlaydi. Variantlar orasida bo'limlarni ochish va yopish jarayonini sozlash uchun qaytarish funktsiyalari mavjud.
Cheklangan maydonda har qanday ma'lumotlarni o'z ichiga olishi mumkin bo'lgan yig'iladigan bloklarni yaratish uchun plagin.
Plaginlarni shakllantirishPlagin parolning murakkablik darajasini aniqlash imkonini beradi.
Fayllarni yuklab olish jarayonini vizualizatsiya qilish uchun JQuery plagini. U sudrab olib tashlashni qo'llab-quvvatlaydi va fotosuratlar uchun tezkor ko'rishlarni yaratadi.
Kredit karta raqamlarini aniqlaydigan va tasdiqlovchi plagin. Bu sizga kredit karta turini aniqlash imkonini beradi.
Ma'lumotlarni filtrlash uchun plagin. Siz ma'lumotlarni teg bo'yicha va bir nechta teg va toifalar bo'yicha filtrlashingiz mumkin.
Oldindan tayyorlangan roʻyxat boʻyicha elektron pochta orqali kiritilgan maʼlumotlarning toʻgʻriligini tekshiradigan plagin (bu yerga mail.ru, yandrex.ru, gmail va boshqalarni eng mashhur elektron pochta xizmatlarini kiritishingiz mumkin).
Slayderlar va karusellarni yaratish uchun plaginlar
Sichqoncha, sensorli panel va klaviatura yordamida o'tishlarni boshqarish imkonini beruvchi plagin. Standart o'tishlarga siz manba faylida mavjud bo'lgan qo'shimchalarni qo'shishingiz mumkin.
iosSlider
iosSlider - bu sezgir o'zaro faoliyat slayder uchun plagin.
RSlider - bu to'liq ekranli moslashuvchan slayder. U avtomatik ravishda ekraningiz kengligiga moslashadi.
Fresco - sezgir yorug'lik qutisi plaginidir. U barcha ekran o'lchamlari, barcha brauzerlar va barcha qurilmalarda ajoyib ishlaydigan ajoyib qoplamalarni yaratish uchun ishlatilishi mumkin.
BookBlock: Content Flip plagin
BookBlock bu jQuery plaginidir, u sizga sahifani aylantirish uslubida navigatsiya yaratish imkonini beruvchi buklet uslubidagi komponentlarni yaratish uchun ishlatilishi mumkin. Bu erda siz har qanday tarkibdan foydalanishingiz mumkin, u rasm yoki matn bo'lsin. Plagin strukturani faqat kerak bo'lganda (boshqacha qilib aytganda, faqat sahifa aylantirilganda) o'zgartiradi va realizmni qo'shish uchun qoplamalar va soyalardan foydalanadi.
Adapter - bu engil tarkibli slayder bo'lib, u ishlab chiquvchilar uchun chiroyli 2D yoki 3D slaydni aylantirish animatsiyalarini yaratish uchun oddiy interfeysni ta'minlaydi. Hozirda webkit va Firefox brauzerlarida 3D xususiyatlarini qo'llab-quvvatlash mavjud. Barcha 2D o'tishlar IE6+ va boshqa zamonaviy brauzerlarda sinovdan o'tkazildi.
Bir nechta foydali xususiyatlarga ega doimiy karusel. Uni sozlash oson va hatto eski brauzerlarni ham qo'llab-quvvatlaydi.
Rhinoslider juda moslashuvchan jQuery slayd-shou plaginidir. Faqat turli xil effektlar mavjud emas, balki slayderga o'z uslublaringiz, effektlaringiz va xususiyatlaringizni ham qo'shishingiz mumkin.
Sequence bu jQuery plagini bo'lib, kontentni o'ziga xos tarzda aylantirish uchun mo'ljallangan va sizga to'liq boshqarish imkonini beradi. Har qanday turdagi kontentdan foydalanish mumkin; u cheksiz aylanadi. U semantik belgilashdan foydalanadi, shuningdek, sezgir shablonlarni va sensorli qurilmalarni qo'llab-quvvatlaydi.
Glisse.js oddiy, sezgir va juda moslashtirilgan jQuery foto galereyasidir.
Grafiklar va grafiklar uchun plaginlarMorris.js - bu vaqt seriyalarining chizmalarini chizishni osonlashtirish uchun JQuery va Raphaël-dan foydalanadigan engil kutubxona.
jQuery Org Chart - bu ichki elementlar bilan daraxt tuzilmalarini yaratishga imkon beruvchi plagin. Ma'lumotlar ichki tartibsiz ro'yxatga kiritiladi, bu plaginni ishlatishni juda oson qiladi.
Tipografiya plaginlariBacon.js - jQuery plaginidir, u matnni Bezier egri chizig'i yoki chizig'i atrofida o'rash imkonini beradi.
Textualizer - matnga chiroyli effektlar yaratish uchun jQuery plagini. Qo'llab-quvvatlanadi: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)
SlabText juda foydali jQuery plagini bo'lib, mavjud gorizontal bo'shliqni to'ldirish uchun har bir satr o'lchamini o'zgartirishdan oldin sarlavhalarni satrga bo'linadi.
trunk8 JQuery uchun matnni kesish plaginidir. Dastlabki tekshirish uchun matnning katta blokini kichikroq qismga qisqartirish imkonini beradi.
Tasvirlar uchun turli effektlarni yaratish uchun plaginlarBu egilish effektini yaratish uchun CSS3 filtrlaridan foydalanadigan jQuery plaginidir.
Moslashuvchan tasvirlar effektini amalga oshirish uchun plagin.
Tasvir xaritalarini yaratishni osonlashtiradigan jQuery plagini. Ushbu vosita yordamida har qanday tasvir xaritasini ajratib ko'rsatish yoki tanlash mumkin va xaritani turli usullar bilan boshqarish mumkin. U barcha asosiy brauzerlarda, jumladan, Internet Explorer 6 da ishlaydi, u Flash-dan foydalanmaydi va jQuery-dan boshqa hech narsa talab qilmaydi. Ba'zi ilg'or effektlar HTML5-ni qo'llab-quvvatlashni talab qiladi, ammo u eski brauzerlarda ishlaydi.
...
Xuddi shu galereyaga misol, lekin Bootstrap 3 ramkasida yaratilgan:
Bootstrap 3 da xuddi shu galereya demosi Pinterestga oʻxshash rasm galereyasini yaratishBiz Gridify plaginiga asoslangan rasm galereyasining ikkinchi versiyasini yaratamiz. Ushbu plagin Pinterest kabi tasvirlar panjarasini yaratish uchun mo'ljallangan.
Ushbu galereyani yaratish jarayonini quyidagi bosqichlarda taqdim etamiz:
Eslatma: gridify.js plaginining bir nechta ilovalari mavjud. Ushbu loyihada biz jQuery kutubxonasiga asoslanganini tanlaymiz.
$(funksiya () ( var options = ( srcNode: "img", // panjara elementlari (sinf, tugun) chegarasi: "15px", // piksel kengligidagi chekka: "240px", // panjara elementi kengligi pikselning max_width : "", // dinamik kamar elementining kengligi o'lchami o'zgartirilishi mumkin: rost, // agar oyna o'lchamini o'zgartirish bo'lsa, tartibini o'zgartirish: "barcha 0,5 s oson" // CSS3 uchun o'tishni qo'llab-quvvatlash ); $(".grid").gridify(options) ;)))
2. Galereya uchun HTML kod yaratish:
Biz fancyBox-dan foydalanib, oldingi misoldagi kabi galereya tasvirini ko'rib chiqamiz.
Bootstrap 4 uchun Pinterestga o'xshash rasm galereyasining yakuniy kodi:
Bootstrap 4 - gridify.js img (to‘ldirish: 4px; fon rangi: #fff; chegara: 1px qattiq #ddd; chegara radiusi: 4px; ) img: hover ( shaffoflik: 0,6; filtr: alfa) yordamida sezgir tasvirlar galereyasini yaratish (shaffoflik = 60); ) 
Bootstrap 3 da xuddi shu galereyaga misol.
Ushbu qo'llanmada biz plitkali panjara yordamida portfel sahifasi tartibini yaratishni ko'rib chiqamiz. Mesh yaratish uchun kutubxonalar va Deyv DeSandro ishlatiladi. Namoyishda ko'rsatilgan rasmlar Unsplash.com saytidan olingan.
Masonlik - ustunga asoslangan panjara. Float o'rash yordamida yaratilgan panjaradan farqli o'laroq, Masonry panjarasi qat'iy satr balandligiga ega emas, bu veb-sahifa ichidagi bo'sh joydan optimal foydalanishni ta'minlaydi va keraksiz bo'sh joyni kamaytiradi. Ushbu panjara portfel sahifalari, rasm galereyasi bo'lgan sahifalar va blog postlari bo'lgan sahifalar uchun mos keladi.
1. Meta teglar va bo'limDuvarcılık galereyasi
2. Sahifa sarlavhasiSahifa sarlavhasi - bo'limda quyidagi konteyner elementlari mavjud:
- logotip;
- Asosiy menyu
- ;
— asosiy menyuni koʻrsatish/yashirish tugmasi.
Xelen Parker shaxsiy fotograf
3. Rasmlar bilan panjaraSahifaning asosiy qismi fotosuratlar bilan bloklardan iborat bo'lib, ular uchun kulrang rang filtri o'rnatilgan bo'lib, ularga qora va oq fotosuratlar effektini beradi. Agar kursorni o'rnatsangiz, bu effekt yo'qoladi.
Altbilgida mualliflik huquqi haqidagi ma'lumotlar va ijtimoiy tarmoqlarga havolalar mavjud.
Mualliflik huquqi © 2018 Helen Parker
5. File style.css * ( box-sizing: border-box; padding: 0; hoshiya: 0; ) body ( shrift-family: "Muli", sans-serif; shrift o‘lchami: 14px; chiziq balandligi: 1,5 ; rang: #19121e; fon rangi: oq; ) ul (roʻyxat uslubi: yoʻq; ) a ( matn bezatish: yoʻq; kontur: yoʻq; ) .konteyner (kenglik: 100%; maksimal kenglik: 1120px; toʻldirish : 0 10px; hoshiya: 0 avtomatik; ) .qator (chegara: 0 -10px; ) /******************************** ********* ********************************/ /* SALOV */ /** ********* ***************************************** /sarlavha (pastki chekka: 20px; ) .header-row (displey: flex; align-elementlar: markaz; asoslash-tarkib: boʻsh joy; toʻldirish: 20px 0; joylashuv: nisbiy; chegara-pastki: 2px qattiq #d9d9d9 ; ) .logo-nomi (displey: blok; shrift o‘lchami: 26px; chiziq balandligi: 1; shrift oilasi: "Radley", serif; matnni o‘zgartirish: katta harf; rang: #19121e; ) .logo tavsifi ( joylashuv: nisbiy; displey: blok; matnni tekislash: o'ngga; shrift o'lchami: 10px; matnni o'zgartirish: katta harf; rang: #a1787e; ) .logo-ta'rif:oldin (kontent: ""; pozitsiyasi: mutlaq; yuqori: 50%; chap: 0; o'ng: 0; balandligi: 1px; fon rangi: #a1787e; z-indeks: -1; ) .logo-ta'rif oralig'i ( padding-chap: 10px; fon-rang: oq; ) #menyu (pozitsiya: mutlaq; tepa: calc(100% + 1px); chap: 0; o'ng: 0; z-indeks: 10 ; ko'rinish: yashirin; noaniqlik: 0; fon rangi: oq; o'tish: .3s chiziqli; ) #menu.show (ko'rinish: ko'rinadigan; shaffoflik: 1; ) #menu li a (displey: blok; to'ldirish: 10px 0; pozitsiya: nisbiy; rang: #19121e; shrift o'lchami: 18px; ) #menyu li.current a (rang: #a1787e; ) .burger (pozitsiya: nisbiy; kenglik: 28px; balandlik: 19px; kursor: ko'rsatgich; ). burger oralig‘i (pozitsiya: mutlaq; tepa: 8px; eni: 28px; balandlik: 3px; fon rangi: #19121e; o‘tish: fon rangi .3s qulaylik; ) .burger oralig‘i:oldin, .burger oralig‘i: keyin (kontent: ""; pozitsiya: mutlaq; kenglik: 28px; balandlik: 3px; fon rangi: #19121e; oʻzgartirish: aylantirish(0deg); oʻtish: fon rangi .3s qulaylik, oʻzgartirish .4s oson -in-out, top .4s ease-in-out; ) .burger oralig'i:oldin ( tepa: -8px; ) .burger oralig'i:keyin ( tepa: 8px; ) .burger.yopish oralig‘i (fon rangi: shaffof; ) .burger.yopish oralig‘i:oldin ( fon rangi: #a1787e; transform: aylantirish(45deg); tepa: 0; ) .burger.yopish oralig‘i:keyin ( fon -rang: #a1787e; aylantirish: aylantirish (-45deg); tepa: 0; ) /******************************** ******** ********************************/ /* PORTFOLIO GRID */ /*** ******** ******************************************** / . grid (chet-pastki: 20px; ) .grid-element (kenglik: 100%; toʻldirish: 10px; ) .grid-element a (displey: blok; ) .grid-item img (displey: blok; kenglik: 100 %; -webkit-filtr: kulrang rang (100%); filtr: kulrang rang (100%); o'tish: . 5s qulaylik; ) .grid-element a:hover img ( -webkit-filtr: kulrang rang(0%); filtr: kulrang rang(0%); ) /************************ ********************************************************/ /* FOOTTER */ /* ******************************************** *** *******/ .footer-row ( toʻldirish: 20px 0; hoshiya tepasi: 2px qattiq #d9d9d9; ) .footer-col ( toʻldirish: 0 10px; ) .footer-col: first-child ( text- tekislash: markaz; ) .social-icon-conrapper (displey: flex; justify-content: markaz; align-elementlar: markaz; chekka-yuqori: 20px; ) .social-icon (displey: blok; eni: 24px ; balandlik: 24px; chiziq balandligi: 24px; chegara radiusi: 50%; chekka-chap: 12px; matnni tekislash: markaz; shrift oʻlchami: 15px; rang: #a1787e; fon rangi: rgba(20,20,20, 0); transform: masshtab(1); o‘tish: .3s chiziqli; ) .social-icon:hover (transformatsiya: scale(1.2); fon: #a1787e; rang: #fff; ) /**** *** ************************************* *******/ /* MEDIA SO'ROVLAR * / /************************************ ************ *************/ @media (min-kengligi: 480px) ( .grid, .footer-row (displey: flex; ) .grid-element, .footer-col (kenglik: 50%; ) .social-belgichalar-oʻrash (oqlash-tarkib: flex-end; chet-usti: 0; ) .footer-col:birinchi-child ( text- align: chap; ) ) @media (min-kengligi: 768px) ( .grid-element (kengligi: 33.33333333333333%; ) .burger (displey: yoʻq; ) .header-row (displey: flex; align-elementlar: markaz; justify-content: bo'sh joy; ) #menu (displey: flex; pozitsiya: statik; ko'rish: ko'rinadigan; noaniqlik: 1; ) #menu li ( padding-left: 40px; ) #menu li a ( to'ldirish: 0; ) #menyu li a: oldin (kontent: ""; pozitsiya: mutlaq; pastki: -4px; o'ng: 0; chap: avtomatik; kenglik: 0; balandlik: 1px; z-indeks: 2; fon rangi: #19121e; o'tish: .25s kubik-bezier(.694,.048,.335,1) .15s; ) #menu li a:hover:oldin, #menyu li.current a:oldin ( kengligi: 100%; chap: 0; ) #menu li.current a:before ( fon rangi: #a1787e; ) ) 6. SkriptlarTo'liq ishlash uchun siz quyidagi skriptlarni ulashingiz kerak:
To'r tasvirlarini joylashtirish bilan bog'liq muammo tasvirlar yuklangan plagin yordamida hal qilinadi. U tasvir qachon yuklanganligini aniqlaydi va keyin Masonry panjarasini yaratadi.
6.1. main.js fayli (funksiya ($) ( $(oyna).on("yuk", funktsiya () ( var masonryGrid = $(".grid"); masonryGrid.imagesLoaded(funksiya () ( masonryGrid.masonry(( itemSelector) : ".grid-element", foizPosition: true ); )); )); $(document).on("click", ".burger", function () ( $(".burger").toggleClass( "yopish"); $("#menu").toggleClass("show"); )); ))(jQuery);Bunday komponent veb-sayt dizaynida fon yoki dekorativ element sifatida juda mos kelishi mumkin, chunki biz rasmlarni ko'rsatish va ularga tasodifiy o'tishlarni qo'llash imkoniyatiga egamiz.
Biz quyidagi qo'shimcha jQuery plaginlaridan foydalanamiz:
*ko'pchilik CSS o'tishlari uchun
* mos keladigan CSS parametrlari uchun brauzerni qo'llab-quvvatlashni tekshirish
Ushbu qo'llanmadagi chiroyli rasmlar Sherman Geronimo-Tan () tomonidan yaratilgan va Creative Commons Attribution 2.0 Umumiy litsenziyasi (CC BY 2.0) ostida tarqatilgan.
HTML strukturasi langar elementlari va rasmlari bilan oddiy tartibsiz ro'yxatni o'z ichiga oladi:
Plaginga qo'ng'iroq qilish uchun oddiygina foydalaning:
$("#ri-grid").gridrotator();
});
Boshqa kerakli skriptlarni qo'shishni unutmang.
Variantlar
// qatorlar soni
qatorlar: 4,
// ustunlar soni
ustunlar: 10,
// turli ekran kengliklari uchun qatorlar/ustunlar
//ya'ni w768 768 pikseldan kichik ekranlar uchun
w1024: (
qatorlar: 3,
ustunlar: 8
},
w768: (
qatorlar: 3,
ustunlar: 7
},
w480: (
qatorlar: 3,
ustunlar: 5
},
w320: (
qatorlar: 2,
ustunlar: 4
},
w240: (
qatorlar: 2,
ustunlar: 3
},
// qadam: bir vaqtning o'zida almashtiriladigan elementlar soni
// tasodifiy ||
// eslatma: ishlash bilan bog'liq muammolar uchun raqam > options.maxStep bo'lmasligi kerak
qadam: "tasodifiy",
maksimal qadam: 3,
// foydalanuvchining elementlarni bosishini oldini olish
preventClick: rost,
// animatsiya turi
// ko'rsatishYashirish || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || masshtab || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || tasodifiy
animType: "tasodifiy",
// animatsiya tezligi
animatsiya tezligi: 500,
// animatsiyani yumshatish
animEasingOut: "chiziqli",
animEasingIn: "chiziqli",
// element(lar) har 3 soniyada almashtiriladi
// Eslatma: ishlash muammolari uchun vaqt "bo'lishi mumkin emas"< 300 ms
interval: 3000
To'r o'lchamini aniqlayotganda, siz ro'yxatga qo'yganingizdan ko'ra, panjarada kamroq tasvirga ega bo'lishingizni hisobga olishingiz kerak. Aytaylik, ro'yxatda sizda 50 ta rasm bo'ladi va 5 ta ustun va 4 qatorni aniqlaysiz. Shunday qilib, biz 20 ta rasm va qolgan 30 ta rasmga o'tish imkoniyatiga ega bo'lgan panjara olamiz.
Ushbu demolarni uch xil konfiguratsiya bilan tekshiring:
* : Tasodifiy animatsiyalar / 55% konteyner kengligi / kalitlar orasidagi 3 soniya
