一个简单的弹出框组件

Posted 2020-11-04 微宇宙

　　个人写这个弹出框的原因就一个，就是能给我带来可复用，追求新，要简单，可扩展。要达到炫酷有点难度，分析后还是决定以功能为主，因为是用jq和animation实现的弹出框组件，所以看起来难度不大，简称co-dialog。

　　灵感来源，因为工作中用到dialog，发现UI设计的弹出框的风格一直在变化，于是每次都要重新写一个弹出框，无意中增加了无用的工作量，所以果断就封装成一个弹出框组件，目前的锥形仅支持PC，然后又加入了CSS3动画效果，如果要引入动画效果就需要高版本的Browser才能使用，期望你能一起加入参与改进！+1

　　目前支持一个CSS3动画组件的功能，当然在co-dialog也能调用动画方法coani，调用方式和.use()或.app()方法一样，加入动画.coani()方法，具体动画api参考co-ani文档。

　　这个弹出框使用起来很简单，只要实例一次对象，就可以调用api。

var codialog = new codialog();

　　现在我们可以使用对象(codialog)，调用一个方法(app)，只需要传入一个节点(.class)或(#id)名，类型为字符串格式。

codialog.app(‘.open-success‘)

　　之后我们继续接下来的方法(use)调用，使用弹出框的方法传入一个对象，对象的格式是keys and value形式，功能主要围绕弹出框的基础布局设置以及布局属性和样式、数据的填充、公用方法的事件处理。基础布局的设置有哪些属性？(边距的默认值之后改过)

　　如下：

　　

　　dialogWidth

弹出框的整体宽度

　　default: 558
　　options: integer

　　dialogHeight

弹出框的整体高度

　　default: 300
　　options: integer

　　headerMargin

标题的外边距设置

　　default: 10 || { horizontal: 0, vertical: 0} || { horizontal: ‘10px 10px‘, vertical: ‘10px 10px‘ }
　　options: integer || { horizontal: integer, vertical: integer } || { horizontal: string, vertical: string }

　　bodyMargin

容器的内容外边距(其实内部封装的时候设置为内边距)

　　default: 10 || { horizontal: 0, vertical: 0} || { horizontal: ‘10px 10px‘, vertical: ‘10px 10px‘ }
　　options: integer || { horizontal: integer, vertical: integer } || { horizontal: string, vertical: string }

　　footerMargin

底部的内容外边距(同上)

　　default: 10 || { horizontal: 0, vertical: 0} || { horizontal: ‘10px 10px‘, vertical: ‘10px 10px‘ }
　　options: integer || { horizontal: integer, vertical: integer } || { horizontal: string, vertical: string }

　　以上都是在methods方法之前调用的属性，也就是说给弹出框设置的这些属性都会直接被使用，如果你发现还有更好的方案，可以去git上直接讨论，如果提的建议nice那么必会采纳。我更佳喜欢人性化，自由开放的发言。
　　
　　下面是数据的填充：

　　title

标题的内容填充

　　default: ‘‘
　　options: string

　　message

容器的内容填充

　　default: ‘‘
　　options: string

　　footerText

底部内容的填充(可以和按钮共存)

　　default: [‘‘,...]
　　options: array ([string, string])

　　以上都是填充弹出框的自定义内容，其中底部的文本填充需要注意，这个(footerText)的值是写在数组里面的一组字符串。如果以上填充内容的写法，我们甚至还可以在methos方法里面使用this操作内容填充。

methods: function (nodes) {
     this.title = ‘协议已开通‘;
     this.message = ‘<a href>赶快充值吧！</a>‘;
},

　　接下来，我们还需要在methods公用方法之前处理一些api的调用，比如onHeaderBefore、onBodyBefore、onFooterBefore的函数方法的执行，在这里我们可以做哪些操作？我们仅仅在此出设置布局的样式，为啥要在这里，因为这里设置的方法能实现自适应的布局居中的功能。

下面是布局居中、属性和样式的方法：

　　onHeaderBefore

设置头部的节点元素的attribute和style

　　default: callback
　　options: function

　　onBodyBefore

设置容器的节点元素的attribute和style

　　default: callback
　　options: function

　　onFooterBefore

设置底部的节点元素的attribute和style

　　default: callback
　　options: function

　接下里的公用的方法的设置和调用，帮助我们实现更加人性化的操作，避免我们的业务需求，减少考虑的事件处理，比如关闭的事件(isClose)，还有多级的按钮的作用(footerButtonCount)。

　　footerButtonCount

底部按钮的个数(如果设置0，就会remove移除按钮块，最多有2个按钮)

　　default: 1
　　options: integer(0 / 1 / 2)

　　isClose

关闭的按钮事件，默认位true，点击右侧关闭按钮就会隐藏弹出框，反之同理。

　　default: true
　　options: boolean(true / false)

　　如果你看了之后，还有其他更好的想法，请直接砸过来，我刚刚度娘了一下今天的日子，原来今天是汶川大地震，为同胞祈福。

　　每天打坐大久了，大佬轻点砸。
　　以上就是这个弹出框插件(co-dialog)的所有功能，看效果和code直接进。