jQuery プラグイン開発の学習は実践から始まります ダイアログ プラグイン開発_jquery

前書き:
私がこの記事を書いた理由は、私の考えを皆さんと共有するためです。初心者にとっては、この記事から何か役立つことを願っています。また、経験豊富な開発者にとっては、私の欠点や欠点を指摘してもらえることを願っています。もっと意見や提案をしてください。目的は、一緒に進歩することです。

1. どのようなプラグインを使用すればよいですか?
ブラウザのデフォルトのポップアップ ダイアログ ボックスまたはフォーム (window.alert、window.confirm、window を呼び出すことでポップアップする Web ページのダイアログ ボックス) を置き換えることができるプラグインを実装したいと考えています。 .prompt。window.open、window.showModalDialog、window.showModelessDialog を呼び出すことによってポップアップするフォーム。

その理由は、ブラウザのデフォルトのダイアログ ボックスの機能が単純で、ユーザー エクスペリエンスが不十分であるためです。最近のブラウザの多くは、デフォルトでポップアップ ウィンドウをブロックします (おそらく、過去にポップアップ広告が蔓延しすぎたためでしょう。2003 年と 40 年に、XX の Web サイトに大量のウィンドウがポップアップ表示されるのを見たときのことを今でも覚えています。それらを閉じることさえできず、すべてのマシンが停止し、コンピューターさえもクラッシュしました。

2. 望ましい効果は何ですか?
ダイアログ ボックス プラグインに関しては、ブラウザごとに表示スタイルに多少の違いがあることは周知のとおりですが、基本的なレイアウト構造は同じです。このプラグインの望ましい効果は、どのブラウザでも表示されるスタイルとレイアウト構造が一貫しており、ブラウザの中央に配置されることです (ユーザーが初めて見ることができるように)。
ポップアップ フォームは実装時のダイアログ ボックスに似ています (ブラウザのデフォルト実装ではなく、開発したいプラグインを指します)。

3. 関数を設計します
画像を見てステップごとに説明します。

1. ページのコンテンツをブロックします (灰色の半透明)。画像の一部 )、透明度を設定できます (不透明 0 ～ 1 完全透明)。これの利点は、ユーザーがダイアログ ボックスを閉じるまでページを操作できないことです。
2. ダイアログボックスが中央に表示され、ダイアログボックスのサイズ(高さと幅)を設定できます。
3. 画像の(1)と(2)はダイアログボックスのアイコンで、どちらも設定可能です。
4. ダイアログボックスのタイトルと内容を設定できます。
5.閉じるボタン(×)が表示されません。
6. 下部ボタンは 0 個以上あり、それらにコールバック関数を設定できます。

4. 機能を実装するには?
1. CSS スタイルを使用して外観を制御します。
*CSS 名の競合を避けるために、プラグインの名前空間を決定する必要があります。その下のすべてのスタイルはこの名前空間の下にあります。
2. すべてのコンテンツをブロック
※CSSで基本スタイルを設定します。

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

position:absolute
left: 0;
トップ:0;
z-index:99999;
*ここで、z-index の値には安全な範囲があることに注意してください。Microsoft の指示によると、「最大値は IE6、7、8 では 2147483647 ですが、Safari 3 では 16777271 なので、安全な値です。」ブラウザの最大値は 16777271 です。」 一般的な考え方として、IE6、7、および 8 でサポートされる最大値は 2147483647 ですが、Safari 3 は 16777271 であるため、念のため 16777271 を超えないようにしてください。

* js コードを使用して幅と高さを設定します。$(document).width() を通じてページの幅を取得し、$(document).height() を通じてページの高さを取得します。
3. ダイアログボックスを中央に表示する

ダイアログボックスを中央に表示するには 2 つの方法があります。
1 つは CSS を使用する方法です。
位置: 絶対; ページにスクロール バーがある場合、スクロール バーがスクロールするとダイアログ ボックスも移動します。
位置: 固定。どのようにスクロールしても、ダイアログ ボックスが常にページの中央に表示されるのが理想的です。唯一の欠点は、IE6 をサポートしていないことです (IE6 と互換性を持たせるための方法がインターネット上にあります)。 、興味のある友人が自分で実装できます）。
2 つ目は、js スクリプトを介して制御することです。
ページの長さと幅を計算して配置が行われるため、ページ サイズが変更されてもダイアログ ボックスの位置は変更されず、その効果は理想的ではありません。 (もちろん、ページの変更を監視して位置を自動的に調整することもできますが、実装するのはさらに面倒です。興味のある友達は自分で試してみてください)

