独自の jQuery プロンプトボックスを作成する (ヒント) plug-in

多くの学生が私と同じように、自分の目的のために jQuery を使用していると思います。それ以外に責められるべき理由はありません。それは、さまざまなプラグインが基本的に日常の要件を満たすことができるからです。しかし、結局のところ、これは長期的な解決策ではありません。「誰かに釣りを教えるよりも、誰かに釣りを教える方が良い」と。

これまで jQuery に触れたことのない学生の便宜のために、まず jQuery のプラグインメカニズムを確認してみましょう。

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

//プラグインのチェックを追加およびチェックを外します

jQuery.fn.extend({

チェック: function() {

return this.each(function() { this.checked = true; });

}、

チェックを外します: function() {

return this.each(function() { this.checked = false; });

}

});

//プラグインの使用

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

実際、jQuery プラグインは非常にシンプルです。私は、プラグインを作成することは非常に高度な問題であると常々思っていました。同じように感じている学生はいるだろうか。

行動を起こす前に需要分析をしましょう (追伸: 私はソフトウェアエンジニアリングを学ぶために生まれてきたので、授業料は非常にずるいです。需要分析をしなかったら、授業料で申し訳ありません、笑) ）。

実際、分析するのは簡単なことは何もありません。次の効果を作成するだけです:

マウスを置くと WeChat がポップアップしてスキャンします。WeChat は非常に人気があるので、上司から Web サイトに入れてほしいと頼まれました。そのため、彼を満足させるプラグインを作成しました。誰が私に給料を払ってくれるの、私と交渉しないでください、ITオタクは皆、完全に人生観を破壊し、全く誠実さを持っていない人々です。それは遠すぎます。レンダリングを見てみましょう。

使用方法は他の jQuery と変わりません:

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

$(関数(){
var t = $(".weixin").Tip({
title:'WeChat でスキャン',
content:'

',
html:true,
方向:'下'
});
t.bind({
マウスオーバー:関数(){
t.Tip("show"); }、
マウスアウト:function() {
t.Tip("hide");
}
});
});

構成可能なオプションを見てみましょう

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

デフォルトオプション:{
title: '',//タイトル
content: '',//Content
方向: 'bottom',//選択された要素を基準にしてポップアップを反転
//コンテンツがHTML要素になることを許可するかどうか
テンプレート: '

'//ポップアップボックステンプレート
}

最後に、興味があれば、高解像度の無修正ソースコードを確認してください。興味がない場合は、Ctrl C または Ctrl V を押してください

。

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

'
        }
    }
    $.fn.Tip = 関数(オプション) {
        return this.each(function(){
            var e = $(this),
                data = e.data('tip'),
                オプション = タイプのオプション == "オブジェクト" && オプション;
            if (!data) e.data("tip", new Tip(this,options));
            if (オプションのタイプ == '文字列') データ[オプション]();
        });
    }
}(window.jQuery);

css样式

复制代码代码如下:

.tip {

位置: 絶対;

パディング: 3px;

背景: #efefef;

境界半径: 2px;

上: 0px;

左: 0px;

}

.tip .tip-inner {

背景: #fafafb;

境界線: 1 ピクセルの実線 #d8d8d8;

}

.tip .tip-inner h3 {

フォントサイズ: 14px;

パディング: 5px;

border-bottom: 1px ソリッド #eee;

}

.tip .tip-inner .tip-container {

パディング: 5px;

}