JQuery) extension of one of the jQuery series to simulate alert, confirm (1) _ jquery

Many people choose to encapsulate their own alert component in order to make the calling functions of the alert system within their own control scope. Now we can implement such a small component.

All code

The Code is as follows:

/**
* @ Author xing
*/
(Function ($ ){
$. Extend ({
Alert: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('alert ', callback, html );
},
Confirm: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('Confirm', callback, html );
}
});
Var Dialog = function (){
Var render = {
Template :'

System prompt

Your operation has an error!

',
TemplateConfirm :'

System prompt

Your operation has an error!

',
/**
* Generate a dialog box as needed
* @ Param {Object} type
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderDialog: function (type, callback, html ){
If (type = 'alert '){
This. renderAlert (callback, html );
} Else {
This. renderConfirm (callback, html );
}
},
/**
* Generate alert
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderAlert: function (callback, html ){
Var temp = $ (this. template). clone (). hide ();
Temp.find('p.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('alert ', temp, callback );
},
/**
* Generate confirm
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderConfirm: function (callback, html ){
Var temp = $ (this. templateConfirm). clone (). hide ();
Temp.find('p.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('Confirm', temp, callback );
},
/**
* Set the location of the dialog box.
* @ Param {Object} el
*/
SetPosition: function (el ){
Var width = el. width (),
Height = el. height (),
PageSize = this. getPageSize ();
El.css ({
Top :( pageSize. h-height)/2,
Left :( pageSize. w-width)/2
});
},
/**
* Bind events
* @ Param {Object} type
* @ Param {Object} el
* @ Param {Object} callback
*/
BindEvents: function (type, el, callback ){
If (type = "alert "){
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('P. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('P. alertparent'). remove ();
});
}
} Else {
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('P. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('P. alertparent'). remove ();
});
}
$ ('# Cancel'). click (function (){
$ ('P. alertparent'). remove ();
});
}
},
/**
* Get the page size
*/
GetPageSize: function (){
Return {
W: document.doc umentElement. clientWidth,
H: document.doc umentElement. clientHeight
}
}
}
Return {
Build: function (type, callback, html ){
Render. renderDialog (type, callback, html );
}
}
}
}) (JQuery );

Because our alert does not require selector support, we use the $. extend statement.

The Code is as follows:

$. Extend ({
Alert: function (html, callback ){
},
Confirm: function (html, callback ){
}
});

Next, we declare a monomer to generate this component to the page. This monomer returns a public method build to create this component.

The Code is as follows:

Var Dialog = function (){
Return {
Build: function (type, callback, html ){
Render. renderDialog (type, callback, html );
}
}
}

Next, we declare the HTML string of the component separately.

The Code is as follows:

Var render = {
Template :'

System prompt

Your operation has an error!

',
TemplateConfirm :'

Id = "confirmPanel">

System prompt

Your operation has an error!

Id = "cancel"/>

'}

Filling in

The Code is as follows:

/**
* Generate a dialog box as needed
* @ Param {Object} type
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderDialog: function (type, callback, html ){
If (type = 'alert '){
This. renderAlert (callback, html );
} Else {
This. renderConfirm (callback, html );
}
},
/**
* Generate alert
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderAlert: function (callback, html ){
Var temp = $ (this. template). clone (). hide ();
Temp.find('p.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('alert ', temp, callback );
},
/**
* Generate confirm
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderConfirm: function (callback, html ){
Var temp = $ (this. templateConfirm). clone (). hide ();
Temp.find('p.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('Confirm', temp, callback );
},
/**
* Set the location of the dialog box.
* @ Param {Object} el
*/
SetPosition: function (el ){
Var width = el. width (),
Height = el. height (),
PageSize = this. getPageSize ();
El.css ({
Top :( pageSize. h-height)/2,
Left :( pageSize. w-width)/2
});
},
/**
* Bind events
* @ Param {Object} type
* @ Param {Object} el
* @ Param {Object} callback
*/
BindEvents: function (type, el, callback ){
If (type = "alert "){
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('P. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('P. alertparent'). remove ();
});
}
} Else {
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('P. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('P. alertparent'). remove ();
});
}
$ ('# Cancel'). click (function (){
$ ('P. alertparent'). remove ();
});
}
},
/**
* Get the page size
*/
GetPageSize: function (){
Return {
W: document.doc umentElement. clientWidth,
H: document.doc umentElement. clientHeight
}
}

Next is the implementation of the dialog box.

The Code is as follows:

$. Extend ({
Alert: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('alert ', callback, html );
},
Confirm: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('Confirm', callback, html );
}
});

Call method:

The Code is as follows:

$. Confirm ('Are you sure you want to delete? ', Function (){
Alert ('cccc ');
});

$. Alert ('My id ');

CSS and HTML

The Code is as follows:

P. alertParent {
Padding: 6px;
Background: # ccc;
Background: rgba (201,201,201, 0.8 );
Width: auto;
Position: absolute;
-Moz-border-radius: 3px;
Font-size: 12px;
Top: 50px;
Left: 50px;
}
P. alertContent {
Background: # fff;
Width: 350px;
Height: auto;
Border: 1px solid #999;
}
H2.title {
Width: 100%;
Height: 28px;
Background: #0698E9;
Text-indent: 10px;
Font-size: 12px;
Color: # fff;
Line-height: 28px;
Margin: 0;
}
P. alertHtml {
Background: url(dtips.gif) 0 0 no-repeat;
Height: 50px;
Margin: 10px;
Margin-left: 30px;
Text-indent: 50px;
Line-height: 50px;
Font-size: 14px;
}
P. btnBar {
Border-top: 1px solid # c6c6c6;
Background: # f8f8f8;
Height: 30px;
}
P. btnBar input {
Background: url(sure.png) no-repeat;
Border: 0;
Width: 63px;
Height: 28px;
Float: right;
Margin-right: 5px;
}

Html

The Code is as follows:

System prompt

Your operation has an error!

Type = "button" value = "OK"/>

Do not laugh. To illustrate the implementation method, I did not improve the Code carefully. I only wrote it within half an hour of writing, so I did not think about it in many places, there are a lot of flaws, and the simulation of alert is implemented in a stupid way, but next time we will implement a component by building a Button, a mask will be added, ajax calls, iframe width and height adaptive and other more powerful functions.