JQ组件之artDialog

View Code

  1 var times=8;
  2 art.dialog.fn.shake = function() {
  3     var style = this.DOM.wrap[0].style,
  4     p = [1, 2, 1, 0, -1, -2, -1, 0],
  5     fx = function() {
  6         style.marginLeft = p.shift() + 'px';
  7         if (p.length <= 0) {
  8             style.marginLeft = 0;
  9             clearInterval(timerId)
 10         }
 11     };
 12     p = p.concat(p.concat(p));
 13     timerId = setInterval(fx, 13);
 14     return this
 15 };
 16 artDialog.notice = function(options) {
 17     var opt = options || {},
 18     api, aConfig, hide, wrap, top, duration = 800;
 19     var config = {
 20         id: 'Notice',
 21         left: '100%',
 22         top: '100%',
 23         fixed: true,
 24         drag: false,
 25         resize: false,
 26         follow: null,
 27         lock: false,
 28         init: function(here) {
 29             api = this;
 30             aConfig = api.config;
 31             wrap = api.DOM.wrap;
 32             top = parseInt(wrap[0].style.top);
 33             hide = top + wrap[0].offsetHeight;
 34             wrap.css('top', hide + 'px').animate({
 35                 top: top + 'px'
 36             },
 37             duration,
 38             function() {
 39                 opt.init && opt.init.call(api, here)
 40             })
 41         },
 42         close: function(here) {
 43             wrap.animate({
 44                 top: hide + 'px'
 45             },
 46             duration,
 47             function() {
 48                 opt.close && opt.close.call(this, here);
 49                 aConfig.close = $.noop;
 50                 api.close()
 51             });
 52             return false
 53         }
 54     };
 55     for (var i in opt) {
 56         if (config[i] === undefined) config[i] = opt[i]
 57     };
 58     return artDialog(config)
 59 };
 60 
 61 ArtTips = function(Msg,time) {
 62     return artDialog({
 63         id: 'Tips',
 64         title: false,
 65         width: 415,
 66         cancel: false,
 67         fixed: true,
 68         lock: false
 69     }).content('<div style="padding: 0 1em;">' + Msg + '</div>').time(time || 1.5)
 70 };
 71 AlertTips = function(Msg) {
 72     var timer;
 73     var dg = artDialog({
 74         init: function() {
 75             var that = this,
 76             i = times;
 77             var fn = function() {
 78                 that.title(i + '秒后自动关闭'); ! i && that.close();
 79                 i--
 80             };
 81             timer = setInterval(fn, 1000);
 82             fn()
 83         },
 84         close: function() {
 85             clearInterval(timer)
 86         },
 87         id: 'Alert',
 88         content: Msg,
 89         width: 415,
 90         fixed: true,
 91         lock: true,
 92         drag: true,
 93         resize: false,
 94         ok: true
 95     });
 96     dg.shake && dg.shake();
 97     return dg
 98 };
 99 confirmTips = function(Msg, yes, no) {
100     var timer;
101     var dg = artDialog({
102         init: function() {
103             var that = this,
104             i = times;
105             var fn = function() {
106                 that.title(i + '秒后自动取消'); ! i && that.close();
107                 i--
108             };
109             timer = setInterval(fn, 1000);
110             fn()
111         },
112         close: function() {
113             clearInterval(timer)
114         },
115         id: 'Confirm',
116         content: Msg + "，请确认？",
117         width: 415,
118         fixed: true,
119         lock: true,
120         drag: true,
121         resize: false,
122         ok: function(here) {
123             return yes.call(this, here)
124         },
125         cancel: function(here) {
126             ArtTips("执行取消操作");
127             return no && no.call(this, here)
128         }
129     });
130     dg.shake && dg.shake();
131     return dg
132 };
133 ArtUrl = function(Msg, Url) {
134     var timer;
135     return artDialog({
136         id: 'Tips',
137         opacity: 0.3,
138         title: false,
139         width: 415,
140         cancel: false,
141         fixed: true,
142         lock: true,
143         time: timer,
144         init: function() {
145             var that = this,
146             i = 3;
147             var fn = function() {
148                 that.content('' + Msg + '，<font style="color:red;font-weight:bold;">' + i + '&nbsp;</font>秒后自动跳转页面'); ! i && that.close();
149                 i--
150             };
151             timer = setInterval(fn, 1000);
152             fn()
153         },
154         close: function() {
155             clearInterval(timer);
156             top.location.href = Url
157         }
158     })
159 };

View Code

1 <div class="digg" id="arttip">
2 <a href="javascript:void(0);" onclick="javascript:AlertTips('自定义的提示对话框');">CLICK ME&raquo</a>
3 &nbsp;&nbsp;&nbsp; <a href="javascript:void(0);" onclick="javascript:ArtTips('自定义的提示对话框1',5);">
4 CLICK ME&raquo</a> &nbsp;&nbsp;&nbsp; <a href="javascript:void(0);" onclick="javascript:ArtUrl('自定义的提示对话框2','/Info/0671fe637f3606fc.htm');">
5 CLICK ME&raquo</a> &nbsp;&nbsp;&nbsp; <a href="javascript:void(0);" onclick="javascript:confirmTips('自定义的提示对话框3',function(){window.location.href='/Info/0671fe637f3606fc.htm';},function(){return true})">
6 CLICK ME&raquo</a>
7 </div>

转载于:https://www.cnblogs.com/xchapter/archive/2011/10/11/2208010.html