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

多くの学生が私と同じように、自分の目的のために 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 を押してください

。

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

!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 プラグインの作成方法について新たに理解できたでしょうか。この記事が気に入っていただければ幸いです。

声明：

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

前の記事：jQueryMobile の Helloworld とページ切り替えメソッド_jquery次の記事：jQueryMobile の Helloworld とページ切り替えメソッド_jquery

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved