1.组件结构
2.页面调用
面向对象权限配置组件
3.组件封装：
UserRoleSelector.css
html,body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: Airal,'microsoft yahei'; background-color: #b1b1b1; -moz-user-select: none;/*火狐*/ -webkit-user-select: none;/*webkit浏览器*/ -ms-user-select: none;/*IE10*/ -khtml-user-select: none;/*早期浏览器*/ user-select: none; overflow: hidden;}ul,li{ list-style: none; margin: 0; padding: 0;}.mask{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.5);}.user-role-selector{ position: absolute; top: 50%; left: 50%; margin-left: -290px; margin-top: -250px; background-color: #fff; border-radius: 2px;/*边角半径*/ padding: 50px 20px; width: 540px; height: 400px;}.user-role-selector .data-list{ width: 40%; height: 90%; background-color: #fafafa; border: 1px solid #e5e5e5; float: left;}.user-role-selector .data-list li{ width: 100%; height: 36px; line-height: 36px; text-indent: 10px; color: #666; font-size: 14px; cursor: pointer;}.user-role-selector .data-list li:hover{ background-color: #039ae3; color: #fff;}.user-role-selector .data-list li.selected{ background-color: #666; color: #fff;}.user-role-selector .data-oper{ width: 18%; height: 100%; float: left; padding-top: 25%;}.user-role-selector .data-oper .button{ margin: 20px auto; text-align: center;}.user-role-selector .button{ width: 80px; height: 36px; display: block; border: 1px solid #d9d9d9; line-height: 36px; text-decoration: none; color: #333; background: #f3f3f3; font-size: 14px;}.user-role-selector .button:hover{ background-color: #039ae3; color: #fff;}.user-role-selector .data-bar{ position: absolute; bottom: 20px; left: 0; width: 100%; height: 10%;}.user-role-selector .data-bar .button{ float: right; text-align: center; margin-right: 25px;}.user-role-selector .data-bar .button.close{ background-color: #e84c4c; color: #fff;}
UserRoleSelector.js
// 创建闭包 避免变量污染(全局污染)var UserRoleSelector = (function(){ /** * 1.构建 构造器函数 * 一般首字母大写 */ // 2.定义UserRoleSelector类型构造器 function UserRoleSelector(options) { // 3.用户传入的参数 // this.options = options||{}; // 4.为了避免用户不传入options对象造成的NullPointer(空指针异常) this.init(options||{}); // 5.初始化操作 // this.render(); // 9.生成(渲染)dom结构 this.bind(); // 绑定插件中dom需要的所有事件 } // 11.将要被渲染的dom结构 var html = ' ' + ' ' + // ' - 系统管理员
' + // ' - 部门经理
' + // ' - 部门组管
' + // ' - 销售经理
' + // ' - 财务会计
' + // ' - 财务出纳
' + '
' + ' ' + '
' + ' ' + ' '; // 6.扩展UserRoleSelector类型实例的功能 UserRoleSelector.prototype = { init:function(options) { // 7.初始化操作 this.options = options; // 8.初始化参数 this.dom = document.createElement("div");// 12.创建元素 this.dom.className = "mask"; this.dom.style.display = this.options.show?"block":"none"; // 由用户决定元素是否显示 this.dom.innerHTML = html; this.status = this.options.show?1:0; // 0代表隐藏 1代表显示 document.body.appendChild(this.dom); // 13.将dom插入到新创建的div元素中 // 27.找到左右列表 便于接受index.html传入数据列表参数 this.left = this.dom.querySelector(".left-list.data-list"); this.right = this.dom.querySelector(".right-list.data-list"); // 32.add、del按钮 this.add = this.dom.querySelector(".button.add"); // 寻找add按钮 this.del = this.dom.querySelector(".button.del"); // 寻找del按钮 // 18.save、close按钮 this.save = this.dom.querySelector(".button.save"); // 寻找save按钮 // console.log(this.save); this.close = this.dom.querySelector(".button.close"); // 寻找close按钮 // 28.循环输出列表数据 var data = this.options.data||[]; for(var i=0;i "+data[i].text+""; } this.items = this.left.querySelectorAll("li");// 29.找到所有的li // console.log(this.items.length); }, // render:function() { // 10.渲染dom // this.dom.innerHTML = html; // }, bind:function() { // 16.绑定插件中dom需要的所有事件 var _this = this; // 21.此处this为UserRoleSelector组件本身,将组件的引用保存在局部变量_this中 if(this.options.onSave){ // 23.保存方法 判断用户是否传参 // this.save.onclick = function() { // 24.方法一：外层包一个function 便于改变this的引用 及 接收参数 // _this.options.onSave.call(_this); // 25.call方法 起到函数调用过程中改变this的引用,将作用域改为this(此处指向UserRoleSelector组件本身) // } this.save.onclick = _this.options.onSave.bind(_this); // 26.方法二：调用bind方法,直接参入_this,调用onclick方法,返回的是个函数 起到函数调用过程中,_this对象指向this } // 17.找到当前dom对象中的按钮 写在init方法中 this.close.onclick = function() { // 19.定义close按钮的绑定事件 // this.hide(); // 隐藏组件 _this.hide(); // 22.隐藏组件 使用局部变量_this替换this,使得指向为UserRoleSelector组件 // 20.注意：因为函数的作用域问题,当函数被调用过程中,this指向函数本身,此处为close对象,而我们想指向UserRoleSelector组件,所有需要配置this }; // this.add.onclick = function(){ // // 33.拿到left下面所有被选中的item(.selected) // var selecteds = _this.left.querySelectorAll("li.selected"); // // 34.往right里面append // for(var i=0;i .