လုပ်နည်း - Filter Elements
၎င်း၏အတန်းအမည်ပေါ်အခြေခံ၍ DIV အစိတ်အပိုင်းတစ်ခုကို စစ်ထုတ်နည်းကို လေ့လာပါ။
DIV ဒြပ်စင်များကို စစ်ထုတ်ပါ။
ဘီအမ်ဒဗလျူ
လိမ္မော်သီး
Volvo
အနီေရာင်
Mustang
အပြာ
ကြောင်
ခွေး
သခွားမသီး
ကီဝီ
ငှက်ပျောသီး
သံပယိုသီး
နွားမ
စစ်ထုတ်နိုင်သော DIV ဒြပ်စင်များကို ဖန်တီးပါ။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<!-- Control buttons -->
<div id="myBtnContainer">
<button
class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('animals')"> Animals</button>
<button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
<button class="btn" onclick="filterSelection('colors')"> Colors</button>
</div>
<!-- The filterable elements. Note that
some have multiple class names (this can be used if they belong to multiple
categories) -->
<div
class="container">
<div
class="filterDiv cars">BMW</div>
<div class="filterDiv colors
fruits">Orange</div>
<div class="filterDiv cars">Volvo</div>
<div class="filterDiv colors">Red</div>
<div class="filterDiv cars
animals">Mustang</div>
<div class="filterDiv colors">Blue</div>
<div class="filterDiv animals">Cat</div>
<div class="filterDiv
animals">Dog</div>
<div class="filterDiv fruits">Melon</div>
<div class="filterDiv fruits animals">Kiwi</div>
<div class="filterDiv
fruits">Banana</div>
<div class="filterDiv fruits">Lemon</div>
<div class="filterDiv animals">Cow</div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
.container {
overflow: hidden;
}
.filterDiv {
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Hidden by default */
}
/* The "show" class is
added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color:
#f1f1f1;
cursor: pointer;
}
/* Add a light grey
background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to
the active button */
.btn.active {
background-color: #666;
color: white;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove
the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i],
"show");
if (x[i].className.indexOf(c) > -1)
w3AddClass(x[i], "show");
}
}
// Show filtered
elements
function w3AddClass(element,
name) {
var i, arr1, arr2;
arr1 = element.className.split("
");
arr2 = name.split(" ");
for (i = 0; i < arr2.length;
i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while
(arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class
to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns =
btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++)
{
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}