အကြောင်းအရာကို ဖုံးကွယ်ပြီး ထုတ်ဖော်ပြသရန် အကော်ဒီယံဖတ်ရန် ပို/နည်း ခလုတ်ကို အလွန်လွယ်ကူစွာ ဖန်တီးရန် မူရင်း HTML5 ဖြေရှင်းချက် ရှိသည်ကို သင်သိပါသလား။ JavaScript သို့မဟုတ် CSS မရှိပါ။. လုပ်နည်းကို သိရှိရန် ဆက်ဖတ်ပါ။
အဆိုပါ နှင့် HTML5 tags များသည် တရားဝင် a ထုတ်ဖော်ဝစ်ဂျက်ဒြပ်စင်ဒါပေမယ့် တွဲဖက် HTML5 tags က သင့်ကို ပေးပါလိမ့်မယ်။ 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 သည် အဖွင့် သို့မဟုတ် ပိတ်နိုင်သော ဒြပ်စင်တစ်ခုအတွက် ထုပ်ပိုးမှုတစ်ခုအဖြစ် လုပ်ဆောင်သည်။ အသုံးပြုသူသည် အဆိုပါတံဆိပ်ကိုနှိပ်ရပါမည်။ ဒြပ်စင်ကိုဖွင့်ရန် သို့မဟုတ် ပိတ်ရန် tag ။
စတိုင်လ်ကျကျနဲ့ အပြုအမူကရော ဘယ်လိုလဲ။
စတိုင်များ
Reveal text box ၏အသွင်အပြင်ကို စိတ်ကြိုက်ပြင်ဆင်ရန် CSS စတိုင်လ်ကို သင်အသုံးပြုနိုင်သည်။ အောက်တွင်ဖော်ပြထားသောအချက်သည် tabbed interface စတိုင်ကိုပေးသည်-
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;
}ပုံမှန်အားဖြင့်၊ cursor သည် မြှားတစ်ခုကဲ့သို့ ပေါ်လာသော်လည်း ၎င်းကို a ဖြစ်လိုပါက ညွှန်ပြသောလက် အဲဒီ့အစား ဒါကိုသုံးပါ။
details {
cursor: pointer;
}အပြုအမူ
အမူအကျင့်များကို သတ်မှတ်ခြင်းသည် အလွန်အကန့်အသတ်ရှိပြီး သင်လုပ်နိုင်သည့်အရာတစ်ခုသာရှိပြီး ၎င်းမှာ ထင်ရှားသောစာသားကို ပြုလုပ်ရန်ဖြစ်သည်။ မူရင်းအတိုင်းဖွင့်ပါ။.
အကော်ဒီယံကို ၎င်း၏ပွင့်လင်းအခြေအနေတွင် စတင်ရန် Boolean ကိုထည့်ပါ။ ဖွင့်လှစ် ရည်ညွှန်းချက် tag:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>ဆက်ဖတ်ရန်
၎င်းသည် အကြောင်းအရာကို ဖုံးကွယ်ရန်နှင့် ဖော်ထုတ်ရန် မူရင်း HTML5 ကော်ဒီယံဖြစ်သည်။ တော်တော်မိုက်တယ်ဟုတ်လား။
ဘယ်လို ဂုဏ်ပုဒ်တွေကို သုံးလို့ရလဲ။
အောက်ပါ attribute များကို အသုံးပြုနိုင်ပါသည်။ tag:
| attribute | အဘိုး | အကျဉ်းချုပ် |
|---|---|---|
| ဖွင့်လှစ် | ဖွင့်လှစ် | ပုံမှန်ဖြစ်သည် မဖွင့်ဘူး. |
| id | အဘိုး | ထူးခြားသော ခွဲခြားသတ်မှတ်မှုကို ပေးသည်။ |
| အတန်းအစား | အတန်းအမည်များ | အတန်းအမည်များကို အစိတ်အပိုင်းသို့ သတ်မှတ်ပေးသည်။ |
| စတိုင် | CSS-တန်ဖိုးများ | CSS စတိုင်များကို ဒြပ်စင်သို့ သတ်မှတ်ပေးသည်။ |
ဒါဆို ကန့်သတ်ချက်တွေက ဘာတွေလဲ။ ဖမ်းတယ်ဆိုတာ အမြဲရှိတယ် မဟုတ်လား။
Internet Explorer အတွက် ပံ့ပိုးမှု မရှိပါ။
ဤ HTML5 သီးသန့် ကော်ဒီယံသည် Internet Explorer ၏ မည်သည့်ဗားရှင်းတွင်မဆို အလုပ်မလုပ်ပါ။ ၎င်းကို IE11 ပံ့ပိုးမှုရှိရန် လိုအပ်ပါက၊ သင်သည် JQuery ကို အသုံးပြု၍ မတူညီသော တုံ့ပြန်ဖြေရှင်းချက်တစ်ခုကို အသုံးပြုရမည်ဖြစ်ပါသည်။ အခြားဘရောက်ဆာများအားလုံး ပံ့ပိုးပေးသည်။ နှင့် .
စိတ်ကြိုက်ကာတွန်းများ သို့မဟုတ် အသွင်ကူးပြောင်းမှုများ မရှိပါ။
အသွင်အပြင်ကို မွမ်းမံပြီး ပုံစံသွင်းနိုင်သော်လည်း (အထက်တွင်ပြထားသည့်အတိုင်း) ကာတွန်း သို့မဟုတ် အသွင်ကူးပြောင်းမှုများကို ဖော်ပြသည့် မည်သည့်စာသားကိုမျှ သင်လုပ်ဆောင်နိုင်မည်မဟုတ်ပေ။ ထိုသို့ပြုလုပ်လိုပါက အခြား CSS/JSS accordion ဖြေရှင်းချက် လိုအပ်ပါသည်။
မျက်နှာပြင်စာဖတ်သူများနှင့် သုံးစွဲနိုင်မှု
ဒါကဇာတိ HTML5 ၎င်းသည် *သုံးစွဲနိုင်သင့်သည်* ဖြစ်သင့်သော်လည်း အမှန်တကယ် ထုတ်ဖော်ထားသည့် စာသားကို ဖန်သားပြင်ဖတ်သူမှ အမြဲမှန်ကန်စွာ မကြေငြာကြောင်း တွေ့ရှိရပါသည်။
ကိုးကား:
