JavaScriptプラグイン開発チュートリアル(5)_JavaScriptスキル-jsチュートリアル-php.cn

JavaScriptプラグイン開発チュートリアル(5)_JavaScriptスキル

WBOY

リリース： 2016-05-16 16:16:36

オリジナル

1225 人が閲覧しました

1、分析を開始します

皆さん、こんにちは！最初の 2 つの記事では、主に「jQuery を使用してプラグインを開発する方法」と、手続き型設計とオブジェクト指向設計を組み合わせてプラグインを設計する方法について説明しました。どちらの方法にも、それぞれ長所と短所があります。おい、ナンセンス。あまり言わずに本題へ。実際のレンダリングを直接アップロードします:

ご覧のとおり、これはドロップダウンメニューのプラグインです。日々の開発では、システムが提供するものはあまり美しくなく、機能が限られているとユーザーに思わせることがあります。

体験フォームとユーザーのインタラクティブ性があまり良くないので、今日はヘイヘイをシミュレートします。以下で詳しく分析してみましょう。

(2)、分析例

(1)、まずこのプラグインが何を行うかを決定します。プラグインの呼び出し方法と構成パラメーターの説明を見てみましょう。次のコード:

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

$(関数(){
var itemSelector = new itemSelector($("#item-selector"),{
currentText: "項目を選択してください" ,
アイテム: [
{
テキスト: "JavaScript" ,
値: "js" ,
無効: "1"
{
テキスト: "Css" ,
値: "css" ,
無効: "0"
{
テキスト: "HTML" ,
値: "html" ,
無効: "0"
}
]、
mode: "0", // "1" の場合、チェックボックスの複数選択モードをサポートします
変更: function(value){
// ここにコードを入力してください
}
}) ;
itemSelector.init() ;
setTimeout(function(){
console.log(itemSelector.getCurrentValue()); // 現在選択されている項目を取得するテスト
},2000) ;

「var itemSelector = new itemSelector()」には 2 つのパラメータが含まれています。1 つ目は dom ノードオブジェクトで、2 つ目は「currentText」で選択されたテキスト表示領域のテキストを表します。「ItemSelector」プラグインについて説明します。

「items」は、テキストの説明やオプション値を含む「ItemSelector」項目のプロパティを含む配列です。「無効」はリスト項目の可視性を表し、0 は表示可能を表し、1 は表示不可を表します。

「change」は選択時の操作コールバック関数を表し、オプションデータはパラメータの形式で返されます。

(2)、関連する機能は何ですか

表示可能なレンダリングは次のとおりです:

表示できないレンダリングは次のとおりです:

この 2 つの違いは、表示不可能なステータスデータは返されず、フローティングしても何の効果もありません。

3)、学習用の完全なコード このコードは、ディレクトリ構造と関連ファイルを含めてテストされています。

（1）、html

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

Big Bear {{bb}} - DXJ UI ------ ItemSelector

＆lt; div＆gt;＆lt;/div＆gt;＆lt; span＆gt;↓＆lt;/span＆gt;

(2)、CSS

コードをコピー

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

 /* 項目セレクター */ 

 #it​​em-selector {

     マージン: 0 自動;

     幅: 220px ;

     オーバーフロー:非表示;

     ボーダー:2px ソリッド #ccc;

 }

 #it​​em-selector .title {

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

     オーバーフロー:非表示;

 }

 #it​​em-selector .title div {

     幅:190px;

     ボーダー:0px ;

     色:#999;

     フォントファミリー: arial ;

     フォントサイズ: 14px;

     高さ:28px;

     行の高さ:28px;

     float:left;

     カーソル:ポインタ;

 }

 #it​​em-selector .title スパン {

     表示:ブロック;

     高さ:30px;

     行の高さ:30px;

     幅:29px;

     float:left;

     text-align:center;

     border-left:1px ソリッド #ccc;

     カーソル:ポインタ;

 }

 #it​​em-selector .content {

     幅: 220px ;

     オーバーフロー:非表示;

 }

 #it​​em-selector .content .items {

     オーバーフロー:非表示;

 }

 #it​​em-selector .content .items div {

     パディング左:20px;

     幅: 200px ;

     高さ:32px;

     行の高さ:32px;

     フォントファミリー: "微软雅黑" ;

     フォントサイズ: 14px;

     フォントの太さ:太字;

     カーソル:ポインタ;

 }

 .item-hover {

     背景:#3385ff;

     色:#fff;

 }

（3）、「ItemSelector.js」

复制代码代码如下:

functionItemSelector(elem,opts){

    this.elem = elem ;

    this.opts = オプト ;

} ;

var ISProto = ItemSelector.prototype ;

ISProto.getElem = function(){

    this.elem を返します ;

} ;

ISProto.getOpts = function(){

    this.opts を返します ;

} ;

/* データ操作*/

ISProto._setCurrent = function(current){

    this.getOpts()["current"] = 現在 ;

} ;

ISProto.getCurrentValue = function(current){

    return this.getOpts()["current"] ;

} ;

/* データ操作*/

ISProto.init = function(){

    var that = this ;

    this.getOpts()["current"] = null ; // データ塊游标

    this._setItemValue(this.getOpts()["currentText"]) ;

    var itemsElem = that.getElem().find(".content .items") ;

    this.getElem().find(".title div").on("click",function(){

        itemsElem.toggle() ;

    }) ;

    this.getElem().find(".タイトルスパン").on("クリック",function(){

        itemsElem.toggle() ;

    }) ;

    $.each(this.getOpts()["items"],function(i,item){

        item["id"] = (new Date().getTime()).toString() ;

        that._render(アイテム) ;

    }) ;

} ;

ISProto._setItemValue = 関数(値){

    this.getElem().find(".title div").text(value)

} ;

ISProto._render = function(item){

    var that = this ;

    var itemElem = $("
")

    .text(アイテム["テキスト"])

    .attr("id",item["id"]) ;

    if("0" == item["無効"]){

        itemElem.on("クリック",function(){

            var onChange = that.getOpts()["変更"] ;

            that.getElem().find(".content .items").hide() ;

            that._setItemValue(item["text"]) ;

            that._setCurrent(item) ;

            onChange && onChange(item) ;

        })

        .mouseover(function(){

            $(this).addClass("item-hover") ;

        })

        .mouseout(function(){

            $(this).removeClass("item-hover") ;

        }) ;

    }

    それ以外{

        itemElem.css("color","#ccc").on("click",function(){

            that.getElem().find(".content .items").hide() ;

            that._setItemValue(item["text"]) ;

        }) ;

    }

    itemElem.appendTo(this.getElem().find(".content .items")) ;

} ;