当前位置： 移动技术网 > IT编程>开发语言>JavaScript > co-dialog弹出框组件-版本v2.0.0

co-dialog弹出框组件-版本v2.0.0

2018年09月13日  | 移动技术网IT编程  | 我要评论

版本v2.0.0

浏览器默认的alert弹出框

alert("默认alert功能")

alert

 

这是一个基础的弹出框

coog.app(".base").use("这是一个基础的弹出框").show()

 

co-dialog弹出框

coog.app(".alert").use(
 "标题",
 "这是一个codialog组件",
 "ok"
).show()

 

你可以拖动我一下

coog.app(".try-drag").use({
    title: "拖动-isdrag",
    message: "请尝试拖动窗口",
    isdrag: true,
}).show()

 

这是一个layout布局，靠右下角显示的弹出框

coog.app(".layout-right-bottom").use({
    title: "布局-layout",
    message: "这是一个layout布局，靠右下角显示的弹出框",
    layout: "right bottom",
}).show()

 

超时自动关闭

coog.app(".timeout").use({
    title: "超时-timeout",
    message: "超时自动关闭",
    timeout: 2000,
}).show()

 

 

显示取消按钮和功能

coog.app(".show-cancle").use({
    title: "取消-show-cancle",
    message: "显示取消按钮和功能",
    showcanclebutton: true,
    isgesture: true,
    isdrag: true,
}).show()

 

弹出框内容自定义

coog.app(".custom").use({
    isgesture: true,
    isdrag: true,
    onheaderbefore: function  () {
     this.innerhtml = "<span ref='top'>顶部</span>"
   },
    onbodybefore: function  () {
     this.innerhtml = "<span ref='middle'>中间</span>"
   },
    onfooterbefore: function  () {
     this.innerhtml = "<span ref='bottom'>底部</span>"
   },
    methods: function  () {
     this.header.$refs.top.style.color =  "#4e5198"
     this.body.$refs.middle.style.color =  "#4e5198"
     this.footer.$refs.bottom.style.color =  "#4e5198"
   }
}).show()

 

自定义动画

coog.app(".customanimation").use({
    title: "自定义动画-customanimation",
    message: "基于animated.css类实现自定义动画",
    isclose: true,
    layout: "center",
    isdrag: true,
    animation: false,
    customanimation: "slideindown",
}).show()

 

确认回调函数

coog.app(".confirmcallback").use({
    title: "确认回调-confirmcallback",
    message: "你想清除确认回调函数吗？",
    showcanclebutton: true,
    confirmcallback: function  () {
     coog.app(".confirm-clear-callback").use("你已确定清除").show()
   },
}).show()

没有图片 线上地址 https://koringz.github.io/co-dialog/index

 

紫色主题

coog.app(".theme-purple").use({
    title: "紫色主题-purple-theme",
    message: "your have seen the purple theme",
    layout: "right top",
    isgesture: true,
    isdrag: true,
    titlecolor: "#4e5198",
    closecolor: "#4e5198",
    showcanclebutton: true,
    confirmbuttonbackground: "#4e5198",
    canclebuttontext: "confirm",
    confirmbuttontext: "cancle",
}).show()

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网