Learning jQuery plug-in development starts with practice Dialog plug-in development_jquery

Foreword:
The reason why I wrote this article is to share my thoughts with everyone; for beginners, I hope they can get something useful for them from this article, and for experienced developers, I hope he can point out my shortcomings and give me more opinions and suggestions; the purpose is to make progress together.

1. What plug-in should I use?
I want to implement a plug-in that can replace the browser's default pop-up dialog box or form, which is the web page dialog box that we pop up by calling window.alert, window.confirm, window.prompt. The form that pops up by calling window.open, window.showModalDialog, window.showModelessDialog.

The reason for this is: the browser’s default dialog box has simple functions and cannot meet more needs; the user experience is poor. Many modern browsers will block pop-up windows by default (probably because pop-up ads were too rampant in the past. I still remember back in 2003 and 40, when I saw a bunch of windows popping up on a XX website, and I couldn’t even close them. All the machines were killed, and even the computer crashed).

2. What is the desired effect?
Regarding the dialog box plug-in, we all know that there are some differences in the display styles in different browsers, but the basic layout structure is the same. The desired effect of our plug-in is that the style and layout structure displayed in any browser are consistent and located in the center of the browser (so that users can see it at the first time).
The pop-up form is similar to the dialog box in implementation (I refer to the plug-in we want to develop, not the default implementation of the browser).

3. Design the function
Let’s look at the picture and explain step by step:

1. Block the page content (the gray translucent part on the picture ), the transparency can be set (opaque 0-1 fully transparent), the advantage of this is that the page cannot be operated until the user closes the dialog box.
2. The dialog box is displayed in the center, and the size of the dialog box (height and width) can be set.
3. (1) and (2) in the picture are dialog box icons, both of which can be set.
4. The title and content of the dialog box can be set.
5. The close button (x) can not be displayed.
6. There can be 0 or more bottom buttons, and callback functions can be set for them.

4. How to implement the function?
　1. Use CSS styles to control appearance.
*In order to avoid CSS naming conflicts, we need to determine a namespace for the plug-in, and all styles under it will be under this namespace.
2. Block all content
*We set the basic style in CSS.

Copy code The code is as follows:

position:absolute;
left:0;
top:0;
background-color:#000;
z-index:99999;

*It should be noted here that the value of z-index has a safe range. From Microsoft's instructions, "The maximum value is 2147483647 for IE6, 7 and 8. But it is 16777271 for Safari 3, so a safe cross browser maximum value is 16777271." The general idea is that the maximum value supported by IE6, 7, and 8 is 2147483647, but Safari 3 is 16777271, so to be on the safe side, do not exceed 16777271.

* Use js code to set its width and height. We get the page width through $(document).width(), and get the page height through $(document).height().
3. Display the dialog box in the center

There are two ways to display the dialog box in the center.
One is through CSS.
Position: absolute; If the page has a scroll bar, the dialog box will also move when the scroll bar scrolls.
Position: fixed; It is ideal. No matter how you scroll, the dialog box always stays in the center of the page. The only disadvantage is that it does not support IE6 (there are methods on the Internet for compatibility with IE6, and interested friends can implement it by themselves).
The second is to control through js script.
Positioning is done by calculating the page length and width. When the page size is changed, the position of the dialog box will not change, and the effect is not ideal. (Of course, you can automatically adjust the position by monitoring page changes, but it is more troublesome to implement. Interested friends can try it yourself)

5. Browser compatibility

Browser compatibility is the most annoying thing, but having said that, the most ideal effect is of course to be compatible with all browsers. In fact, if we spend more time, we can really make it compatible with all browsers. But is it worth it? If you ask web designers what browser they hate the most? I think most people would answer IE6. Yes, this browser was once popular all over the world and dominated more than 90% of the world's users' computers. We used to think it was very good, well, maybe I should say good, or just okay; no matter How about, it was indeed the most popular browser in the world at one time. But now, it is the least popular browser in the eyes of our developers. Although the global average usage does not exceed 5%, more than 20% of users in China still use it (from http://www.ie6countdown .com/ statistics), why is this? If the same function is to be compatible with older versions of browsers such as IE6, we will probably spend one-third or more of our time. Life is short, comrades, why not use the limited time to make something better? What about meaningful things? Killing IE6 starts with me!

6. Function implementation and calling

CSS part

Copy code The code is as follows:

JS part

Copy code The code is as follows:

(function ($) {
$.alert = function (options) {

if (typeof options === 'string') options = { content: options };
var opts = $.extend({}, $.alert.defaults, options);

if (opts.content == null || opts.content.length == 0) return this;

var me = $('

').addClass('ctcx-dialog').appendTo(document.body);
var doc = $(document);
$('

').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height()).appendTo(me);
var _dialog_ = $('

').css({
width: opts.width,
height: opts.height,
marginLeft: 0 - opts.width / 2,
marginTop: 0 - opts.height / 2
}).appendTo(me);
var _bar_ = $('

').appendTo(_dialog_);

var _titleWidth_ = opts.width - 0;
if (opts.icon != null) {
$('

').css('background-image', 'url(' opts.icon ')').appendTo(_bar_);
_titleWidth_ -= 25;
}
if (opts.close) _titleWidth_ -= 20;
$('

').css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_);
if (opts.close) {
$('

').click(function () {
me.remove();
}).appendTo(_bar_);
}

var _containerHeight_ = opts.height - 40;
var _container_ = $('

').appendTo(_dialog_);
var _contentCss_ = {};
if (opts.iconBig != null) {
$('

').css('background-image', 'url(' opts.iconBig ')').appendTo(_container_);
_contentCss_.top = -48;
_contentCss_.marginLeft = 48;
}
var _content_ = $('

').css(_contentCss_).html(opts.content).appendTo(_container_);

if (opts.buttons != null && opts.buttons.length > 0) {
_containerHeight_ -= 30;
var _buttons_ = $('

').appendTo(_dialog_);
$.each(opts.buttons, function (i, _button) {
$('' _button.text '').click(function () {
_button.fn(me);
}).appendTo(_buttons_);
})
}
_container_.css({ height: _containerHeight_ });

this.close = function () {
me.remove();
}

this.setContent = function (content) {
_content_.html(content);
}

return this;
}
//设置默认参数
$.alert.defaults = {
title: '信息提示', //对话框标题
content: null, //对话框内容
width: 200, //宽
height: 100, //高
opacity: 0.5, //透明度
icon: null, //显示在标题前面的小图标
iconBig: null, //显示在内容左侧的大图标
buttons: null, //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {}
close: true//是否显示关闭按钮
}
})(jQuery);

调用

复制代码 代码如下:

$.alert({
title: '火星向你发出警告', //对话框标题
content: '我们是火星人，我们就要入侵地球了，你们准备好了吗？', //对话框内容
width: 300, //宽
height: 150, //高
opacity: 0.5, //透明度
icon: 'icon.png', //显示在标题前面的小图标
iconBig: 'icon-big.png', //显示在内容左侧的大图标
buttons: [{ text: '好怕怕', fn: function () { $.alert('我好怕怕呀')} }], //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {}
close: true//是否显示关闭按钮
});

七.下载

　　下面是我测试和使用的例子，感兴趣的朋友可以自己下载修改。

点击这里下载