ホームページ > 記事 > ウェブフロントエンド > 独自の jQuery プロンプト ボックスを作成する (ヒント) plug-in_jquery
独自の jQuery プロンプト ボックスを作成する (ヒント) plug-in_jquery
- WBOYオリジナル
- 2016-05-16 16:15:571488ブラウズ
多くの学生が私と同じように、自分の目的のために 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要素になることを許可するかどうか
テンプレート: '
}
。
!function($){
var Tip = function(要素, オプション){
this.init(要素, オプション);
}
Tip.prototype = {
コンストラクター : ヒント、
init : function(要素, オプション){
this.element = $(要素);
this.options = $.extend({},this.defaultOptions,options);
}、
show : function() {
if (!this.tip) {
this.tip = this.getTip();
var title = this.tip.find("h3"),
コンテナ = this.tip.find(".tip-container");
//設置标题
title.text(this.options.title);
//コンテンツを設定します
if (this.options.html) {
コンテナ.html(this.options.content);
} else {
コンテナ.テキスト(this.options.content);
}
// 本体にチップを追加
$("body").append(this.tip);
//計算ヒントの位置
var eLeft = this.element.offset().left,
eTop = this.element.offset().top,
eWidth = this.element.innerWidth(),
eHeight = this.element.innerHeight(),
tipw = this.tip[0].offsetWidth,
ヒント = this.tip[0].offsetHeight,
トップ、
左;
switch(this.options.direction) {
ケース 'トップ' :
トップ = eTop - ヒント;
left = (eLeft -tipw/2) eWidth/2;
this.tip.css({上: 上, 左: 左});
休憩;
ケース「左」:
トップ = (eTop - ティフ/2) eHeight/2;
left = eLeft -tipw;
this.tip.css({上: 上, 左: 左});
休憩;
ケース「底部」:
トップ = eTop eHeight;
left = (eLeft -tipw/2) eWidth/2;
this.tip.css({上: 上, 左: 左});
休憩;
ケース「正しい」:
トップ = (eTop - ティフ/2) eHeight/2;
left = eLeft eWidth;
this.tip.css({上: 上, 左: 左});
休憩;
デフォルト:
休憩;
}
} else {
this.tip.css({display:'block'});
}
}、
非表示: function() {
this.getTip().css({display:"none"});
}、
getTip : function() {
このヒントを返しますか? this.tip : $(this.options.template);
}、
デタッチ : function() {
}、
デフォルトオプション:{
タイトル : ''、
内容: ''、
方向: '下'、
html : false、
テンプレート: '
}
}
$.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;
}
この記事の内容は以上です。jQuery プラグインの作成方法について新たに理解できたでしょうか。この記事が気に入っていただければ幸いです。