jQuery ベースのポップアップメッセージプラグインの DivAlert の旅 (1)

jQuery ベースのポップアップメッセージプラグインの DivAlert の旅 (1)_jquery

WBOY

リリース： 2016-05-16 18:30:41

オリジナル

978 人が閲覧しました

しばらく Javascript、Ajax、jQuery などを学ぼうと思っていたのですが、jQuery の公式 Web サイトで目を引くプラグインをたくさん見て、まだプラグインを書いていないようです。今日は、似たようなプラグインを見てみましょう。jQuery プラグインの基本的な形式を理解したので、基本的なアイデアを整理して作業を始めましょう。。。
この DivAlert プラグインは、名前が示すように、ページポップアップボックスであり、Winform の MessageBox.Show() などに相当します。
まず、最も基本的なパラメータのいくつかを定義しましょう:
プラグインの初期化

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

 
(function($) { 
$.jDivAlert = function(o) { 
//基本的なプラグイン情報を設定します
var options = o || {}; 
 options.width = o.width || 
options.title = o.title || "プロンプトタイトル"; >options.content = o .content || "プロンプト コンテンツ"; 

 
 次に、再利用できるようにページ要素を作成するメソッドを定義します (js と略します)。 🎜>

コードをコピー

コードは次のとおりです。 function createElement(obj) { return $(document.createElement( obj)); }

背景 div を作成し、スタイルを設定します

コードをコピーします

コードは次のとおりです。 var $bgDiv = createElement('div') .css({ 'position': 'absolute', 'top': ' 0'、'left': '0'、'z-index': '9999'、'filter': 'alpha(opacity=70)'、'backgroundColor': '#999'、'opacity': '0.7' , 'width': document.documentElement.clientWidth "px", 'height': document.documentElement.clientHeight "px" }) .appendTo('body');

プロンプトの作成div

コードをコピー

コードは次のとおりです。 var $outDiv = createElement('div ') .css({ 'position': 'absolute', 'top': ($(window).height() - options.height) / 2 $(window).scrollTop() 'px', ' left': ($(window).width() - options.width) / 2 $(window).scrollLeft() 'px', 'border': '1px ソリッド #cef', 'zIndex': '10000', 'width': options.width 'px', 'height': options.height 'px', 'overflow': 'hidden' }) .appendTo('body'); >プロンプト div のタイトル部分を作成します

コードをコピーします

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

var $titDiv = createElement("div") .css({ 'textAlign': ' left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' }) .html(options.title) .appendTo($outDiv);

プロンプトのコンテンツ部分 div

コードをコピー

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

var $conDiv = createElement("div") .css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv. externalHeight() }) .html(options.content) .appendTo($outDiv);

閉じるボタンを作成します

コードをコピー

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

var $ clsBtn = createElement("img") .attr('src', ' del.gif') .css({ 'cursor': 'pointer', 'float': 'right' }) .click(close) .appendTo($titDiv) ;

 ポップアップ ボックスを閉じるイベントを作成します: 

コードをコピーします

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

関数 close() { $bgDiv.fadeOut(); } } })(jQuery); >

効果を確認するには、ページのスクリプト部分に次のコードを追加するだけです (もちろん jQuery ライブラリファイルは必須です。最新バージョンは 1.4 です。 2. 公式 Web サイトからダウンロードできます) http://www.jQuery.com):

コードをコピーします 

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

 
$(document).ready(function() { 
$.jDivAlert({ 
width: 300, 
height: 300 
}); 
}); 

It seems that there are still many functions to be improved, hey. . Keep up the good work. . .
Package download address

JQuery-based pop-up message plug-in DivAlert journey (1)

jQuery-based message prompt Plug-in DivAlert Tour (2)

jQuery-based message prompt plug-in DivAlert Tour (3) Recommended

jQuery ベースのポップアップ メッセージ プラグインの DivAlert の旅 (1)_jquery

jQuery ベースのポップアップメッセージプラグインの DivAlert の旅 (1)_jquery