js组件

最近学习了一下js组件相关知识，但找到的资料比较少，一知半解，先做个简单的笔记吧。

首先定义一个类，可以在里面添加方法：

//这是个下拉框组件，放在select.js里

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;
　　}
};

 

然后就可以在前端页面直接调用这个方法：

<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，共同进步吧，少年。

posted @ 2019-09-09 20:54  TenFly  阅读(1523)  评论(0)  编辑  收藏  举报