jsオブジェクト指向カプセル化カスケードドロップダウンメニューリストの実装手順

この例で開発されたカスケードドロップダウンメニューは、既存の JSON データに基づいて作成された DOM 要素です。テキストボックスをクリックすると、第 1 レベルのメニューが表示されます。メニューにサブメニューが含まれている場合は、メニューの右側にそれを示す矢印が表示されます。メニューをクリックすると、次のレベルのメニューが表示されます。メニューの下にサブメニューがない場合は、メニューを選択した後にテキストボックスに表示されます。

開いた後のカスケードメニューの効果は図のようになります。

例にパッケージされているプラグインを使用すると、プラグインを通じてカスケードドロップダウンメニューを自動的に生成するための入力要素のみが必要になります。HTML コードは次のとおりです。

 <div style="margin-top:100px;text-align:center;">
  <input type="text" id="input">
 </div>

次に、特定のカプセル化された js コードを実装する方法を見てみましょう。

1. カスケードメニューのコンストラクタを宣言する

コンストラクターは、テキストボックス要素とメニュー関連データの 2 つのパラメーターを渡す必要があります。

 //elemはテキストボックス、dataはメニュー関連のデータです function CascadeMenu(elem,data){

 }

2. コンストラクターでカスケードメニュー関連の要素を作成し、ページに配置します。具体的なコードは次のとおりです。

関数 CascadeMenu(要素,データ){
  //テキスト ボックスを取得します。this.eInput = elem;
  //テキスト ボックスを読み取り専用に設定します。this.eInput.setAttribute('readonly',true);
  //テキスト ボックスのプロンプトを設定します。this.eInput.placeholder = '選択してください';
  //テキスト ボックスの親要素を取得します。var eInputParent = this.eInput.parentNode;
  //カスケードメニューコンテナを作成します。this.eCascade = document.createElement('div');
  this.eCascade.className = 'cascade_container';
  //メニューのドロップダウン リスト コンテナーを作成します。this.eCascadeInto = document.createElement('div');
  this.eCascadeInto.className = 'cascade_into';
  //ドロップダウン リスト コンテナーはデフォルトで非表示です this.eCascadeInto.style.display = 'none';
  //各要素をページに配置します this.eCascade.appendChild(this.eInput);
  this.eCascade.appendChild(this.eCascadeInto);
  eInputParent.appendChild(this.eCascade);
  //メニューデータを取得します。this.aData = data;
  //選択されたメニューデータを記録します this.aSelected = [];
  //メニューが開いている状態。デフォルトは false で、非表示を意味します。this.bShow = false;
 }

3. テキストボックスにクリックイベントをバインドして、カスケードドロップダウンメニューを生成する

必要な要素をすべてページに配置したので、テキストボックスをクリックしてカスケードメニュー要素を表示または非表示にすることができます。
カスケードメニュー要素を表示する場合、カスケードドロップダウンメニューはデータによって生成される必要があります。
各クリックを生成する必要があるため、コンストラクターのプロトタイプにメソッドを追加できます。以下のように表示されます。

