CSS tugmasini bosish orqali ochiq blokni yashiring. CSS bilan bosish hodisasini boshqarish
Ko'pchiligingiz ushbu maqolaning sarlavhasini o'qib chiqib, CSS-ni bosish hodisasini boshqarish mumkin emasligini aytadilar. Biroq, bu mutlaqo to'g'ri emas. Va ushbu maqolada men faqat CSS-dan foydalanib, klik hodisasini qanday boshqarishni ko'rsataman.
Aytaylik, bizda ma'lum bir yorliq bor, uni bosish orqali ushbu yorliqning mazmuni ochiladi. Ko'pchilik bularning barchasini JavaScript-da bajaradi, lekin aslida, bu holda, bosish hodisasi CSS orqali osongina boshqarilishi mumkin.
Birinchidan, eng keng tarqalgan HTML kodi:
Tarkibi 1
1-tab
Tarkib 2
2-tab
Hech qanday g'ayrioddiy narsa yo'q, faqat tab nomi kontent ostida joylashgan bo'lsa, nima uchun buni keyinroq tushunasiz. Va endi CSS kodi:
Yorliqlar (
float: chap; /* Barcha yorliqlarni bir qatorga joylashtiring */
chegara: 10px; /* Yorliqlarni bir-biridan ajratib oling */
}
.content(
ko'rsatish: yo'q; /* Tarkibni yashirish */
to'ldirish ustki qismi: 20px; /* Yorliq sarlavhasi kontent ostida bo'lishi uchun */
pozitsiyasi: mutlaq; /* Kontentni sahifadagi elementlarni siljitishning oldini olish uchun */
}
.tabs:faol .kontent (
displey: blok; /* Yorliqni bosganimizda, biz kontent tarkibini ochamiz */
}
.content: suring (
displey: blok; /* Kursor tarkib ustida turganda, uni yopmang */
}
Algoritm quyidagicha: yorliq nomini bosganingizda, faol psevdo-element avtomatik ravishda ishga tushadi, lekin u faqat tugma bosilganda ishlaydi, chunki biz uni qo'yib yuborishimiz bilan tarkib yopiladi. Bunga yo'l qo'ymaslik uchun, agar kursor tarkib ustiga olib kelinsa (hover psevdoelement) yopilmasligi shartini qo'shamiz. Va kursorimiz yorliqni bosish orqali avtomatik ravishda tarkibga tushishi uchun biz tugmani tarkibning ostiga joylashtirdik va ustiga maydon qo'shdik. Shunday qilib, yorliq nomini bosish orqali biz tarkibni ham bosamiz, shuning uchun bosgandan so'ng biz sichqoncha tugmachasini xavfsiz qo'yib yuborishimiz mumkin va biz kursorni ko'rsatgan holda tarkibni "ushlab turishni" davom ettiramiz.
Buzg'unchi - bu dastlab foydalanuvchilardan yashirin bo'lgan va foydalanuvchi ma'lum bir tugmani bosganda paydo bo'ladigan ma'lumotlar blokidir. Mening veb-saytimda, spoyler shaklida, sharh qo'shish QOIDALARI mavjud. Belgilangan RULES so'zini bossangiz, quyida qoidalarga ega blok ochiladi.
Yuqorida yozganimdek, men bir-biriga o'xshash, ammo turli skriptlardan foydalanadigan va turli animatsiyalarni bajaradigan bir nechta usullarni ko'rsataman. Quyida misollar keltirilgan.
Keling, ulardan birini veb-saytingizda qo'llashingiz uchun usullarning har birini tartibda ko'rib chiqaylik. Lekin buni qilishdan oldin jQuery kutubxonasini aniqlaymiz. Agar siz uni ilgari ulagan bo'lsangiz, usullarni ko'rib chiqing, agar bo'lmasa, uni sarlavha yoki altbilgiga ulang.
Endi tartibda boramiz.
№1 usulDarhaqiqat, eng oddiy usullar, bosilganda, blok darhol paydo bo'ladi. Qayta bosilganda, u darhol yo'qoladi. Hammasi oddiy. Men ham bu usuldan foydalanaman.
Juda oddiy skript qo'shing. Siz uni to'g'ridan-to'g'ri blokni ko'rsatmoqchi bo'lgan joyga qo'shishingiz mumkin, uni sarlavha yoki altbilgiga ulashingiz mumkin yoki uni faylga qo'yishingiz mumkin, keyin siz saytga yana, istalgan joyda ulanishingiz mumkin.
$(hujjat).ready(function())( $(".spoiler-body"). hide(); $(".spoiler-title").click(funksiya())( $(bu).keyingi( ) o'zgartirish ())); ));
Skript spoyler-tana sinfi tayinlangan blok bilan ishlaydi va uni tugma, blok yoki havola bosilganda, umuman, spoyler sarlavhasi sinfi tayinlangan har qanday narsani ko'rsatadi. Blokni ko'rsatish uchun skript almashtirish usulidan foydalanadi.
Spoiler Hoverda paydo bo'ladigan yashirin matnni ko'rsatish/yashirish
Ochilgan tugma b tegi ichidagi matn bo'ladi, aytganimdek, istalgan tegdan foydalanishingiz mumkin.
Keling, minimal uslublarni tayinlaylik. Asosiy parametr - displey: blok uchun hech biri, yashirin bo'ladi. Bu shart, aks holda u ishlamaydi.
Buzg'unchi sarlavha (kursor: ko'rsatgich;).spoiler tanasi (displey: yo'q; fon: #f1f1f1;)
Boshqa hech narsa kerak emas, hamma narsa ishlashi kerak. Yana bir nuqta bor. Siz ushbu animatsiyani biroz yumshoqroq qilishingiz mumkin. Buning uchun almashtirish usulidan keyin qavslar ichida millisekundlarda qiymat qo'shing.
Masalan: toggle(500) . Endi blok bir zumda ochilmaydi, lekin yarim soniyada 0,5. Ochilish bloki diagonal ravishda yuqori chapdan pastki o'ngga ko'rinadi. Buni yuqoridagi misolda ko'rishingiz mumkin.
Bu va boshqa barcha usullar uchun bir xil bloklar va sinflar qo'llaniladi, shuning uchun men hamma narsani qayta yozmayman. Faqat skriptning o'zi boshqacha bo'ladi.
Ushbu usul blokni silliq ochadi va u yuqoridan pastgacha ko'rinadi. Ko'rinish uchun skript slideToggle usulidan foydalanadi.
$(hujjat).ready(function())( $(".spoiler-title").click(funksiya())( $(tush).parent().children(".spoiler-body").slideToggle( ); false qaytaring;)))
Bu erda, birinchi variantda bo'lgani kabi, siz animatsiya vaqtini o'zgartirishingiz mumkin. Odatiy bo'lib, uning qiymati 400 millisekundga teng. Tezlashtirmoqchi yoki sekinlashtirmoqchi bo'lsangiz, qavs ichiga qiymat qo'shing.
Masalan: slideToggle(600) .
Bu usul asosan ikkinchisi bilan bir xil, bir xil animatsiyaga ega, ammo u bitta qiziqarli xususiyatga ega. Blokni ochish uchun bosilgan tugma o'zgaradi. Siz ko'rgan misolda bu shunchaki matn - Blok ochilganda matnni yashirishga o'zgartiriladigan matnni ko'rsatish.
Agar siz tasavvurni qo'shsangiz, matn o'rniga rasm yoki blok qo'shishingiz mumkin, uni uslublar bilan bezashingiz mumkin. Ushbu usulda quyidagi funktsiyadan foydalaniladi.
$(hujjat).ready(funksiya())( $(".spoiler-tana").hide(); $(".spoiler-title").click(funksiya())( $(tush).toggleClass( "opened ").toggleClass("yopiq").next().slideToggle(); if($(this).hasClass("ochilgan")) ( $(this).html("Matnni yashirish"); ) else ( $ (bu).html("Matnni ko'rsatish"); ) ); ));
Animatsiya vaqtini ikkinchi usuldagi kabi bir xil usul yordamida o'zgartirishingiz mumkin.
Bu men ko'rsatmoqchi bo'lgan uchta asosiy usul. Qaysi biri sizga mos kelishini o'zingiz hal qilasiz. Endi siz tugmani bosganingizdan so'ng paydo bo'ladigan blokni osongina tashkil qilishingiz mumkin.
Veb-saytingizda spoylerlardan foydalanasizmi va nima uchun?
Hammasi shu, e'tiboringiz uchun rahmat. 🙂
Deyarli har bir saytda siz tugmachalarni ko'rishingiz mumkin - Batafsil ma'lumot, Ma'lumot, Ma'lumotni ochish/yashirish va boshqalar. Ularni bosganingizda, tegishli ma'lumotlarga ega blok asta-sekin ochiladi. Buni qanday amalga oshirish kerak?
Yetarlicha oddiy. JS (jQuery kutubxonasi) dan foydalanish. Keling, uni Google serveridan ulaymiz:
Endi to'liq misol. Uni ajratmaslik va sizni chalkashtirib yubormaslik uchun men undagi barcha asosiy fikrlarni sharhlayman.
$(hujjat).ready(funksiya() (
$("A#trigger").toggle(function() (
// Yashirin blokni ko'rsatish
$("DIV#box").fadeIn(); // fadeIn - silliq ko'rinish
},
funktsiya () (
// Blokni yashirish
$("DIV#box").fadeOut(); // fadeOut - silliq yo'qolish
yolg'onni qaytarish; // havolaga amal qilmang
))) // toggle oxiri()
))) // tayyorning oxiri()
Ma'lumotni ko'rsatish/yashirish
Yashirin blok tarkibi
Shuni unutmangki, bu misolda biz jQuery-ni masofadan ulaymiz. Misol Internetga ulanmagan mahalliy kompyuterda ishlamaydi.
JQuery yordamida blokni ochish va yashirish natijasini ko'rib chiqamiz:
Spoylerlar
$(hujjat).ready(funksiya())(
$(".spoiler_links").click(function())(
$(tush).parent().children("div.spoiler_body").toggle("normal");
yolg'onni qaytarish;
});
});
.spoiler_body (displey: yo'q;)
.spoiler_links (kursor: pointer;)
Spoiler №1 ko'rsatish / yashirish
Birinchi spoylerdagi matn
Birinchi spoylerdagi matn
Spoiler №2 ko'rsatish / yashirish
Matn ikkinchi spoylerda
Matn ikkinchi spoylerda
Misol to'liq yig'ilgan. Google kutubxonalaridan jQuery-ni yuklash uchun sizga internetga ulanish kifoya.
Veb-sayt yoki blogni yaratish va uni mazmun bilan to'ldirish jarayonida, turli sabablarga ko'ra, ba'zida matnning bir qismini yashirish, ko'proq hajmli ma'lumotlarni hozircha yashirilgan blokga joylashtirish kerak bo'ladi, lekin baribir foydalanuvchiga boshqa narsa bor va unga keyingi qator yoki sahifaga o'tmasdan yashirin tarkibni ko'rish imkoniyatini bering.
Ilgari, bunday yechimni amalga oshirish uchun javascriptdan bir guruh foydalanilgan, ammo hozir bularning barchasi ajoyib xususiyatlar yordamida juda oson bajarilishi mumkin.
Bugun biz faqat CSS3 xususiyatlaridan foydalangan holda, ma'lum bir matn elementini bosganingizda ochiladigan sayt sahifalarida va alohida xabarlarda yashirin kontent bloklarini yaratishning eng oddiy usulini ko'rib chiqamiz. Kommutator bitta so'z, ajratilgan ibora, butun jumla yoki ma'lumot belgisi bo'lishi mumkin.
Bunday bloklar ko'pincha kontentning katta miqdori bo'lgan sahifalarda qo'llaniladi, uni yanada tuzilgan va ixcham qilish uchun barcha tarkiblar foydalanuvchiga faqat sarlavhalar taqdim etiladigan guruhlarga bo'linadi, barcha matnlar sukut bo'yicha yashiringan. va ma'lum bir elementga bosish orqali ko'rish mumkin (yuqoriga qarang).
Keling, keraksiz suvsiz ishlashga harakat qilaylik, bu oddiy mexanizmni aniq misol bilan ko'rib chiqing va agar xohlasangiz, biror narsani tahrirlashingiz mumkin:
Misol № 1Tanlanmagan va belgilanmagan matn qo'shimcha ma'lumotlarga ega bo'lgan ochiladigan bloklar uchun kalit sifatida ishlatiladi, uni bosish uchun bir ma'noli taklif bilan, siz qo'rqmasdan yoki ko'rish uchun shubhasiz qilishingiz kerak)))
Ko'rib turganingizdek, hamma narsa a'lo darajada ishlaydi, yashirin tarkib muammosiz paydo bo'ladi va sichqonchani engil bosish bilan yo'qoladi va shu bilan birga biz HTML ramkasida ham, formatlashda ham bajariladigan kodning minimal miqdoridan foydalandik. CSS uslublari. Qo'shimcha JavaScript kutubxonalarini ulamasdan, ular foydalanuvchi tomonidan o'chirilganmi yoki yo'qmi degan abadiy tashvish bilan.
Bularning barchasi radio tugmalari () kabi interfeys elementlariga qo'llaniladigan CSS3 :checked pseudo-klassi tufayli mumkin. Biz aslida nima qildik, tegda biz tur atributiga qiymat belgilash katakchasini, shuningdek joriy blok kalitining "hd-1" uchun noyob identifikatoriga mos keladigan id="hd-1" identifikatorini tayinladik. Displeyni o'rnatish orqali biz tasdiqlash qutilarini butunlay va abadiy yashiramiz: class.hide-da hech qanday xususiyat.
Aslida, bu erda tushuntirish uchun hech qanday maxsus narsa yo'q; yashirin bloklarni yoqish va o'chirishning butun mexanizmi uchta elementdan iborat:
- Belgilash qutisi - tip atributining belgilash katakchasi qiymati va ma'lum bir bog'lovchi identifikatorga ega teg
- Sarlavha (matnni almashtirish) - for atributi uchun noyob identifikator qiymatiga ega teg (identifikator turi atributining tasdiqlash qutisi qiymati bilan kirish tegining identifikatori bilan bir xil bo'lishi kerak).
- Kontent bloki div yorlig'i bo'lib, u yaxshi vaqtgacha, foydalanuvchi bosmaguncha, turli xil yashirin tarkibni (matn, tasvirlar, va hokazo) o'z ichiga oladi.
Umid qilamanki, mening xaotik tushuntirishimdan gap nimada ekanligi ayon bo'ldi. CSS yangi uslublarni qo'llaydi (belgilangan psevdo-sinfdan foydalangan holda), foydalanuvchi faqat noyob identifikator tomonidan belgilash katakchasi bilan bog'langan elementni bosganida ilgari yashirin bo'lgan kontent blokini ko'rsatadi.
Bularning barchasidan muhim bir eslatma kelib chiqadi:
Xuddi shu sahifada bir nechta yashirin bloklardan foydalanganda, har bir radio tugmasi boshqa bloklardagi identifikatorlardan farq qiladigan noyob identifikatorga ega bo'lishi kerak.
Shunday qilib, so'zlar bilan biz nima qaerga va nima uchun ketishini aniqladik, endi butun tuzilmaning html ramkasini ko'rib chiqamiz:
| < input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Ochish uchun shu yerni bosing!< div>Yashirin tarkib ......< input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Batafsil o'qish uchun shu yerni bosing!< div>Yashirin kontent... |
Ochish uchun shu yerni bosing! Yashirin tarkib...... Batafsil o'qish uchun shu yerni bosing! Yashirin kontent...
Keyinchalik, biz to'g'ridan-to'g'ri CSS uslublarini shakllantirishga o'tamiz, ularsiz bu dizayn ishlamaydi. Kodning eng kami, hech qanday bezaksiz, siz uchun belgilash va yashirin matn ramkasini ko'rsatish uchun ochiladigan blok uchun fonni biroz ajratib ko'rsatdi. Siz bloklarni xohlaganingizcha loyihalashingiz, chegaralar, yumaloq burchaklar qo'shishingiz, matnni ajratib ko'rsatishingiz yoki .
1.CSS| . yashirish, . hide + label ~ div (displey: yo'q; ) /* teg matni ko'rinishi */ . yashir + teg, . yashirish: belgilangan + yorliq (to‘ldirish: 0; rang: yashil; kursor: ko‘rsatgich; chegara - pastki: 1px nuqtali yashil; ). yashirish: belgili + label + div (displey: blok; fon: #efefef; - moz- box- soya: inset 3px 3px 10px #7d8e8f; - webkit- box- soya: inset 3px 3px 10px #7d8e8f; box- soya: inset 3px 3px 10px #7d8e8f; toʻldirish: 10px; ) |
/* katakchalar va kontent bloklarini yashirish */ .hide, .hide + label ~ div (displey: none; ) /* label text ko‘rinishi */ .hide + label, .hide:checked + label ( padding: 0; rang: yashil ; kursor: ko'rsatgich; chegara-pastki: 1px nuqta yashil; ) /* kalit faol bo'lganda yorliq matnining ko'rinishi */ .hide: checked + label (rang: qizil; chegara-pastki: 0; ) /* qachon belgilash katakchasi faol, kontentli bloklarni ko'rsatish */ .hide:checked + label + div (displey: blok; fon: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; quti soyasi: kiritish 3px 3px 10px #7d8e8f; toʻldirish: 10px; )
Bularning barchasi, astsetik misol uchun, to'liq etarli minimal. Ammo hech bo'lmaganda ba'zi yaxshi narsalarni qo'shmasak, biz umuman o'zimiz bo'lmaymiz va foydalanuvchiga qaerga bosish kerakligini vizual ravishda aytib berish yaxshiroqdir.
Ikkinchi misolda men plyus ko'rinishidagi oddiy belgini qo'shdim, bu bu erda boshqa narsa yashiringanligini aniq ko'rsatadi; bosilganda, u bir zumda minusga aylanadi va men yashirin bloklarga mazmunli kichik animatsiya qo'shdim. ular paydo bo'ladi va bularning barchasi faqat CSS3 sehrining yordami bilan.
| /* belgilash katakchalari va kontent bloklarini yashirish */ . yashirish, . hide + label ~ div (displey: yo'q; ) /* teg matni ko'rinishi */ . hide + label ( chekka: 0 ; to‘ldirish: 0 ; rang: yashil; kursor: ko‘rsatgich; displey: inline-block; ) /* kalit faol bo‘lganda yorliq matnining ko‘rinishi */ . yashirish: belgilangan + yorliq (rang: qizil; chegara - pastki: 0 ; ) /* belgilash katakchasi faol bo'lganda, kontent bilan bloklarni ko'rsatish */ . yashirish: belgili + label + div (displey: blok; fon: #efefef; - moz- box- soya: inset 3px 3px 10px #7d8e8f; - webkit- box- soya: inset 3px 3px 10px #7d8e8f; box- soya: inset 3px 3px 10px #7d8e8f; chekka-chap: 20px; toʻldirish: 10px; /* paydo boʻlganda kichik animatsiya */ - webkit- animatsiya: fade ease- 0.5 soniyada; - moz- animatsiya: soʻnish qulayligi- 0.5 soniyada ; animation: fade ease- 0. 5s; ) /* yashirin bloklar paydo bo'lganda animatsiya */ @- moz- keyframes so'nadi ( dan ( noaniqlik: 0 ; ) gacha ( shaffoflik: 1 ) ) @- webkit- kalit kadrlar o'chib ketadi ( dan ( noaniqlik: 0 ; ) dan ( shaffoflik: 1 ) ) @ kalit kadrlar o'chib ketadi ( dan ( shaffoflik: 0 ; ) dan ( shaffoflik: 1 ) ). yashirish + yorlig'i: oldin (fon-rang: #1e90ff; rang: #fff; kontent: "\002 B"; displey: blok; float: chap; shrift- o'lchami: 14px; shrift- vazn: qalin; balandlik: 16px; chiziq balandligi: 16px; hoshiya: 3px 5px; matnni tekislash: markaz; kenglik: 16px; - webkit- chegara- radius: 50%; - moz- chegara- radius: 50%; chegara radiusi: 50%; ). yashirish: belgilangan + yorliq: oldin (kontent: "\221 2" ; ) |
/* belgilash katakchalari va kontent bloklarini yashirish */ .hide, .hide + label ~ div (displey: yo‘q; ) /* yorliq matni ko‘rinishi */ .hide + label (chekka: 0; to‘ldirish: 0; rang: yashil; kursor : ko'rsatgich; display: inline-block; ) /* kalit faol bo'lganda yorliq matnining ko'rinishi */ .hide:checked + label (rang: qizil; chegara-pastki: 0; ) /* belgilash katakchasi faol bo'lganda, ko'rsatish mazmunli bloklar */ . hide:checked + label + div (displey: blok; fon: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; chekka-chap: 20px; toʻldirish: 10px; /* paydo boʻlganda ozgina animatsiya */ -webkit-animation:fade ease-da 0,5s; -moz-animation:fade ease -0,5 soniyada; animatsiya: 0,5 soniyada pasayadi; ) /* yashirin bloklar paydo bo'lganda animatsiya */ @-moz-keyframes o'chib ketadi ( ( opacity: 0; ) dan ( opacity: 1 ) ) @-webkit-keyframes fade ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) @keyframes fade ( from ( opacity: 0; ) to ( opacity: 1 ) ) .hide + label:before ( background-color: #1e90ff; rang: #fff; tarkib: "\002B"; displey: blok; float: chap; shrift o'lchami: 14px; shrift vazni: qalin; balandligi: 16px; chiziq balandligi: 16px; chekka: 3px 5px; matnni tekislash: markaz; kengligi: 16px; -webkit-border-radius: 50%; -moz-chegara-radius: 50%; chegara radiusi: 50%; ) .hide:checked + label:oldin (kontent: "\2212"; )
Barcha hisob-kitoblarga ko'ra, usul shubhasiz yaxshi, lekin har doimgidek va hayratlanarli emas, taraqqiyotning abadiy tormozi bilan bog'liq muammolar paydo bo'ladi, IE brauzeri, tekshirilgan psevdo-sinf faqat 9 va undan yuqori zamonaviy versiyalar tomonidan qo'llab-quvvatlanadi. brauzer. IE ning eski versiyalari uchun hamma narsa bir xil bo'lib qoladi, siz javascriptdan foydalanishingiz kerak bo'ladi.
Yashirin belgilash katakchalaridan foydalanib, uslubli bloklar, slayderlar, galereyalar va boshqa ko'p narsalarni osongina amalga oshirishingiz mumkin.
Hurmat bilan, Endryu
