Skip to content

Commit 0bd6225

Browse files
pwwangpwwang
committed
Fixed some bugs
1. the resize handler moving with the scroll bar of the container 2. add an option padding to set the padding of the content according to differnt types 3. fixed when the onOpen callback called
1 parent 40d3e63 commit 0bd6225

File tree

5 files changed

+118
-46
lines changed

5 files changed

+118
-46
lines changed

‎doc.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ <h2>Full settings</h2>
290290
<td class="type">string</td>
291291
<td class="value">'html'</td>
292292
<td>The type of msgbox</td>
293-
<td>Supported types: <font>text, ajax, html, iframe, confirm, alert, prompt, warning, info=alert, error, success, photo, image=photo, album, gallery=album</font></td>
293+
<td>Supported types: <font>text, ajax, html, iframe, confirm, alert, prompt, warning, info, error, success, photo, image=photo, album, gallery=album</font></td>
294294
</tr>
295295
<tr>
296296
<td class="key">content</td>
@@ -462,6 +462,15 @@ <h2>Full settings</h2>
462462
<td>1. the width of msgbox when minimized
463463
2. the minimal width when resize msgbox</td>
464464
</tr>
465+
<tr>
466+
<td class="key">padding</td>
467+
<td class="type">number</td>
468+
<td class="value">0</td>
469+
<td>The padding of the content</td>
470+
<td>Sometimes you need a padding of the content, e.g.: for text type or html type. However, you don't need them for photos in most cases.
471+
CSS cannot differentiate the types, so you can define them here. Remember to use !important to override if you'd like to define it in CSS.
472+
</td>
473+
</tr>
465474
<tr>
466475
<td class="key">photoAuto</td>
467476
<td class="type">boolean</td>

‎examples/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ <h3 class="title">Basic usage</h3>
7070
<pre class="code">
7171
$(".msgbox.defaultmsg").msgbox({});
7272
$(".msgbox.basic").msgbox({
73-
content: 'Hello world'
73+
content: 'Hello world',
74+
padding: 12
7475
});
7576
</pre>
7677
<div class="trigger">
@@ -80,7 +81,7 @@ <h3 class="title">Basic usage</h3>
8081
</div>
8182

8283
<div class="wrap">
83-
<h3 class="title">Alert/Info=Alert/Warning/Error/Success</h3>
84+
<h3 class="title">Alert/Info/Warning/Error/Success</h3>
8485
<div class="comment">These are shortcuts. You can add different style width selector .jMsgbox-alert .jMsgbox-loaded <br />
8586
To replace window.alert width jquery.msgbox alert shortcut: <br />
8687
<pre>

‎examples/sub.html

Lines changed: 54 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,54 @@
1-
<html>
2-
<head>
3-
<title>Sub Page</title>
4-
</head>
5-
<body style="padding:12px; background-color:#fef;">
6-
This is from another page: sub.html
7-
</body>
8-
</html>
1+
<p>
2+
This is from another page: sub.html
3+
</p>
4+
<p>
5+
This is from another page: sub.html
6+
</p>
7+
<p>
8+
This is from another page: sub.html
9+
</p>
10+
<p>
11+
This is from another page: sub.html
12+
</p>
13+
<p>
14+
This is from another page: sub.html
15+
</p>
16+
<p>
17+
This is from another page: sub.html
18+
</p>
19+
<p>
20+
This is from another page: sub.html
21+
</p>
22+
<p>
23+
This is from another page: sub.html
24+
</p>
25+
<p>
26+
This is from another page: sub.html
27+
</p>
28+
<p>
29+
This is from another page: sub.html
30+
</p>
31+
<p>
32+
This is from another page: sub.html
33+
</p>
34+
<p>
35+
This is from another page: sub.html
36+
</p>
37+
<p>
38+
This is from another page: sub.html
39+
</p>
40+
<p>
41+
This is from another page: sub.html
42+
</p>
43+
<p>
44+
This is from another page: sub.html
45+
</p>
46+
<p>
47+
This is from another page: sub.html
48+
</p>
49+
<p>
50+
This is from another page: sub.html
51+
</p>
52+
<p>
53+
This is from another page: sub.html
54+
</p>

‎jquery.msgbox.js

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@
6363
photoScaled: false, // whether to scale the photo the scale of (options.width, options.height)
6464
photoFade: 500, // whether to use fade transition to show photos, false, or a miniseconds
6565

66+
padding: 0, // the padding of the content
67+
6668
imgError: 'Failed to load image.', // the error message when loading image
6769
xhrError: 'Failed to load URL.', // the error message when using ajax
6870
// these will be overrided by $.msgboxI18N.en.imgError
@@ -366,26 +368,38 @@
366368

367369
// content
368370
this.$content = createElement('div', this.options.prefix + '-content', {
369-
overflow: $.inArray(this.options.type, ['photo', 'image', 'album', 'gallery']) == -1 ? 'auto' : 'hidden',
371+
overflow: 'hidden',
370372
position: 'relative'
371373
});
372374

373375
// prompt
374-
this.$prompt = createElement('input', this.options.prefix + '-prompt', {}, {
376+
this.$prompt = createElement('input', this.options.prefix + '-prompt-input', {}, {
375377
type: 'text'
376378
});
379+
380+
this.$loaded = createElement('div', this.options.prefix + '-loaded', {
381+
padding: this.options.padding,
382+
width: '100%',
383+
height: '100%',
384+
overflow: $.inArray(this.options.type, ['photo', 'image', 'album', 'gallery']) == -1 ? 'auto' : 'hidden'
385+
});
386+
387+
this.$loading = createElement('div', this.options.prefix + '-loading', {
388+
height: '100%',
389+
width: '100%'
390+
});
377391
},
378392

379393
// append the element to DOM
380394
_append: function () {
381395
if (this.options.overlay) $(document.body).append(this.$overlay);
382-
$(document.body).append(this.$wrap.append(this.$title.append(this.$controls), this.$content));
396+
$(document.body).append(this.$wrap.append(this.$title.append(this.$controls), this.$content.append(this.$loaded)));
383397
if (this.options.buttons !== null && this.options.buttons.length > 0) {
384398
this.$foot.appendTo(this.$wrap);
385399
if (this.options.resize) this.$resize.appendTo(this.$foot);
386400
} else {
387401
if (this.options.resize) this.$resize.appendTo(this.$content);
388-
}
402+
}
389403
},
390404

391405
_bindEvents: function () {
@@ -527,14 +541,14 @@
527541

528542
var that = this;
529543
// purge
530-
this.$content.contents().filter(function(){
531-
return this.nodeType == 3 || (!$(this).is(that.$img) && !$(this).is(that.$resize));
532-
}).remove();
544+
//this.$content.contents().filter(function(){
545+
// return this.nodeType == 3 || (!$(this).is(that.$img) && !$(this).is(that.$resize));
546+
//}).remove();
533547

534548
this.$loading = createElement('div', this.options.prefix + '-loading', {
535549
height: '100%',
536550
width: '100%'
537-
}).appendTo(this.$content);
551+
}).appendTo(this.$loaded);
538552

539553
if (!this.titleSpecified) this.title ($handler.attr('title'));
540554

@@ -585,7 +599,7 @@
585599
that.$img.attr(val, attr);
586600
});
587601

588-
this.$img.hide().appendTo(this.$content)
602+
this.$img.hide().appendTo(this.$loaded)
589603
.error(function(){
590604
that.$loading.remove();
591605
that.$loading = undefined;
@@ -604,20 +618,22 @@
604618

605619
_load: function (callback) {
606620
if (this.loaded) return;
607-
this.$loaded = createElement('div', this.options.prefix + '-loaded');
621+
608622

609623
switch (this.options.type) {
610624
case 'text':
611-
this.$loaded.text(this.options.content).appendTo(this.$content);
625+
this.$loaded.text(this.options.content);
612626
this.loaded = true;
613627
if (callback) callback.apply(this);
614628
if (this.options.onLoad) this.options.onLoad.apply(this);
615629
break;
616630

617631
case 'html':
618-
case 'confirm':
619-
var content = $.type(this.options.content)==='object' ? this.options.content.show() : this.options.content;
620-
this.$loaded.html(content).appendTo(this.$content);
632+
var content = $.type(this.options.content)==='object'
633+
? this.options.content.show()
634+
: this.options.content;
635+
636+
this.$loaded.append(content);
621637
this.loaded = true;
622638
if (callback) callback.apply(this);
623639
if (this.options.onLoad) this.options.onLoad.apply(this);
@@ -628,16 +644,28 @@
628644
case 'info':
629645
case 'error':
630646
case 'success':
631-
this.$loaded.html(this.options.content).appendTo(this.$content.addClass(this.options.prefix + '-' + this.options.type));
647+
case 'confirm':
648+
var content = $.type(this.options.content)==='object'
649+
? this.options.content.show()
650+
: this.options.content;
651+
652+
this.$loaded.append(content).addClass(
653+
this.options.prefix + '-shortcut '
654+
+ this.options.prefix + '-' + this.options.type);
632655
this.loaded = true;
633656
if (callback) callback.apply(this);
634657
if (this.options.onLoad) this.options.onLoad.apply(this);
635658
break;
636659

637660
case 'prompt':
638-
this.$loaded.html(this.options.content)
639-
.append(this.$prompt)
640-
.appendTo(this.$content);
661+
var content = $.type(this.options.content)==='object'
662+
? this.options.content.show()
663+
: this.options.content;
664+
665+
this.$loaded.append(content).append(this.$prompt).addClass(
666+
this.options.prefix + '-shortcut '
667+
+ this.options.prefix + '-' + this.options.type);
668+
641669
this.loaded = true;
642670
if (callback) callback.apply(this);
643671
if (this.options.onLoad) this.options.onLoad.apply(this);
@@ -708,7 +736,7 @@
708736
marginwidth: '0px',
709737
scrolling: 'auto',
710738
src: this.options.content
711-
}).appendTo(that.$content).one('load', function() {
739+
}).appendTo(that.$loaded).one('load', function() {
712740
$loading.remove();
713741
that.$iframe.show();
714742
if (!that.options.title) {
@@ -1037,13 +1065,12 @@
10371065
};
10381066
}
10391067

1040-
if (this.options.onOpen) this.options.onOpen.apply(this);
1041-
10421068

10431069
var that = this;
10441070
var rightAfterOpen = function () {
10451071
that.opened = true;
10461072
$.msgbox._focused = that;
1073+
if (that.options.onOpen) that.options.onOpen.apply(that);
10471074
if (callback) callback.apply(that);
10481075
};
10491076
var mayPlayAlbum = function () {
@@ -1244,20 +1271,9 @@
12441271
content: function (ctt) {
12451272
var that = this;
12461273
if (ctt === undefined) {
1247-
return this.$content.has(this.$loaded).length
1248-
? this.$loaded.html()
1249-
: this.$content.contents().filter(function(){
1250-
return !$(this).is(that.$resize);
1251-
}).html();
1274+
return this.$loaded.html();
12521275
} else {
1253-
if (this.$content.has(this.$loaded).length) {
1254-
this.$loaded.html(ctt);
1255-
} else {
1256-
this.$content.contents().filter(function(){
1257-
return !$(this).is(that.$resize) && !$(this).is(that.$img);
1258-
}).remove();
1259-
this.$content.prepend(ctt);
1260-
}
1276+
this.$loaded.html(ctt);
12611277
}
12621278
return true;
12631279
}

‎jquery.msgbox.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)