関数 CascadeMenu(要素,データ){
  /*…*/

  this.eInput.addEventListener('クリック',()=>{
   //メニューのオープン状態を判断する if(this.bShow){ 
    // 開いている場合はメニューを非表示にします this.eCascadeInto.style.display = 'none';
    //メニューのオープンステータスを変更します。this.bShow = false;
   }それ以外{
    //カスケードメニュー要素を表示します this.eCascadeInto.style.display = 'none';
    //選択したメニューデータを保存します。this.aSelected = this.eInput.value.split('>');
    //カスケードメニューを生成します this.generateMenu();
   }
  });
 }
 //データに基づいてカスケードメニューを生成するCascadeMenu.prototype.generateMenu = function(){
  //fnCreatHTMLでインスタンスオブジェクトを呼び出すときは、これを指す変数を宣言する必要があります
  var _self = これ;
  //サブメニューのグループがいくつあるかわからないので、再帰的に呼び出す関数を宣言する必要があります //data: 受信データ、step: 現在のレベル function fnCreatHTML(data,step){
   //サブメニューデータを保存するために使用されます var aChildArr = null;
   //メニューDOM文字列を生成します。var sHTML = '<ul>';
   //データをループする for(let i=0;i<data.length;i++){
    //サブメニューがあるかどうかを判断し、メニューの右側に矢印を表示するための子クラスを追加します。if (data[i].child) { 
     //現在の選択かどうかを判断します。選択されている場合は、curクラスを追加してサブメニューデータを保存します。if(data[i].name==this.aSelected[step]){
      データ i を子として保存します。
      sHTML += '<li class="child cur" data-po="'+step+'">';
     }それ以外{
      sHTML += '<li class="child" data-po="'+step+'">';
     }
    }それ以外{ 
     //サブメニューがない場合は、メニューリストに直接追加します sHTML += data[i].name == this.aSelected[step]?
                  '<li class="cur" data-po="'+step+'">':
                  '<li data-po="'+ステップ+'">';
    }
    //メニュー名を追加 sHTML += data[i].name;
    //現在のメニューを終了します sHTML += '</li>';
   }
   sHTML += '</ul>';
   //複数のメニューが選択されている場合は、サブメニューを生成する関数を再帰的に呼び出します。if(this.aSelected.length>step+1){
    sHTML += fnCreateHTML(aChildArr,ステップ+1);
   }
   sHTML を返します。
  }
  this.eCascadeInto.innerHTML = fnCreatHTML(this.aData,0);
 }

4. メニューを選択するためにメニューにイベントをバインドする

カスケードメニューには 2 つの種類があります。1 つはクリックするとサブメニューが表示されるタイプです。
1 つのタイプにはサブメニューがありません。クリックするとメニューが直接選択され、選択したメニューがレベル別にテキストボックスに表示されます。コードは次のようになります。

関数 CascadeMenu(要素,データ){
  /*…*/

  //イベント委任を使用してメニューを選択します this.eCascadeInto.addEventListener('click',(event)=>{
   //メニューを取得します var eTarget = event.target;
   //選択したレベルを取得します。var po = +eTarget.dataset.po;
   //現在の選択レベル以降のデータを削除します this.aSelected.splice(po+1,this.aSelected.length-(po+1));
   //現在選択されているデータを変更します this.aSelected[po] = eTarget.innerHTML;
   //サブメニューがあるかどうかを判断します if(eTarget.className.indexOf('child')==-1){ //サブメニューがない場合は直接選択します this.eInput.value = this.aSelected.join('>');
    this.eCascadeInto.style.display = 'なし';
    this.bShow = false;
   }else{ //サブメニューがある場合は、次のレベルを表示します。 //DOM要素を再生成し、配列に空の文字列を追加して次のレベルを表示します。 this.aSelected.push('')
    //カスケードメニューを再生成します this.generateMenu();
   }  
  });
 }

5. ページの空白部分をクリックしたときにメニューを非表示にする

これで、テキストボックスをクリックすることによってのみメニューを表示および非表示にできるようになりました。一般的に、開いているポップアップウィンドウは、ポップアップウィンドウの外部で閉じられることが想定されます。これには、テキストボックスのクリックイベント関数を変更する必要があります。メニューを開くときは、ドキュメント要素のクリックイベントをバインドしてメニューを閉じます。メニューを非表示にするときは、ドキュメントにバインドされたクリックイベントをキャンセルします。以下のように表示されます。

関数 CascadeMenu(要素,データ){
  /*…*/

  this.eInput.addEventListener('クリック',()=>{
   //メニューのオープン状態を判断する if(this.bShow){ 
    // 開いている場合はメニューを非表示にします this.eCascadeInto.style.display = 'none';
    //メニューのオープンステータスを変更します。this.bShow = false;
    //ドキュメントのイベントをキャンセルします。document.onclick = null;
   }それ以外{
    //カスケードメニュー要素を表示します this.eCascadeInto.style.display = 'none';
    //選択したメニューデータを保存します。this.aSelected = this.eInput.value.split('>');
    //カスケードメニューを生成します this.generateMenu();
    ドキュメント.onclick = () => {
     //メニューを非表示にする this.eCascadeInto.style.display = 'none';
     //メニューのオープンステータスを変更します。this.bShow = false;
     //ドキュメントのイベントをキャンセルします。document.onclick = null;
    }
   }
  });
  //バブルを防ぐ this.eCascade.addEventListener('click',(event)=>{
   イベントの伝播を停止します。
  });

  /*…*/
 }

