百度空间的popup效果分析

Posted on 2008-04-13 13:41 冯满天阅读(430) 评论(0) 编辑收藏举报

if (!Array.prototype.push)
2

{
3

Array.prototype.push = function()
4

{
5

var startLength = this.length;
6

for (var i = 0; i < arguments.length; i++)
7

this[startLength + i] = arguments[i];
8

return this.length
9

}
10

};
11

function G()
12

{
13

var elements = new Array();
14

for (var i = 0; i < arguments.length; i++)
15

{
16

var element = arguments[i];
17

if (typeof element == 'string')
18

element = document.getElementById(element);
19

if (arguments.length == 1)
20

return element;
21

elements.push(element)
22

};
23

return elements
24

};
25

Function.prototype.bind = function(object)
26

{
27

var __method = this;
28

return function()
29

{
30

__method.apply(object, arguments)
31

}
32

};
33

Function.prototype.bindAsEventListener = function(object)
34

{
35

var __method = this;
36

return function(event)
37

{
38

__method.call(object, event || window.event)
39

}
40

};
41

Object.extend = function(destination, source)
42

{
43

for (property in source)
44

{
45

destination[property] = source[property]
46

};
47

return destination
48

};
49

if (!window.Event)
50

{
51

var Event = new Object()
52

};
53

Object.extend(Event,
54

{
55

observers: false, element: function(event)
56

{
57

return event.target || event.srcElement
58

}
59

, isLeftClick: function(event)
60

{
61

return (((event.which) && (event.which == 1)) || ((event.button) &&
62

(event.button == 1)))
63

}
64

, pointerX: function(event)
65

{
66

return event.pageX || (event.clientX +
67

(document.documentElement.scrollLeft || document.body.scrollLeft))
68

}
69

, pointerY: function(event)
70

{
71

return event.pageY || (event.clientY +
72

(document.documentElement.scrollTop || document.body.scrollTop))
73

}
74

, stop: function(event)
75

{
76

if (event.preventDefault)
77

{
78

event.preventDefault(); event.stopPropagation()
79

}
80

else
81

{
82

event.returnValue = false; event.cancelBubble = true
83

}
84

}
85

, findElement: function(event, tagName)
86

{
87

var element = Event.element(event);
88

while (element.parentNode && (!element.tagName ||
89

(element.tagName.toUpperCase() != tagName.toUpperCase())))element =
90

element.parentNode; return element
91

}
92

, _observeAndCache: function(element, name, observer, useCapture)
93

{
94

if (!this.observers)this.observers = []; if (element.addEventListener)
95

{
96

this.observers.push([element, name, observer, useCapture]);
97

element.addEventListener(name, observer, useCapture)
98

}
99

else if (element.attachEvent)
100

{
101

this.observers.push([element, name, observer, useCapture]);
102

element.attachEvent('on' + name, observer)
103

}
104

}
105

, unloadCache: function()
106

{
107

if (!Event.observers)return ; for (var i = 0; i <
108

Event.observers.length; i++)
109

{
110

Event.stopObserving.apply(this, Event.observers[i]);
111

Event.observers[i][0] = null
112

}; Event.observers = false
113

}
114

, observe: function(element, name, observer, useCapture)
115

{
116

var element = G(element); useCapture = useCapture || false; if (name ==
117

'keypress' && (navigator.appVersion.match( / Konqueror | Safari |
118

KHTML / ) || element.attachEvent))name = 'keydown';
119

this._observeAndCache(element, name, observer, useCapture)
120

}
121

, stopObserving: function(element, name, observer, useCapture)
122

{
123

var element = G(element); useCapture = useCapture || false; if (name ==
124

'keypress' && (navigator.appVersion.match( / Konqueror | Safari |
125

KHTML / ) || element.detachEvent))name = 'keydown'; if
126

(element.removeEventListener)
127

{
128

element.removeEventListener(name, observer, useCapture)
129

}
130

else if (element.detachEvent)
131

{
132

element.detachEvent('on' + name, observer)
133

}
134

}
135

}
136

137

;
138

Event.observe(window, 'unload', Event.unloadCache, false);
139

var Class = function()
140

{
141

var _class = function()
142

{
143

this.initialize.apply(this, arguments)
144

};
145

for (i = 0; i < arguments.length; i++)
146

{
147

superClass = arguments[i];
148

for (member in superClass.prototype)
149

{
150

_class.prototype[member] = superClass.prototype[member]
151

}
152

};
153

_class.child = function()
154

{
155

return new Class(this)
156

};
157

_class.extend = function(f)
158

{
159

for (property in f)
160

{
161

_class.prototype[property] = f[property]
162

}
163

};
164

return _class
165

};
166

function space(flag)
167

{
168

if (flag == "begin")
169

{
170

var ele = document.getElementById("ft");
171

if (typeof(ele) != "undefined" && ele != null)
172

ele.id = "ft_popup";
173

ele = document.getElementById("usrbar");
174

if (typeof(ele) != "undefined" && ele != null)
175

ele.id = "usrbar_popup"
176

}
177

else if (flag == "end")
178

{
179

var ele = document.getElementById("ft_popup");
180

if (typeof(ele) != "undefined" && ele != null)
181

ele.id = "ft";
182

ele = document.getElementById("usrbar_popup");
183

if (typeof(ele) != "undefined" && ele != null)
184

ele.id = "usrbar"
185

}
186

};
187

var Popup = new Class();
188

Popup.prototype =
189

{
190

iframeIdName: 'ifr_popup', initialize: function(config)
191

{
192

this.config = Object.extend(
193

{
194

contentType: 1, isHaveTitle: true, scrollType: 'no',
195

isBackgroundCanClick: false, isSupportDraging: true,
196

isShowShadow: true, isReloadOnClose: true, width: 400, height:
197

300
198

}
199

, config || {}
200

);
201

this.info =
202

{
203

shadowWidth: 4, title: "", contentUrl: "", contentHtml: "",
204

callBack: null, parameter: null, confirmCon: "", alertCon: "",
205

someHiddenTag: "select,object,embed", someDisabledBtn: "",
206

someHiddenEle: "", overlay: 0, coverOpacity: 40
207

};
208

this.color =
209

{
210

cColor: "#EEEEEE", bColor: "#FFFFFF", tColor: "#709CD2", wColor:
211

"#FFFFFF"
212

};
213

this.dropClass = null;
214

this.someToHidden = [];
215

this.someToDisabled = [];
216

if (!this.config.isHaveTitle)
217

this.config.isSupportDraging = false;
218

this.iniBuild()
219

}
220

, setContent: function(arrt, val)
221

{
222

if (val != '')
223

{
224

switch (arrt)
225

{
226

case 'width':
227

this.config.width = val;
228

break;
229

case 'height':
230

this.config.height = val;
231

break;
232

case 'title':
233

this.info.title = val;
234

break;
235

case 'contentUrl':
236

this.info.contentUrl = val;
237

break;
238

case 'contentHtml':
239

this.info.contentHtml = val;
240

break;
241

case 'callBack':
242

this.info.callBack = val;
243

break;
244

case 'parameter':
245

this.info.parameter = val;
246

break;
247

case 'confirmCon':
248

this.info.confirmCon = val;
249

break;
250

case 'alertCon':
251

this.info.alertCon = val;
252

break;
253

case 'someHiddenTag':
254

this.info.someHiddenTag = val;
255

break;
256

case 'someHiddenEle':
257

this.info.someHiddenEle = val;
258

break;
259

case 'someDisabledBtn':
260

this.info.someDisabledBtn = val;
261

break;
262

case 'overlay':
263

this.info.overlay = val
264

}
265

}
266

}
267

, iniBuild: function()
268

{
269

G('dialogCase') ? G('dialogCase').parentNode.removeChild(G('dialogCase')
270

): function(){}
271

;
272

var oDiv = document.createElement('span');
273

oDiv.id = 'dialogCase';
274

document.body.appendChild(oDiv)
275

}
276

, build: function()
277

{
278

var baseZIndex = 10001+this.info.overlay * 10;
279

var showZIndex = baseZIndex + 2;
280

this.iframeIdName = 'ifr_popup' + this.info.overlay;
281

var path = "http://img.baidu.com/hi/img/";
282

var close = '<input type="image" id="dialogBoxClose" src=
283

"' + path + 'dialogclose.gif" border="0" width="16" height="16"
284

align="absmiddle" title="关闭"/>';
285

var cB = 'filter: alpha(opacity=' + this.info.coverOpacity + ');opacity
286

:' + this.info.coverOpacity / 100+';';
287

var cover = '<div id="dialogBoxBG" style=
288

"position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:' + baseZIndex + ';' + cB + 'background-color:' + this.color.cColor + ';display:none;"></div>';
289

var mainBox = '<div id="dialogBox" style=
290

"border:1px solid ' + this.color.tColor + ';display:none;z-index:' + showZIndex + ';position:relative;width:' + this.config.width + 'px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="' + this.color.bColor + '">';
291

if (this.config.isHaveTitle)
292

{
293

mainBox += '<tr height="24" bgcolor="' + this.color.tColor +
294

'"><td><table style="-moz-user-select:none;height:24px;
295

" width="100%" border="0" cellpadding="0" cellspacing="0
296

" ><tr>' + '<td width="6" height="24"></td><td id
297

="dialogBoxTitle" style=
298

"color:' + this.color.wColor + ';font-size:14px;font-weight:bold;">' + this.info.title + ' </td>' + '<td id="dialogClose" width="20" align="right" valign="middle">' + close + '</td><td width="6"></td></tr></table></td></tr>'
299

}
300

else
301

{
302

mainBox += '<tr height="10"><td align="right">' + close +
303

'</td></tr>'
304

};
305

mainBox += '<tr style="height:' + this.config.height + 'px" valign=
306

"top"><td id="dialogBody" style="position
307

:relative;"></td></tr></table></div>' + '<div id="dialogBoxShadow
308

" style="display:none;z-index:' + baseZIndex + ';"></div>';
309

if (!this.config.isBackgroundCanClick)
310

{
311

G('dialogCase').innerHTML = cover + mainBox;
312

G('dialogBoxBG').style.height = document.body.scrollHeight
313

}
314

else
315

G('dialogCase').innerHTML = mainBox;
316

Event.observe(G('dialogBoxClose'), "click",
317

this.reset.bindAsEventListener(this), false);
318

if (this.config.isSupportDraging)
319

{
320

dropClass = new Dragdrop(this.config.width, this.config.height,
321

this.info.shadowWidth, this.config.isSupportDraging,
322

this.config.contentType);
323

G("dialogBoxTitle").style.cursor = "move"
324

};
325

this.lastBuild()
326

}
327

, lastBuild: function()
328

{
329

var confirm = '<div style="width:100%;height:100%;text-align
330

:center;"><div style="margin:20px 20px 0 20px;font-size:14px;line
331

-height:16px;color:#000000;
332

">' + this.info.confirmCon + '</div><div style="margin:20px;
333

"><input id="dialogOk" type="button" value=" 确定
334

"/> <input id="dialogCancel" type="button" value=" 取消
335

"/></div></div>';
336

var alert = '<div style="width:100%;height:100%;text-align
337

:center;"><div style="margin:20px 20px 0 20px;font-size:14px;line
338

-height:16px;color:#000000;
339

">' + this.info.alertCon + '</div><div style="margin:20px;
340

"><input id="dialogYES" type="button" value=" 确定
341

"/></div></div>';
342

var baseZIndex = 10001+this.info.overlay * 10;
343

var coverIfZIndex = baseZIndex + 4;
344

if (this.config.contentType == 1)
345

{
346

var openIframe = "<iframe width='100%' style='height:" +
347

this.config.height + "px' name='" + this.iframeIdName +
348

"' id='" + this.iframeIdName + "' src='" + this.info.contentUrl
349

+ "' frameborder='0' scrolling='" + this.config.scrollType +
350

"'></iframe>";
351

var coverIframe =
352

"<div id='iframeBG' style='position:absolute;top:0px;left:0px;width:1px;height:1px;z-index:" + coverIfZIndex + ";filter: alpha(opacity=00);opacity:0.00;background-color:#ffffff;'><div>";
353

G("dialogBody").innerHTML = openIframe + coverIframe
354

}
355

else if (this.config.contentType == 2)
356

{
357

G("dialogBody").innerHTML = this.info.contentHtml
358

}
359

else if (this.config.contentType == 3)
360

{
361

G("dialogBody").innerHTML = confirm;
362

Event.observe(G('dialogOk'), "click",
363

this.forCallback.bindAsEventListener(this), false);
364

Event.observe(G('dialogCancel'), "click",
365

this.close.bindAsEventListener(this), false)
366

}
367

else if (this.config.contentType == 4)
368

{
369

G("dialogBody").innerHTML = alert;
370

Event.observe(G('dialogYES'), "click",
371

this.close.bindAsEventListener(this), false)
372

}
373

}
374

, reBuild: function()
375

{
376

G('dialogBody').height = G('dialogBody').clientHeight;
377

this.lastBuild()
378

}
379

, show: function()
380

{
381

this.hiddenSome();
382

this.middle();
383

if (this.config.isShowShadow)
384

this.shadow()
385

}
386

, forCallback: function()
387

{
388

return this.info.callBack(this.info.parameter)
389

}
390

, shadow: function()
391

{
392

var oShadow = G('dialogBoxShadow');
393

var oDialog = G('dialogBox');
394

oShadow['style']['position'] = "absolute";
395

oShadow['style']['background'] = "#000";
396

oShadow['style']['display'] = "";
397

oShadow['style']['opacity'] = "0.2";
398

oShadow['style']['filter'] = "alpha(opacity=20)";
399

oShadow['style']['top'] = oDialog.offsetTop + this.info.shadowWidth;
400

oShadow['style']['left'] = oDialog.offsetLeft + this.info.shadowWidth;
401

oShadow['style']['width'] = oDialog.offsetWidth;
402

oShadow['style']['height'] = oDialog.offsetHeight
403

}
404

, middle: function()
405

{
406

if (!this.config.isBackgroundCanClick)
407

G('dialogBoxBG').style.display = '';
408

var oDialog = G('dialogBox');
409

oDialog['style']['position'] = "absolute";
410

oDialog['style']['display'] = '';
411

var sClientWidth = document.body.clientWidth;
412

var sClientHeight = document.body.clientHeight;
413

var sScrollTop = document.body.scrollTop;
414

var sleft = (document.body.clientWidth / 2) - (oDialog.offsetWidth / 2);
415

var iTop = - 80+(sClientHeight / 2+sScrollTop) - (oDialog.offsetHeight
416

/ 2);
417

var sTop = iTop > 0 ? iTop : (sClientHeight / 2+sScrollTop) -
418

(oDialog.offsetHeight / 2);
419

if (sTop < 1)
420

sTop = "20";
421

if (sleft < 1)
422

sleft = "20";
423

oDialog['style']['left'] = sleft;
424

oDialog['style']['top'] = sTop
425

}
426

, reset: function()
427

{
428

if (this.config.isReloadOnClose)
429

{
430

top.location.reload()
431

};
432

this.close()
433

}
434

, close: function()
435

{
436

G('dialogBox').style.display = 'none';
437

if (!this.config.isBackgroundCanClick)
438

G('dialogBoxBG').style.display = 'none';
439

if (this.config.isShowShadow)
440

G('dialogBoxShadow').style.display = 'none';
441

G('dialogBody').innerHTML = '';
442

this.showSome()
443

}
444

, hiddenSome: function()
445

{
446

var tag = this.info.someHiddenTag.split(",");
447

if (tag.length == 1 && tag[0] == "")
448

tag.length = 0;
449

for (var i = 0; i < tag.length; i++)
450

{
451

this.hiddenTag(tag[i])
452

};
453

var ids = this.info.someHiddenEle.split(",");
454

if (ids.length == 1 && ids[0] == "")
455

ids.length = 0;
456

for (var i = 0; i < ids.length; i++)
457

{
458

this.hiddenEle(ids[i])
459

};
460

var ids = this.info.someDisabledBtn.split(",");
461

if (ids.length == 1 && ids[0] == "")
462

ids.length = 0;
463

for (var i = 0; i < ids.length; i++)
464

{
465

this.disabledBtn(ids[i])
466

};
467

space("begin")
468

}
469

, disabledBtn: function(id)
470

{
471

var ele = document.getElementById(id);
472

if (typeof(ele) != "undefined" && ele != null && ele.disabled == false)
473

{
474

ele.disabled = true;
475

this.someToDisabled.push(ele)
476

}
477

}
478

, hiddenTag: function(tagName)
479

{
480

var ele = document.getElementsByTagName(tagName);
481

if (ele != null)
482

{
483

for (var i = 0; i < ele.length; i++)
484

{
485

if (ele[i].style.display != "none" && ele[i].style.visibility
486

!= 'hidden')
487

{
488

ele[i].style.visibility = 'hidden';
489

this.someToHidden.push(ele[i])
490

}
491

}
492

}
493

}
494

, hiddenEle: function(id)
495

{
496

var ele = document.getElementById(id);
497

if (typeof(ele) != "undefined" && ele != null)
498

{
499

ele.style.visibility = 'hidden';
500

this.someToHidden.push(ele)
501

}
502

}
503

, showSome: function()
504

{
505

for (var i = 0; i < this.someToHidden.length; i++)
506

{
507

this.someToHidden[i].style.visibility = 'visible'
508

};
509

for (var i = 0; i < this.someToDisabled.length; i++)
510

{
511

this.someToDisabled[i].disabled = false
512

};
513

space("end")
514

}
515

};
516

var Dragdrop = new Class();
517

Dragdrop.prototype =
518

{
519

initialize: function(width, height, shadowWidth, showShadow, contentType)
520

{
521

this.dragData = null;
522

this.dragDataIn = null;
523

this.backData = null;
524

this.width = width;
525

this.height = height;
526

this.shadowWidth = shadowWidth;
527

this.showShadow = showShadow;
528

this.contentType = contentType;
529

this.IsDraging = false;
530

this.oObj = G('dialogBox');
531

Event.observe(G('dialogBoxTitle'), "mousedown",
532

this.moveStart.bindAsEventListener(this), false)
533

}
534

, moveStart: function(event)
535

{
536

this.IsDraging = true;
537

if (this.contentType == 1)
538

{
539

G("iframeBG").style.display = "";
540

G("iframeBG").style.width = this.width;
541

G("iframeBG").style.height = this.height
542

};
543

Event.observe(document, "mousemove", this.mousemove.bindAsEventListener
544

(this), false);
545

Event.observe(document, "mouseup", this.mouseup.bindAsEventListener
546

(this), false);
547

Event.observe(document, "selectstart", this.returnFalse, false);
548

this.dragData =
549

{
550

x: Event.pointerX(event), y: Event.pointerY(event)
551

};
552

this.backData =
553

{
554

x: parseInt(this.oObj.style.left), y: parseInt(this.oObj.style.top)
555

}
556

}
557

, mousemove: function(event)
558

{
559

if (!this.IsDraging)
560

return ;
561

var iLeft = Event.pointerX(event) - this.dragData["x"] + parseInt
562

(this.oObj.style.left);
563

var iTop = Event.pointerY(event) - this.dragData["y"] + parseInt
564

(this.oObj.style.top);
565

if (this.dragData["y"] < parseInt(this.oObj.style.top))
566

iTop = iTop - 12;
567

else if (this.dragData["y"] > parseInt(this.oObj.style.top) + 25)
568

iTop = iTop + 12;
569

this.oObj.style.left = iLeft;
570

this.oObj.style.top = iTop;
571

if (this.showShadow)
572

{
573

G('dialogBoxShadow').style.left = iLeft + this.shadowWidth;
574

G('dialogBoxShadow').style.top = iTop + this.shadowWidth
575

};
576

this.dragData =
577

{
578

x: Event.pointerX(event), y: Event.pointerY(event)
579

};
580

document.body.style.cursor = "move"
581

}
582

, mouseup: function(event)
583

{
584

if (!this.IsDraging)
585

return ;
586

if (this.contentType == 1)
587

G("iframeBG").style.display = "none";
588

document.onmousemove = null;
589

document.onmouseup = null;
590

var mousX = Event.pointerX(event) -
591

(document.documentElement.scrollLeft || document.body.scrollLeft);
592

var mousY = Event.pointerY(event) - (document.documentElement.scrollTop
593

|| document.body.scrollTop);
594

if (mousX < 1 || mousY < 1 || mousX > document.body.clientWidth ||
595

mousY > document.body.clientHeight)
596

{
597

this.oObj.style.left = this.backData["x"];
598

this.oObj.style.top = this.backData["y"];
599

if (this.showShadow)
600

{
601

G('dialogBoxShadow').style.left = this.backData.x +
602

this.shadowWidth;
603

G('dialogBoxShadow').style.top = this.backData.y +
604

this.shadowWidth
605

}
606

};
607

this.IsDraging = false;
608

document.body.style.cursor = "";
609

Event.stopObserving(document, "selectstart", this.returnFalse, false)
610

}
611

, returnFalse: function()
612

{
613

return false
614

}
615

};utton)&&(event.button==1)))},pointerX:function(event){return event.pageX||(event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft))},pointerY:function(event){return event.pageY||(event.clientY+(document.documentElement.scrollTop||document.body.scrollTop))},stop:function(event){if(event.preventDefault){event.preventDefault();event.stopPropagation()}else{event.returnValue=false;event.cancelBubble=true}},findElement:function(event,tagName){var element=Event.element(event);while(element.parentNode&&(!element.tagName||(element.tagName.toUpperCase()!=tagName.toUpperCase())))element=element.parentNode;return element},_observeAndCache:function(element,name,observer,useCapture){if(!this.observers)this.observers=[];if(element.addEventListener){this.observers.push([element,name,observer,useCapture]);element.addEventListener(name,observer,useCapture)}else if(element.attachEvent){this.observers.push([element,name,observer,useCapture]);element.attachEvent('on'+name,observer)}},unloadCache:function(

会员力量，点亮园子希望

刷新页面返回顶部

亚瑟狼

百度空间的popup效果分析