உள்ளடக்கத்தை மறைப்பதற்கும் வெளிப்படுத்துவதற்கும் மிகவும்/குறைவாக படிக்கும் பட்டனை மிக எளிதாக உருவாக்க ஒரு சொந்த HTML5 தீர்வு உள்ளது என்பது உங்களுக்குத் தெரியுமா? ஜாவாஸ்கிரிப்ட் அல்லது CSS இல்லை. எப்படி என்பதை அறிய தொடர்ந்து படியுங்கள்.
தி மற்றும் HTML5 குறிச்சொற்கள் அதிகாரப்பூர்வமாக a வெளிப்படுத்தல் விட்ஜெட் உறுப்பு, ஆனால் உடன் ஜோடியாக HTML5 குறிச்சொற்கள் உங்களுக்கு ஒரு தூய HTML-மட்டும் துருத்தி.
பொருள் JS அல்லது CSS இல்லை தேவைப்படுகிறது. அது எவ்வளவு குளிர்மையானது!
ஒரு எளிய உறுப்பைக் காட்டும் உதாரணம் இங்கே உள்ளது மற்றும் .
இங்கே குறியீடு:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>அது எப்படி இருக்கும் என்பது இங்கே:
மேலும் படிக்க
உள்ளடக்கத்தை மறைக்க மற்றும் வெளிப்படுத்த இது ஒரு சொந்த HTML5 துருத்தி ஆகும். மிகவும் அருமை, சரியா?
இது எப்படி வேலை செய்கிறது? தி டேக் திறக்க அல்லது மூடக்கூடிய ஒரு உறுப்புக்கான ரேப்பராக செயல்படுகிறது. பயனர் லேபிளைக் கிளிக் செய்ய வேண்டும் உறுப்பைத் திறக்க அல்லது மூட குறிச்சொல்.
ஸ்டைலிங் மற்றும் நடத்தை பற்றி என்ன?
பாங்குகள்
வெளிப்படுத்தும் உரைப் பெட்டியின் தோற்றத்தைத் தனிப்பயனாக்க, 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 பாணிகளை ஒதுக்குகிறது. |
எனவே வரம்புகள் என்ன? எப்போதும் ஒரு பிடிப்பு இருக்கிறது, இல்லையா?
இன்டர்நெட் எக்ஸ்ப்ளோரருக்கு ஆதரவு இல்லை
இன்டர்நெட் எக்ஸ்ப்ளோரரின் எந்தப் பதிப்பிலும் இந்த HTML5-மட்டும் துருத்தி வேலை செய்யாது. நீங்கள் IE11 ஐ ஆதரிக்க வேண்டும் என்றால், நீங்கள் JQuery ஐப் பயன்படுத்தி வேறு ஃபால்பேக் தீர்வைப் பயன்படுத்த வேண்டும். மற்ற எல்லா உலாவிகளும் ஆதரிக்கின்றன மற்றும் .
தனிப்பயனாக்கப்பட்ட அனிமேஷன்கள் அல்லது மாற்றங்கள் இல்லை
நீங்கள் தோற்றத்தை மாற்றியமைத்து ஸ்டைல் செய்ய முடியும் (மேலே காட்டப்பட்டுள்ளபடி), எந்த உரையையும் வெளிப்படுத்தும் அனிமேஷன்கள் அல்லது மாற்றங்களை உங்களால் செய்ய முடியாது. நீங்கள் அதை செய்ய விரும்பினால், உங்களுக்கு மற்றொரு CSS/JSS துருத்தி தீர்வு தேவைப்படும்.
ஸ்கிரீன் ரீடர்கள் மற்றும் அணுகல்தன்மை
இது பூர்வீகம் HTML5 மற்றும் அது *அணுகக்கூடியதாக இருக்க வேண்டும்* ஆனால் உண்மையான வெளிப்படுத்தப்பட்ட உரை எப்போதும் ஸ்க்ரீன் ரீடரால் சரியாக அறிவிக்கப்படுவதில்லை என்பது கண்டறியப்பட்டது.
குறிப்புகள்: