იცოდით, რომ არსებობს HTML5 გადაწყვეტა, რომლის საშუალებითაც მარტივად შეგიძლიათ შექმნათ აკორდეონის წაკითხვის მეტი/ნაკლების ღილაკი კონტენტის დამალვისა და გამოვლენისთვის. არა JavaScript ან CSS. წაიკითხეთ იმის გასარკვევად, თუ როგორ.
ის მდე HTML5 ტეგები ოფიციალურად არის ა გამჟღავნების ვიჯეტის ელემენტი, მაგრამ დაწყვილებული HTML5 ტეგები მოგცემთ ა სუფთა HTML-მხოლოდ აკორდეონი.
რაც იმას ნიშნავს, არა JS ან CSS საჭიროა. Რამდენად მაგარია!
აქ არის მაგალითი, რომელიც აჩვენებს მარტივ ელემენტს a მდე .
აი კოდი:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>და აი როგორ გამოიყურება:
წაიკითხე მეტი
ეს არის მშობლიური HTML5 აკორდეონი შინაარსის დასამალად და გამოსავლენად. საკმაოდ მაგარია, არა?
როგორ მუშაობს? ის ტეგი ემსახურება როგორც შეფუთვას ელემენტისთვის, რომელიც შეიძლება გაიხსნას ან დაიხუროს. მომხმარებელმა უნდა დააჭიროს ეტიკეტს, რომელიც არის tag ელემენტის გასახსნელად ან დახურვისთვის.
რაც შეეხება სტილს და ქცევას?
Styles
თქვენ შეგიძლიათ გამოიყენოთ CSS სტილი გამოვლენის ტექსტური ყუთის გარეგნობის მოსარგებად. ქვემოთ მოცემულია ჩანართების ინტერფეისის სტილი:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}ნაგულისხმევად, კურსორი გამოჩნდება ისრის სახით, მაგრამ თუ გსურთ, რომ იყოს a საჩვენებელი ხელი ამის ნაცვლად, გამოიყენეთ ეს:
details {
cursor: pointer;
}ქცევა
ქცევის დაყენება ძალიან შეზღუდულია, სინამდვილეში მხოლოდ ერთი რამ შეგიძლიათ გააკეთოთ და ეს არის გამოვლენილი ტექსტის შექმნა ნაგულისხმევად გახსნა.
აკორდეონის ღია მდგომარეობაში დასაწყებად, დაამატეთ ბული გახსნა მიეკუთვნება ტეგა:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>წაიკითხე მეტი
ეს არის მშობლიური HTML5 აკორდეონი შინაარსის დასამალად და გამოსავლენად. საკმაოდ მაგარია, არა?
რა ატრიბუტები შემიძლია გამოვიყენო?
ქვემოთ მოცემული ატრიბუტები შეიძლება გამოყენებულ იქნას ამისთვის ტეგა:
| ატრიბუტი | ღირებულება | შემაჯამებელი |
|---|---|---|
| გახსნა | გახსნა | ნაგულისხმევია არ არის ღია. |
| id | ღირებულება | გთავაზობთ უნიკალურ იდენტიფიკატორს. |
| კლასი | კლასის სახელები | ელემენტს ანიჭებს კლასის სახელებს. |
| სტილი | CSS-მნიშვნელობები | ელემენტს ანიჭებს CSS სტილებს. |
მაშ რა არის შეზღუდვები? ყოველთვის არის დაჭერა, არა?
Internet Explorer-ის მხარდაჭერა არ არის
ეს მხოლოდ HTML5 აკორდეონი არ იმუშავებს Internet Explorer-ის არცერთ ვერსიაში. თუ თქვენ უნდა გქონდეთ IE11-ის მხარდაჭერა, მოგიწევთ გამოიყენოთ სხვა სარეზერვო გადაწყვეტა JQuery-ის გამოყენებით. ყველა სხვა ბრაუზერის მხარდაჭერა მდე .
არ არის მორგებული ანიმაციები ან გადასვლები
მიუხედავად იმისა, რომ თქვენ შეგიძლიათ შეცვალოთ და დაასტირიოთ გარეგნობა (როგორც ზემოთ არის ნაჩვენები), თქვენ ვერ შეძლებთ ტექსტის ანიმაციის ან გადასვლების გამოვლენას. თუ გსურთ ამის გაკეთება, დაგჭირდებათ სხვა CSS/JSS აკორდეონის გადაწყვეტა.
ეკრანის წამკითხველები და ხელმისაწვდომობა
ეს არის მშობლიური HTML5 და ის *უნდა იყოს* ხელმისაწვდომი, მაგრამ აღმოჩნდა, რომ რეალურად გამოვლენილი ტექსტი ყოველთვის არ არის სწორად გამოცხადებული ეკრანის წამკითხველის მიერ.
წყაროები:
