封装js原生插件dialog，不用prototype

阅读：评论：0

自己写的，虽说也是面向对象，但是没有用到原型，方法和属性全部挂在对象上面……

大概思路：

1.打好一个底层的样子，默认的样式，静态页面写一下

<style>*{margin: 0;padding: 0;}.dialog{position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 300px;height: 200px;background-color: burlywood}.dialog-head{height: 50px;background-color: brown;}.dialog-content{height: 80px;background-color: chocolate;padding: 10px;}.dialog-foot{height: 50px;background-color: cornflowerblue}.dialog-foot span{float: right;line-height: 30px;margin-right: 20px;background-color: black;color: bisque;display:block;height: 30px;margin-top: 5px;padding: 5px;}</style>
</head>
<body><div class="dialog"><div class="dialog-head">提示：弹框标题</div><div class="dialog-content">你确定要怎么怎么样嘛？</div><div class="dialog-foot"><span>取消</span><span>确定</span></div></div>
</body>

2.设置默认的参数，初始化要做什么，定义好

如果已经存在这个dom了，就不创建，只进行显影操作

第一次实例化就创建

extend：挂载参数

bindData：绑定参数（这步可以写在create里面也行）

bindEvent：绑定事件

init:function(opt){this.option={title:"我的妈啊",content:"这是我的初始化内容部分",okbtn:{html:"我的确定按钮",fn:function(){alert("确定？？")}},cancelbtn:{html:"这是我的取消按钮",fn:function(){// ????}}}if(this.box){this.show()}ate()}d(opt)this.bindData()this.bindEvent()}

create:function(){this.box&#ateElement("div")this.box.style.border="1px solid red"this.dialogHead&#ateElement("div")this.dialogContent&#ateElement("div")this.dialogFoot&#ateElement("div")this.okbtn&#ateElement("span")this.cancelbtn&#ateElement("span")this.box.className="dialog"this.dialogHead.className="dialog-head"this.dialogContent.className="dialog-content"this.dialogFoot.className="dialog-foot"this.dialogHead.innerHTML="我是头部"this.dialogContent.innerHTML="我是身体"this.okbtn.innerHTML="确定"this.cancelbtn.innerHTML="取消"this.dialogFoot.appendChild(this.cancelbtn)this.dialogFoot.appendChild(this.okbtn)this.box.appendChild(this.dialogHead)this.box.appendChild(this.dialogContent)this.box.appendChild(this.dialogFoot)document.body.appendChild(this.box)}

4.绑定参数，绑定事件

（我这里加了框子可拖拽效果）

extend:function(opt){for(var i in opt){this.option[i]=opt[i]}},bindData:function(){this.dialogHead.innerHTML=this.option.titlethis.dialogContent.innerHTML=t},bindEvent:function(){var that=lick=this.option.okbtn.lick=function(){that.hide()}usedown=function(e){var evt=window.event||evar startx=evt.pageXvar starty=evt.pageYvar left=parseInt(getComputedStyle(that.box)["left"])var top=parseInt(getComputedStyle(that.box)["top"])usemove=function(e){var evt=window.event||evar x=evt.pageX-startxvar y=evt.pageY-startythat.box.style.left=left+x+"px"that.p=top+y+"px"}useup=function(){usemove=""}}},hide:function(){this.box.style.display="none"},show:function(){this.box.style.display="block"}

5.实例化

上面这是简陋版本的，下面这个是精修版，需要的可以看看~

github：

本文发布于:2024-01-31 19:22:19，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170670013930784.html

上一篇：十四周

下一篇：用table和div元素实现简单的布局

标签：插件 js prototype dialog

留言与评论（共有 0 条评论）