jquery) extends one of the jquery series Simulations alert,confirm (i) _jquery

Effect chart

All code

Copy Code code 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: ' <div class= "alertparent" ><div class= "alertcontent" >

Templateconfirm: "<div class=" alertparent "id=" Confirmpanel "><div class=" alertcontent ">

/**
* Generate dialog boxes 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 (' div.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 (' div.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
});
},
/**
* Binding 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 ();
$ (' div.alertparent '). Remove ();
});
}else{
$ (' #sure '). Click (function () {
$ (' div.alertparent '). Remove ();
});
}
}else{
if ($.isfunction (callback)) {
$ (' #sure '). Click (function () {
Callback ();
$ (' div.alertparent '). Remove ();
});
}else{
$ (' #sure '). Click (function () {
$ (' div.alertparent '). Remove ();
});
}
$ (' #cancel '). Click (function () {
$ (' div.alertparent '). Remove ();
});
}
},
/**
* Get page size
*/
Getpagesize:function () {
return {
W:document.documentelement.clientwidth,
H:document.documentelement.clientheight
}
}
}
return {
Build:function (type,callback,html) {
Render.renderdialog (type,callback,html);
}
}
}
}) (JQuery);

Because our alert does not require selector support, we use $.extend to declare

Copy Code code as follows:

$.extend ({
Alert:function (Html,callback) {
},
Confirm:function (Html,callback) {
}
});

Second, we declare a monomer to generate this component to the page, and this monomer returns a common method build to create this component

Copy Code code as follows:

var dialog=function () {
return {
Build:function (type,callback,html) {
Render.renderdialog (type,callback,html);
}
}
}

Next we declare the component's HTML string separately

Copy Code code as follows:

var render={<br> template: "<div class=" alertparent "><div class=" alertcontent ">

</div><div class= "Btnbar" ><input type= "button" value= "OK" id= "sure"/></div></div> </div> ',<br> templateconfirm: ' <div class= ' alertparent '
Id= "Confirmpanel" ><div class= "alertcontent" >

Id= "Cancel"/><input type= "button" value= "OK" id= "sure"/></div></div></div> "}<BR>"

Fill the Inside method

Copy Code code as follows:

/**
* Generate dialog boxes 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 (' div.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 (' div.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
});
},
/**
* Binding 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 ();
$ (' div.alertparent '). Remove ();
});
}else{
$ (' #sure '). Click (function () {
$ (' div.alertparent '). Remove ();
});
}
}else{
if ($.isfunction (callback)) {
$ (' #sure '). Click (function () {
Callback ();
$ (' div.alertparent '). Remove ();
});
}else{
$ (' #sure '). Click (function () {
$ (' div.alertparent '). Remove ();
});
}
$ (' #cancel '). Click (function () {
$ (' div.alertparent '). Remove ();
});
}
},
/**
* Get page size
*/
Getpagesize:function () {
return {
W:document.documentelement.clientwidth,
H:document.documentelement.clientheight
}
}

The next step is the implementation of the dialog box

Copy Code code 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:

Copy Code code as follows:

$.confirm (' OK delete? ', function () {
Alert (' CCCC ');
});

$.alert (' My Computer ');

The last is CSS and HTML.

Copy Code code as follows:

div.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;
}
div.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;
}
div.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;
}
div.btnbar{
border-top:1px solid #c6c6c6;
Background: #f8f8f8;
height:30px;
}
Div.btnbar input{
Background:url (sure.png) no-repeat;
border:0;
width:63px;
height:28px;
Float:right;
margin-right:5px;
}

Html

Copy Code code as follows:

<div class= "alertparent" ><br><div class= "alertcontent" ><br>

Type= "button" value= "OK"/><br></div><br></div><br> </div><BR>

Master do not laugh, in order to illustrate the way to achieve, I did not carefully to improve this code, only in writing half an hour to write, so there are many places do not think, there are many flaws, and in a relatively stupid way to achieve this simulation of alert, But next time we'll build a button to implement a component that will add masks, Ajax calls, and more powerful features like the iframe width is highly adaptive.