6. 最後に、データを準備し、コンストラクターを呼び出して、次に示すようにカスケードドロップダウンメニューを生成します。

var json = [
  {
   "name":"北京","id":"110000","child":[
    {"name":"市区町村","id":"110100","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
    {"name":"北京","id":"110000","child":null}
   ]
  },
  {
   "name":"河北省","id":"130000","child":[
    {"name":"石家荘市","id":"130100","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
    {"name":"唐山市","id":"130200","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
    {"name":"秦皇島市","id":"130300","child":[
     {"name":"市区","id":"130301","child":null},{"name":"海港区","id":"130302","child":null},{"name":"山海関区","id":"130303","child":null},{"name":"北戴河区","id":"130304","child":null},{"name":"扶寧区","id":"130306","child":null},{"name":"青龍満族自治県","id":"130321","child":null},{"name":"昌黎県","id":"130322","child":null},{"name":"廬龍県","id":"130324","child":null}]
    },
    {"name":"邯鄲市","id":"130400","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    }
   ]
  },
  {
   "name":"湖南省","id":"430000","child":[
    {"name":"長沙市","id":"430100","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
    {"name":"株洲市","id":"430200","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
    {"name":"湘潭市","id":"430300","child":[
     {"name":"地区","id":"430301","child":null},{"name":"玉湖区","id":"430302","child":null},{"name":"月塘区","id":"430304","child":null},{"name":"湘潭県","id":"430321","child":null},{"name":"湘湘市","id":"430381","child":null},{"name":"韶山市","id":"430382","child":null}]
    },
    {"name":"衡陽市","id":"430400","child":[
     {"name":"市の管轄区域","id":"430401","child":null},{"name":"竹匯区","id":"430405","child":null},{"name":"延豊区","id":"430406","child":null},{"name":"石鼓区","id":"430407","child":null},{"name":"鄭郷区","id":"430408","child":null},{"name":"南越区","id":"430412","child":null},{"name":"衡陽県","id":"430421","child":null},{"name":"衡南県","id":"430422","child":[
      {"name":"三堂鎮",id:"430422",child:null},{"name":"車江鎮",id:"430422",child:null}
     ]},{"name":"衡山県","id":"430423","child":null},{"name":"衡東県","id":"430424","child":null},{"name":"啓東県","id":"430426","child":null},{"name":"雷陽市","id":"430481","child":null},{"name":"長寧市","id":"430482","child":null}]
    }
   ]
  },
  {
   "name":"広東省","id":"440000","child":[
    {"name":"広州","id":"440100","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
    {"name":"韶関市","id":"440200","child":[
     : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
    {"name":"深圳","id":"440300","child":[
     {"name":"地区","id":"440301","child":null},{"name":"羅湖区","id":"440303","child":null},{"name":"福田区","id":"440304","child":null},{"name":"南山区","id":"440305","child":null},{"name":"宝安区","id":"440306","child":null},{"name":"龍岡区","id":"440307","child":null},{"name":"塩田区","id":"440308","child":null}]
    },
    {"name":"珠海市","id":"440400","child":[
     {"name":"地区","id":"440401","child":null},{"name":"香州区","id":"440402","child":null},{"name":"斗門区","id":"440403","child":null},{"name":"金湾区","id":"440404","child":null}]
    }
   ]
  },
  {
   "name":"南沙諸島","id":"900001","child":null
  }
 ];

 var eText = document.getElementById('input');
 新しい CascadeMenu(eText、json);

パッケージ化された js カスケードドロップダウン機能が完成し、画像に応じて独自の CSS スタイルを記述して、目的の効果を実現できます。

上記は、js オブジェクト指向カプセル化カスケードドロップダウンメニューリストの実装手順の詳細な内容です。js カプセル化ドロップダウンメニューの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: