• 一个简单的弹出框组件


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

    演示效果DEMO

    灵感来源,因为工作中用到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)调用,使用弹出框的方法传入一个对象,对象的格式是keysandvalue形式,功能主要围绕弹出框的基础布局设置以及布局属性和样式、数据的填充、公用方法的事件处理。基础布局的设置有哪些属性?(边距的默认值之后改过)

    // 弹出框
    codialog.use({
        ... configure options
    })
    // 如何显示弹出框
    codialog.app('div.selector').show() 
    or 
    codialog.show('div.selector')
    
    // 使用动画的方式也很简单
    codialog.coani('.selector').bounch().stop();
    codialog.coani.render();

    如下:

    dialogWidth
    弹出框的整体宽度

    default:558
    options:integer

    dialogHeight
    弹出框的整体高度

    default:300
    options:integer

    headerMargin
    标题的外边距设置

    default:10||{horizontal:0,vertical:0}||{horizontal:'10px10px',vertical:'10px10px'}
    options:integer||{horizontal:integer,vertical:integer}||{horizontal:string,vertical:string}

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

    default:10||{horizontal:0,vertical:0}||{horizontal:'10px10px',vertical:'10px10px'}
    options:integer||{horizontal:integer,vertical:integer}||{horizontal:string,vertical:string}

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

    default:10||{horizontal:0,vertical:0}||{horizontal:'10px10px',vertical:'10px10px'}
    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='<ahref>赶快充值吧!</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直接进(co-dialog)。

  • 相关阅读:
    CCF NOI1006 捡石头
    POJ NOI MATH-7648 蓄水池水管问题
    CCF NOI1005 存款收益
    CCF NOI1004 填充矩形
    CCF NOI1003 猜数游戏
    CCF NOI1002 三角形
    Project Euler Problem 26 Reciprocal cycles
    HDU1799 循环多少次?
    CCF NOI1001 温度转换
    POJ NOI MATH-7647 余数相同问题
  • 原文地址:https://www.cnblogs.com/hao5599/p/9029540.html
Copyright © 2020-2023  润新知