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

版本v2.0.0

浏览器默认的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()