最近学习了一下js组件相关知识,但找到的资料比较少,一知半解,先做个简单的笔记吧。
首先定义一个类,可以在里面添加方法:
//这是个下拉框组件,放在select.js里
<script>
var tree = {
treelist: function(mycontent) {
var list='<select class="select">'+
'<option value ="type1">selectone</option>'+
'<option value ="type2">selecttwo</option>'+
'<option value ="type3">selectthree</option>'+
'<option value ="type4">selectfour</option>'+
'<option value ="type5">selectfive</option>'+
'<select>';
document.getelementbyid(mycontent).innerhtml=list;
}
};
</script>
然后就可以在前端页面直接调用这个方法:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js组件</title>
<script src="select.js"></script> //封装起来调用即可
<style>
.select{
line-height: 21px;
width: 100%;
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
background-color: #fff;
}
.select:hover{
background: :blue;
}
.txt{
width: :20%;
float: left;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<p>
<span class="txt">请选择类型</span>
<span style="width:70%;float: right;" id="type"></span>
</p>
</div>
<script>tree.treelist("type");</script> //此处调用
</body>
</html>
实现自动打字效果的组件:https://wenwen.sogou.com/z/q719005033.htm,共同进步吧,少年。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论