dialog-system
description
a jquery dialog plugin, which can be used as a seajs module.
download
simple demos
ds.popup('some text')ds.popup('some text', 3000)ds.info('some text')ds.error('some text')ds.ok('some text')ds.warn('some text', 5000)ds.left('some text')ds.right('some text')ds.top('some text')ds.left('some text', 1000)ds.dialog({ msg: 'some text', modal: true })ds.dialog({ msg: 'some text' })ds.alert('msg', $('#test'))ds.alert('msg', $('#test'), 3000, 'warn')ds.alert('msg', $('#test'), 3000, 'error')ds.alert('msg', $('#test'), 3000, 'ok')ds.confirm({'msg': 'delete file can not be reverted.', title: 'Are you sure?', confirmCallback: function(flag) { if(flag) ds.ok('deleted');else ds.warn('not deleted') }})
test && example
git clone https://github.com/zxdong262/dialog-system.git
cd dialog-system
sudo npm install
node app
then visit:
how to use
include ds.min.js
<script src="jquery-1.11.1.min.js"></script>
<script src="ds.min.js"></script>
load proper css in your css file, example will be like this:
.ds-block {
display: block;
}
.ds-iblock {
display: inline-block;
}
.ds-overlay {
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.ds-hide {
display: none;
}
.ds-type-unit {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 1.2em;
height: 1.2em;
line-height: 1.2em;
text-align: center;
border-radius: 1.2em;
font-style: normal;
}
.ds-default {
display: none;
}
.ds-info {
color: #333;
background: #ddd;
}
.ds-ok {
color: #fff;
background: green;
}
.ds-warn {
background: #babc36;
color: #fff;
}
.ds-error {
background: red;
color: #fff;
}
.ds-type-popup .ds-inner,
.ds-type-dialog .ds-inner {
display: block;
padding: 15px;
}
.ds-wrap {
position: relative;
background: #333;
background: rgba(0,0,0,.8)
color: #fff;
}
.ds-type-popup,
.ds-type-dialog {
background: #fff;
box-shadow: 0 5px 5px rgba(0,0,0,.2);
border: 1px solid #eee;
}
.ds-type-left,
.ds-type-right,
.ds-type-top {
color: #fff;
}
.ds-type-left {
border-radius: 0 3px 3px 0;
}
.ds-type-right {
border-radius: 3px 0 0 3px;
}
.ds-type-top {
border-radius: 0 0 3px 3px;
}
.ds-btn-warninglose {
display: inline-block;
vertical-align: middle;
color: #666;
}
.ds-btn-warninglose:hover {
cursor: pointer;
color: #000;
}
.ds-type-popup .ds-btn-warninglose {
position: absolute;
height: 14px;
width: 14px;
font-size: 14px;
right: 6px;
top: 6px;
border-radius: 14px;
}
.ds-head-content {
display: block;
position: absolute;
left: 15px;
right: 34px;
line-height: 34px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-head {
display: block;
height: 34px;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #ddd;
background: #f2f2f2;
font-size: 1.2em;
}
.ds-head .ds-btn-warninglose {
position: absolute;
right:0;
top:0;
font-size: 16px;
height: 34px;
width: 34px;
line-height: 34px;
text-align: center;
}
.ds-content {
line-height: 1.6;
padding: 5px;
word-break:break-all;
}
/* alert */
.ds-alert {
border-width: 1px;
border-style: solid;
border-radius: 4px;
position: relative;
}
.ds-alert-close {
position: absolute;
right: 6px;
top: 6px;
height: 14px;
width: 14px;
display: block;
font-size: 14px;
color: #888;
}
.ds-alert-close:hover {
color: #333;
}
.ds-alert-ok {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.ds-alert-ok .alert-link {
color: #2b542c;
}
.ds-alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.ds-alert-info .ds-alert-link {
color: #245269;
}
.ds-alert-warn {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}
.ds-alert-warn .ds-alert-link {
color: #66512c;
}
.ds-alert-error {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
.ds-alert-error .ds-alert-link {
color: #843534;
}
/* ds-btn */
.ds-btns {
text-align: right;
border-top: 1px solid #ddd;
margin: 10px 0;
padding: 8px 15px;
}
.ds-btn {
display: inline-block;
padding: .5em 1.6em .55em;
margin-bottom: 0;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.ds-btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.ds-mgl {
margin-left: 10px;
}
.ds-btn-green {
color: #fff;
background-color: #1bbc9b;
border-color: #179d81
}
.ds-btn-green:hover, .ds-btn-green:focus, .ds-btn-green:active {
color: #fff;
background-color: #179d81;
border-color: #1bbc9b
}
.ds-btn-red {
color: #fff;
background-color: #e26a6a;
border-color: #dc4c4c
}
.ds-btn-red:hover, .ds-btn-red:focus, .ds-btn-red:active {
color: #fff;
background-color: #dc4c4c;
border-color: #e26a6a
}
/* other */
.ds-pd {
padding: 15px 28px 15px 15px;
}
.ds-pointer {
cursor: pointer;
}
use it in js
var ds = $.ds
ds.popup('some html...')
methods list
ds.popup = function(msg, timer, type, options)
ds.info = function(msg, timer, options)
ds.warn = function(msg, timer, options)
ds.error = function(msg, timer, options)
ds.ok = function(msg, timer, options)
ds.dialog = function(options)
ds.confirm = function(options)
ds.right = function(msg, timer, type, options)
ds.left = function(msg, timer, type, options)
ds.top = function(msg, timer, type, options)
$.ds.alert = function(msg, wrap, type, method, options)
params
//@param {String} msg
//the html to show
//@param {Number} timer
//time(ms) before close the dialog/popup, 0 will not auto close
//@param {String} type
//the msg type, can be 'default', 'alert', 'info', 'ok', 'error'
//@param {Object} options
//more options
{
modal: false //with modal or not
,closeText: 'close' //title for close button
,timer: 0 //time before this.hide(), 0 will not auto run this.hide()
,css: {} //css setting
,type: 'default' //dialog type
,show: 'show' //show function, can be 'slideDown', 'slideUp', 'animate', 'show', 'fadein', 'fadeTo'...
,showParam: null //animate params, object,such as { height: 100 }
,hide: 'hide' //hide function, can be 'slideDown', 'slideUp', 'animate', 'hide', 'fadeOut', 'fadeTo'...
,hideParam: null //animate params, object,such as { height: 0 }
,animateSpeed: 0
,msg: '' //dialog message html
,btns: [] //callback buttons
,confirmCallback: undefined //ds.confirm must have this
,open: true //if false, will only init it, will not open it.
,title: '' //for dialog with title
,hasCloseBtn: true
,selfDestroy: false //if true, after this.hide(), instance will self-destroy.
//event
,beforeShow: null
,afterShow: null
,beforeHide: null
,afterHide: null
}
global option
change glob options for customize, $.dsOption hold a reference to global options
$.dsOption = {
indexCounter: 250 //zindex counter
,defaultWidth: 200
,defaultTimer: 4000
,defaultTitle: 'Info'
,defaultConfirmBtnHtml: '<span class="ds-pointer ds-btn ds-btn-green">OK</span>'
,defaultCancelBtnHtml: '<span class="ds-pointer ds-btn ds-btn-red ds-mgl">Cancel</span>'
,defaultTop: 40
,defaults: {
modal: false
,closeText: 'close' //title for close buttom
,timer: 0 //time before this.hide(), 0 will not auto run this.hide()
,css: {} //css setting
,type: 'default' //dialog type
,show: 'show' //show function, can be 'slideDown', 'slideUp', 'animate', 'show', 'fadein', 'fadeTo'...
,showParam: null //animate params, object,such as { height: 100 }
,hide: 'hide' //hide function, can be 'slideDown', 'slideUp', 'animate', 'hide', 'fadeOut', 'fadeTo'...
,hideParam: null //animate params, object,such as { height: 0 }
,animateSpeed: 0
,btns: [] //function buttons
,msg: '' //dialog message html
,open: true //if false, will only init it, will not open it.
,title: '' //for dialog with title
,hasCloseBtn: true
,selfDestroy: false //if true, after this.hide(), instance will self-destroy.
//event
,beforeShow: null //callback before this.show()
,afterShow: null //callback after this.show()
,beforeHide: null //callback before this.hide()
,afterHide: null //callback after this.hide()
}
,closeHtml: '×'
,typeHtml: { //type icon html
default: ''
,info: '<i class="ds-info ds-type-unit">i</i>'
,alert: '<i class="ds-alert ds-type-unit">!</i>'
,error: '<i class="ds-error ds-type-unit">Χ</i>'
,ok: '<i class="ds-ok ds-type-unit">√</i>'
}
}