checkbox模拟 select模拟

最新推荐文章于 2022-07-08 14:50:14 发布

tutuzhu

最新推荐文章于 2022-07-08 14:50:14 发布

阅读量154

点赞数

分类专栏： js 文章标签： html

本文链接：https://blog.csdn.net/tutuzhu/article/details/84228093

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0px; padding:0px; }
#checkboxmn{ display:block; height:100px; width:100px; cursor:pointer; background:#ccc;}
#checkboxmn.libag{ background:blue;}
#checkboxmn2{ display:block; height:100px; width:100px; cursor:pointer; background:#ccc;}
#checkboxmn2.libag{ background:blue;}
</style>
</head>
<script>
function mnCheckbox(obj){
var myself=this;
this.mnId= document.getElementById(obj.mnId);
this.checkboxId=document.getElementById(obj.checkboxId);
this.hotClass=obj.hotClass||"";
this.init();
}
mnCheckbox.prototype={
init:function(){
this.mnInit();
},
mnInit:function(){
var me=this;
this.mnId.οnclick=function(){
if(this.className.replace(" ","")==me.hotClass){
this.className="";
me.checkboxId.checked=false;
}
else{
this.className=me.hotClass;
me.checkboxId.checked=true;
}
}
}
}
</script>
<body>
<span class=" " id="checkboxmn"></span>
<input type="checkbox" id="checkboxmnt"/>
</body>
<script>
var user=new mnCheckbox({mnId:"checkboxmn",checkboxId:"checkboxmnt",hotClass:"libag"});
</script>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0px; padding:0px; }
.mnsel { position:relative; width:150px; float:left; }
.mnsel span { display:block; width:150px; height:20px; background:#cccccc; cursor:pointer; }
.mnsel ul li { height:20px; line-height:20px; border:1px solid #999999; border-top:0px; cursor:pointer; }
.libag { background:#939; }
</style>
</head>
<script>
function mnSelect(obj){
var myself=this;
this.spanObj= document.getElementById(obj.spanId);
this.ulObj=document.getElementById(obj.ulId);
this.inputObj=document.getElementById(obj.inputId);
this.speed=obj.speed||0;
this.hoverClass=obj.hoverClass||"";
this.init();
}
mnSelect.prototype={
init:function(){
if(this.ulObj.childNodes.length>0){
this.liInit();
this.spanInit();
this.ulObj.childNodes[0].onclick();}
},
liInit:function(){
var me=this;
for(var a=0;a<this.ulObj.childNodes.length;a++)
{
with(this.ulObj.childNodes[a]){
οnclick=function(){
me.spanObj.innerHTML=me.inputObj.value=this.innerHTML;
me.ulObj.style.display="none";
}
οnmοuseοver=function(){
this.className=me.hoverClass;
}
οnmοuseοut=function(){
this.className="";
}
}
}
},
spanInit:function(){
var me=this;
this.spanObj.οnclick=function(){
if(me.ulObj.style.display=="none"){me.ulObj.style.display="block"}
else{me.ulObj.style.display="none";}
}
}
}

</script>
<body>
<div class="mnsel"> <span id="mnsel2"></span>
<ul id="ulid2" style="display:none;">
<li class="xxx">23enllish</li>
</ul>
</div>
<form>
<input type="hidden" id="ycsel2" value="wo"/>
</form>
</body>
<script>
var user=new mnSelect({spanId:"mnsel2",ulId:"ulid2",inputId:"ycsel2",speed:300,hoverClass:"libag"});
</script>
</html>

tutuzhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox模拟 select模拟

* { margin:0px; padding:0px; }#checkboxmn{ display:block; height:100px; width:100px; cursor:pointer; background:#ccc;}#checkboxmn.libag{ background:blue;}#checkboxmn2{ display:block; h...
复制链接

扫一扫