最近学习了一下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，共同进步吧，少年。

js组件的更多相关文章

  1. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  2. JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  4. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  5. JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  6. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. 从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  9. JS组件系列——封装自己的JS组件，你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  10. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

随机推荐

  1. 维护中常用的k8s和docker命令

    kubernet命令 查看所有pod的信息: kubectl get pod --all-namespaces -o wide 查看命名为kube-system的pod kubectl get pod ...

  2. 团队第六次作业：Beta版本冲刺成绩汇总

    一.作业题目 团队第六次作业:Beta版本冲刺 二.作业评分标准 博客评分规则(总分100)博客要求 1.冲刺博客每篇占20分.(3次) - (1) 各成员该天完成的工作,以及明天的任务安排(表格的形 ...

  3. 用js怎么来判断我已点击了窗体中“关闭”按钮？

    onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发. 该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面. 对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类 ...

  4. 使用istioctl命令查看gateway及virtualservices

    istioctl命令,比kubectl命令,在查看istio资源方面,要方便很多. 如果使用microk8s安装,则命令为microk8s.istioctl了. 查看gateway及virtualse ...

  5. xshell跳转设置 Xshell代理设置

    本机------->A(中转)------>B(目标服务器) 本机---------XXXXX------>B(目标服务器) 本机无法直接连接B服务器 第一步:本机连接中转服务器A, ...

  6. ESA2GJK1DH1K基础篇: Android连接MQTT简单的Demo

    题外话 我老爸也问我物联网发展的趋势是什么!!!!!! 我自己感觉的:(正在朝着 "我,机器人" 这部电影的服务器方向发展) 以后的设备都会和服务器交互,就是说本地不再做处理,全部 ...

  7. 剑指offer15 二进制中1的个数

    题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如,把9表示成二进制是1001,有2位是1.因此,如果输入9则函数输出2. int Number(int n) { ; while ...

  8. 剑指offer 面试题8：二叉树的下一个节点

    题目:给定一棵二叉树和其中一个节点,如何找出中序遍历序列的下一个节点?树中的节点除了有两个分别指向左.右节点的指针,还有一个节点指向父节点的指针. 中序遍历序列是{d,b,h,e,i,a,f,c,g} ...

  9. 为什么mysql事务回滚后，自增ID依然自增

    因为innodb的auto_increament的计数器记录的当前值是保存在存内 存中的,并不是存在于磁盘上,当mysqlserver处于运行的时候,这个计数值只会随着insert改增长,不会随着de ...

  10. Apache的安装部署 2（加密认证 ，网页重写 ，搭建论坛）

    一.http和https的基本理论知识1. 关于https: HTTPS(全称:Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道 ...