Maison >interface Web >tutoriel CSS >Exemple de partage de code pour la zone de sélection de simulation div
Exemple de partage de code pour la zone de sélection de simulation div
- 黄舟original
- 2017-09-17 09:58:221910parcourir
Je ne suis pas très doué pour résumer les choses qui se sont déroulées très tôt, alors j'ai soudain eu l'impression de les avoir toutes enregistrées. La petite démo est également relativement simple. Les discussions et les corrections sont les bienvenues.
La zone de sélection du projet de conception d'interface utilisateur précédent ne voulait pas du style par défaut. Il était trop fastidieux de modifier le style par défaut, et certains ne pouvaient pas être modifiés, j'ai donc simplement écrit une zone de sélection simulée en p pour. voyez d'abord l'effet :
Il n'y a pas beaucoup d'implémentations de code, et elles sont très simples. La partie js est purement originale, elle peut donc être utilisée sans référencer d'autres frameworks :
D'abord la partie HTML :
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>p模拟select选择框</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/customSelect.css" rel="stylesheet" />
</head>
<body>
<p class="custom-select-box">
<p class="select-box mui-inline" style="width: 220px;">
<span id="fisrt" data-show="0">1</span>
<ul class="custom-option-box">
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</p>
</p>
<script src="js/customSelect.js"></script>
</body></html>partie css :
ul,li,p,span{
box-sizing: border-box;
}.select-box ul,
.select-box li {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
background: #fff;
}.select-box {
width: 100%;
position: relative;
background: #fff;
}#fisrt {
display: block;
line-height: 40px;
width: 100%;
height: 40px;
padding: 0 15px;
padding-right: 20px;
border: 1px solid #ccc;
border-radius: 3px; /*white-space: nowrap;*/
overflow: hidden;
cursor: pointer;
}#fisrt.active {
border: 1px solid #F2C051;
}#fisrt::after {
content: "";
display: block;
position: absolute;
top: 18px;
right: 10px;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #000;
background: #fff;
}.custom-option-box {
display: none;
position: absolute;
left: 0;
top: 40px;
background: #fff;
border: 1px solid #ccc;
border-top-color: transparent;
z-index: 10000;
}.custom-option-box li {
display: block;
line-height: 30px;
padding: 0 15px;
z-index: 10000;
}.custom-option-box li:hover,
.custom-option-box li.active {
background: #F2C051;
}.custom-option-box span {
cursor: pointer;
}partie js : (la partie js est un un peu brouillon, mettez-le en ligne maintenant et je le réviserai dans les deux prochains jours)
(function() {
ready(function() {
var option_box = document.getElementsByClassName("custom-option-box")[0],
select_box = document.getElementsByClassName("select-box")[0],
width;
option_box.style.display = "none"; //初始ul隐藏
width = select_box.offsetWidth; //select的宽度 默认 100%
option_box.style.width = width + "px"; //初始ul宽度
document.getElementById("fisrt").addEventListener("click", function() {
var isShow = this.dataset.show;
if(isShow == 0) {
this.dataset.show = 1;
this.classList.add("active");
this.nextElementSibling.style.display = "block"; //找到ul.son_ul显示
} else {
this.dataset.show = 0;
this.classList.remove("active");
this.nextElementSibling.style.display = "none"; //找到ul.son_ul显示
}
},false);
var option = option_box.getElementsByTagName("li");
for(var i = 0; i < option.length; i++){
option[i].onclick = function(){
var fisrt = this.parentNode.previousElementSibling;
var siblings = getSiblings(this);
fisrt.innerHTML = this.childNodes[0].innerText;
fisrt.dataset.val = this.dataset.val;
this.classList.add("active");
for(var i = 0;i<siblings.length;i++){
siblings[i].classList.remove("active");
} this.parentNode.style.display = "none";
fisrt.dataset.show = 0;
fisrt.classList.remove("active");
}
}
});
function ready (fn) {
if(document.addEventListener){ //标准浏览器
document.addEventListener('DOMContentLoaded',function(){ //注销时间，避免重复触发
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
fn();
//运行函数
},false);
}else if(document.attachEvent){ //IE浏览器
document.attachEvent('onreadystatechange',function(){
if(document.readyState=='complete'){
document.detachEvent('onreadystatechange',arguments.callee);
fn();
//函数运行
}
});
}
}
function getSiblings (elm) {
var a = [];
var p = elm.parentNode.children;
for(var i = 0, pl = p.length; i < pl; i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}
})();
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!