5. ブラウザの互換性

ブラウザの互換性は最も厄介な点ですが、そうは言っても、最も理想的な効果は、もちろんすべてのブラウザと互換性があることですが、実際には、もっと時間を費やせば、実際にすべてのブラウザと互換性を持たせることができます。しかし、それだけの価値はあるでしょうか？ Web デザイナーに最も嫌いなブラウザは何ですか?ほとんどの人は IE6 と答えると思います。このブラウザはかつて世界中で人気があり、世界中のユーザーのコンピュータの 90% 以上を占めていました。大丈夫、どうでもいいのですが、確かに一時は世界で最も人気のあるブラウザでした。しかし現在、開発者の目から見て、このブラウザは最も人気のないブラウザです。世界の平均使用率は 5% を超えませんが、中国では 20% 以上のユーザーが依然としてこのブラウザを使用しています (http://www.ie6countdown .com/ より)。統計）、これはなぜですか?もし同じ機能が IE6 などの古いバージョンのブラウザと互換性があるとしたら、私たちは人生の 3 分の 1 以上を費やすことになるでしょう、皆さん、限られた時間をより良いものを作るために使ってみてはいかがでしょうか。もの？ IE6 を殺すのは私から始まります!

6. 関数の実装と呼び出し

CSS 部分

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

JS 部分




コードをコピー


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

(function ($) {
$.alert = function (options) {

if (typeof options === 'string') options = { content: options };
var opts = $.extend({}, $.alert.defaults, options);

if (opts.content == null || opts.content.length == 0) return this; 🎜>
var me = $('

').addClass('ctcx-dialog').appendTo(document.body);
$('

').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height( )).appendTo(me);
var _dialog_ = $('

').css({
width: opts.width,
高さ: opts.height,
marginLeft: 0 - opts.width / 2,
marginTop: 0 - opts.height / 2
}).appendTo(me); '

').appendTo(_dialog_);

var _titleWidth_ = opts.width - 0;
if (opts.icon != null ) {
$('

').css('background-image', 'url(' opts.icon ')').appendTo(_bar_) ;
_titleWidth_ -= 25;
}
if (opts.close) _titleWidth_ -= 20;
$('

').css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_);
if (opts.close) {
$('

').click(function () {
me.remove();
}).appendTo(_bar_);
}

var _containerHeight_ = opts.height - 40;
var _container_ = $('

').appendTo(_dialog_);
var _contentCss_ = {};
if (opts.iconBig != null) {
$('

').css('background-image', 'url(' opts .iconBig ')').appendTo(_container_);
_contentCss_.top = -48;
_contentCss_.marginLeft = 48;
}
var _content_ = $('

').css(_contentCss_).html(opts.content).appendTo(_container_);

if (opts.buttons != null && opts.buttons.length > 0) {
_containerHeight_ -= 30;
var _buttons_ = $('

').appendTo(_dialog_);
$.each(opts.buttons, function (i, _button) {
$('' _button.text '').click (function () {
_button.fn(me);
}).appendTo(_buttons_);
})
}
_container_.css({ height: _containerHeight_ });

this.close = function () {
me.remove();
}

this.setContent = function (コンテンツ) {
_content_.html(コンテンツ);
}

これを返します;
}
//設置默认パラメータ
$.alert.defaults = {
title: '情報提示', //对话框标题
content: null, //对话框内容
width: 200, //宽
height: 100, //高
opacity: 0.5, //透明度
icon: null, //标题前面の小图标
iconBig: null, //コンテンツ左側に表示される大図标
ボタン: null, //按钮集合[{text:'按钮显表示文字',fn:回调関数(event)}],event = {}
close: true//是否显表示关闭按钮
}
})(jQuery);


调用

复制代码代码如下: $。 alert({

title: '火星向你発行警告', //对话框标题

content: '我们是火星人，我们要就入侵地球了，你们準备好了吗?', //对话框内容
width: 300, //宽
height: 150, //高
opacity: 0.5, //透明度
icon: 'icon.png', //显示在标题前面的小图标
iconBig: 'icon-big.png', //コンテンツ左側にある大图标
ボタン: [{ text: '好怕怕', fn: function () { $.alert( '我好怕怕呀')} }], //按钮集合[{text:'按钮显示文字',fn:回调関数数(event)}],event = {}
close: true//是否显示关闭按钮
});



七.ダウンロード

以下は私が試した例と使用した例です、感銘を受けた朋友は自己ダウンロード修正を行うことができます。

点击这里下ダウンロード