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

< div class="btnBar">

',
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:'

システム プロンプト

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

< ;/div>',
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 の高さによる自動接続などを追加することで実現されます。强大的機能的。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7403

15

Java チュートリアル

1630

14

CakePHP チュートリアル

1358

52

Laravel チュートリアル

1268

25

PHP チュートリアル

1218

29

もっと見る