zoukankan      html  css  js  c++  java
  • co-dialog弹出框组件-版本v2.0.0

    co-dialog theme 访问git:co-dialog 版本v2.0.0

    主题2

    coog.app('.theme2').use({
       title: 'JUST CHECKING.',
       message: 'Delete your account?' + "<p style='font-size:12px;'>This action is final and you will be unable to recover any data</p>",
       isDrag: true,
       layout: 'center',
       titleColor: '#865FDF',
       closeColor: '#865FDF',
       showCancleButton: true,
       confirmButtonText: 'YES',
       cancleButtonText: 'NO',
       footerText: "",
       confirmButtonBackground: '#865FDF',
       cancleButtonBackground: '#865FDF',
       confirmButtonColor: '#fff',
       onHeaderBefore: function (node) {
          this.style.backgroundColor = "#fff"
          this.style.borderBottom = "1px solid #ddd"
       },
       onFooterBefore: function (node) {
          this.style.backgroundColor = "#865FDF"
          this.style.marginBottom = '0'
          this.style.padding = '10px 0'
       },
       confirmCallback: function () {
          coog.app(".test3").use({
             titleColor: '#45B680',
             title: 'Return Results',
             message: 'Success Delete',
             confirmButtonText: 'YES',
             confirmCallback: function () {
                coog.app('.test').show()
             }
          })
          .show()
       }
    })
    .show()

    主题3

    coog
    .app('.theme3')
    .use({
        title: 'This is a title',
        message: 'We’re also releasing our first step towards showcasing what’s possible when using GitHub Desktop. In 1.4, we’ve added our release notes to the app to highlight what’s changed since the last release, and to recognize—and thank—our amazing contributors',
        isClose: true,
        isDrag: true,
        layout: 'center',
        animation: false,
        customAnimation: 'slideInDown',
        titleColor: '#333',
        closeColor: '#333',
        confirmButtonText: "Read More",
        confirmButtonColor: '#333',
        animation: false,
        customAnimation: 'swing',
        onDialogBefore: function () {
           this.style.background = "#F1F1F1";
           this.style.border = "3px solid #333";
        },
        onHeaderBefore: function () {
           this.style.background = "#F1F1F1";
           this.style.borderBottom = "2px solid #333";
           this.style.margin = "0 30px";
           this.style.paddingLeft = "0";
           this.style.paddingRight = "0";
        },
        onBodyBefore: function () {
           this.style.fontSize = "14px";
           this.style.textAlign = "left";
        },
        onFooterBefore: function () {
           this.style.float = 'left'
           this.style.marginLeft = '30px'
        },
        methods: function () {
           this.footer.$refs.button.children[0].style.background = "transparent";
           this.footer.$refs.button.children[0].style.border = "2px solid #333"
        }
    })
    .show();

    主题4

    coog
    .app('.theme4')
    .use({
        title: 'Dialog Only Page',
        message: "I can only be served as a dialog, and I don't need a data-rel='dialog' attribute on a link",
        isClose: true,
        isDrag: true,
        layout: 'center',
        animation: false,
        customAnimation: 'bounceInLeft',
        showConfirmButton: false,
        onHeaderBefore: function (){
          this.style.background = "#2A2A2A"
        },
        onBodyBefore: function (){
          this.style.fontSize = "14px"
        },
    })
    .show();

    以下访问官网https://koringz.github.io/co-dialog/index

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

     

  • 相关阅读:
    Eclipse Notepad 插件
    Apache Subversion command line tools 命令行工具,可以用bat更新提交了
    兼容IE的Canvas
    CentOS访问Windows磁盘分区
    [ServiceStack.Text] .net序列化,反序列化组件(号称最快,支持 JSON,XML,JSV格式)
    使用 aspectjmavenplugin 编绎打包 使用aspectJ 的maven项目
    redis学习
    全面转向VS2005
    Orc vs Elf
    MSDN Library May 2006 Edition
  • 原文地址:https://www.cnblogs.com/hao5599/p/9640046.html
Copyright © 2011-2022 走看看