欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-20 16:39:46
co-dialog 版本v2.0.0 浏览器默认的alert弹出框 这是一个基础的弹出框 co-dialog弹出框 你可以拖动我一下 这是一个layout布局,靠右下角显示的弹出框 超时自动关闭 显示取消按钮和功能 弹出框内容自定义 自定义动画 确认回调函数 没有图片 线上地址 https://ko ......

版本v2.0.0

浏览器默认的alert弹出框

alert("默认alert功能")

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

 

这是一个基础的弹出框

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

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

co-dialog弹出框

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

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

 

你可以拖动我一下

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

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

 

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

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

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

 

超时自动关闭

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

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

 

显示取消按钮和功能

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

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

 

弹出框内容自定义

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()

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

 

自定义动画


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

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

 

确认回调函数


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()

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