လုပ်နည်း - ပိတ်နိုင်သော စာရင်းပါ ပစ္စည်းများ
JavaScript ဖြင့် စာရင်းဖိုင်များကို ပိတ်နည်းကို လေ့လာပါ။
ပိတ်နိုင်သော ပစ္စည်းများစာရင်း
၎င်းကိုပိတ်ရန်/ဝှက်ရန် စာရင်း၏ညာဘက်ရှိ "x" သင်္ကေတကို နှိပ်ပါ။
ပိတ်နိုင်သောစာရင်းအရာများကိုဖန်တီးနည်း
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<ul>
<li>Adele</li>
<li>Agnes<span
class="close">x</span></li>
<li>Billy<span
class="close">x</span></li>
<li>Bob<span class="close">x</span></li>
<li>Calvin<span class="close">x</span></li>
<li>Christina<span class="close">x</span></li>
<li>Cindy</li>
</ul>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
* {
box-sizing: border-box;
}
/* Style the list (remove
margins and bullets, etc) */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the list items */
ul
li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent
double borders */
background-color: #f6f6f6;
padding:
12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
position: relative;
}
/* Add a light grey background color on hover */
ul li:hover {
background-color: #eee;
}
/* Style the close button (span) */
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: #bbb;}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
/* Get all elements with class="close" */
var closebtns =
document.getElementsByClassName("close");
var i;
/* Loop through the
elements, and hide the parent, when clicked on */
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click",
function() {
this.parentElement.style.display = 'none';
});
}