co-dialog 版本v2.0.0 瀏覽器預設的alert彈出框 這是一個基礎的彈出框 co-dialog彈出框 你可以拖動我一下 這是一個layout佈局，靠右下角顯示的彈出框 超時自動關閉 顯示取消按鈕和功能 彈出框內容自定義 自定義動畫 確認回調函數 沒有圖片 線上地址 https://ko ...
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功能")
這是一個基礎的彈出框
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()
