jQuery) アラートをシミュレートするために jQuery シリーズの 1 つを拡張します。 (1)_jquery を確認します

Rendering

All codes

Copy 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

An error occurred in your operation

',
templateConfirm :'

System prompt

An error occurred in your operation!

',
/**
* 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 );
}
},
/**
* 生成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);
},
/**
* 生成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 position 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 event
* @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 it like this

Copy code The code is as follows:

$.extend({
alert:function( html,callback){
},
confirm:function(html,callback){
}
});

Secondly we declare a singleton to generate this Component to the page, this singleton returns a public method build to create this component

Copy the code The code is as follows:

var Dialog=function(){
return {
build:function(type,callback,html){
render.renderDialog(type,callback,html);
}
}
}

次に、コンポーネントの HTML 文字列を個別に宣言します。

コードをコピーします。 コードは次のとおりです。

var render={
template:'

システム プロンプト h2>

操作でエラーが発生しました。

',
templateconfirm:'

id="confirmPanel">

操作でエラーが発生しました。

id="cancel"/>

内部のメソッドを塗りつぶします

コードをコピーします コードは次のとおりです:

/**
* 必要に応じてダイアログ ボックスを生成します
* @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); 🎜> }
},
/**
* アラート生成
* @param {Object} コールバック
* @param {Object} html
*/
renderAlert:function(callback,html){
var temp=$(this.template).clone().hide( );
temp.find('div.alertHtml').html(html);
$(document.body).append(temp); .fadeIn ();
this.bindEvents('alert',temp,callback);
/**
* 生成確認
* @param {Object} コールバック
* @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);
this.bindEvents('confirm',
/**)
* ダイアログボックスの位置を設定します
* @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
}); /* *
* バインディングイベント
* @param {Object} type
* @param {Object} el
* @param {Object} コールバック
*/
bindEvents:function(type,el,callback){
if(type=="alert"){
if($.isFunction(callback)){
$ ('#sure').click(function(){
callback();
$('div.alertParent').remove();
});
$('#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();
});
},
/**
* ページサイズを取得
*/
getPageSize:function(){
return {
w:document.documentElement.clientWidth,
h:document.documentElement. clientHeight
}
}


次のステップは、ダイアログ ボックスを実装することです




コードをコピー


コードは次のとおりです:

$.extend({
alert:function(html,callback){
var Dialog=new Dialog();

dialog.build ('alert', callback,html); }, confirm:function(html,callback){ vardialog=new Dialog(); dialog.build('confirm',callback) ,html); } });

コードをコピーします


🎜> コードは次のとおりです:


$.confirm('削除してもよろしいですか? ',function(){
alert('cccc')
});

$.alert('マイ コンピュータ');

最後に CSS と HTML です

コードをコピーします


コードは次のとおりです:

div.alertParent{
padding:6px;
背景:#ccc;
背景:rgba(201,201,201,0.8);
幅:自動;
位置:絶対;
-moz-border-radius:3px;
フォントサイズ:12px;
トップ:50ピクセル;
左:50ピクセル;
}
div.alertContent{
background:#fff;
幅:350ピクセル;
高さ:自動;
ボーダー:1px ソリッド #999;
}
h2.title{
width:100%;
高さ:28px;
背景:#0698E9;
テキストインデント:10px;
フォントサイズ:12px;
色:#fff;
行の高さ:28px;
マージン:0;
}
div.alertHtml{
background:url(dtips.gif) 0 0 繰り返しなし;
高さ:50ピクセル;
マージン:10px;
マージン左:30px;
テキストインデント:50px;
行の高さ:50px;
フォントサイズ:14px;
}
div.btnBar{
border-top:1px Solid #c6c6c6;
背景:#f8f8f8;
高さ:30px;
}
div.btnBar input{
background:url(sure.png) no-repeat;
ボーダー:0;
幅:63px;
高さ:28px;
float:right;
margin-right:5px;
}

html

复制代码代码如下:

システム提案

你的操作が発生しました！

type="button" value="确定"/>

高手もったいない笑，说明实现的方式，我并不有仔细的去完善这段代序，仅仅是在写作半時間内写出的，所以有很多地方不去思考，非常に多くの漏洩があり、この模倣のアラートは、次回はボタンを構築する方法で構築され、遮蔽、ajax の使用、iframe の高さによる自動接続などを追加することで実現されます。强大的機能的。