純粋な JavaScript レスポンシブ ツリー メニューの効果_JavaScript スキル

簡単なチュートリアル
imaraJS は、非常に実用的な純粋な JavaScript 対応のマルチレベル ディレクトリ ツリー構造プラグインです。ディレクトリ ツリーでは、ツリー ノードを動的に追加および削除したり、複数レベルのツリー構造を作成したりできます。各ノードには右クリックのコンテキスト メニューがあり、各ノードで異なるアイコンを構成できます。その機能は次のとおりです:

• 基本的なツリー構造を作成してレンダリングできます。
• ツリー ノードはリアルタイムで追加および削除できます。
• さまざまなツリー ノード アイコンを表示できます。
• ツリーノードの開閉時のイベントをカスタマイズできます。
• 各ツリーノードに右クリックのコンテキストメニューを作成できます。

使用方法
このスライドショー プラグインを使用するには、Aimara.css ファイルと Aimara.js ファイルをページに導入する必要があります。

<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>       

HTML 構造

このディレクトリ ツリーのコンテナとして空の

を使用できます。

<div id="div_tree"></div>       

JAVASCRIPT

次に、次の方法でディレクトリ ツリー プラグインを初期化できます。いくつかのツリー ノードと子ノードを作成して、それらをレンダリングできます。ツリーがレンダリングされる前または後に、ノードをツリー構造に追加できます。

<script type="text/javascript">
  window.onload = function() {
    //创建树结构
    var tree = createTree('div_tree','white');
    //创建树节点node1
    var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
    //node1添加到树结构中
    node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
    //渲染树结构
    tree.drawTree();
    //创建第二个树节点
    node1 = tree.createNode('Second node',false,'images/star.png',null,null,null);
    node1.createChildNode('Second child node', false, 'images/blue_key.png',null,null);
  };
</script>        

ツリー ノードのコンテキスト メニューを作成します

次の方法で右クリックコンテキストメニューを作成できます。

var contex_menu = {
 'context1' : {
  elements : [
   {
    text : 'Node Actions',
    icon: 'images/blue_key.png',
    action : function(node) {
 
    },
    submenu: {
     elements : [
      {
       text : 'Toggle Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.toggleNode();
       }
      },
      {
       text : 'Expand Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.expandNode();
       }
      },
      {
       text : 'Collapse Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.collapseNode();
       }
      },
      {
       text : 'Expand Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.expandSubtree();
       }
      },
      {
       text : 'Collapse Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.collapseSubtree();
       }
      },
      {
       text : 'Delete Node',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeNode();
       }
      },
     ]
    }
   },
   {
    text : 'Child Actions',
    icon: 'images/blue_key.png',
    action : function(node) {
 
    },
    submenu: {
     elements : [
      {
       text : 'Create Child Node',
       icon: 'images/add1.png',
       action : function(node) {
        node.createChildNode('Created',false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Create 1000 Child Nodes',
       icon: 'images/add1.png',
       action : function(node) {
        for (var i=0; i<1000; i++)
         node.createChildNode('Created -' + i,false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Delete Child Nodes',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeChildNodes();
       }
      }
     ]
    }
   }
  ]
 }
};        

次に、次のメソッドを使用してツリー構造を初期化します:

tree = createTree('div_tree','white',contex_menu);
tree.drawTree();   

ツリー構造がレンダリングされた後、リアルタイムでツリー ノードを追加します:

tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1'); 

以上がこの記事の全内容です。ツリー構造のメニュー バーの特殊効果の純粋な JS レスポンシブ実装を紹介します。気に入っていただければ幸いです。

関連ラベル：

javascript树形菜单 响应式树形菜单 javascript树形结构 javascript下拉菜单 javascr

ソース：php.cn

前の記事：JavaScript で 5 つ星評価を実装 function_javascript スキル 次の記事：JavaScript パスワード検証_JavaScript スキル

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

影付きクローンバージョンでメニューボタンをX字型に変形させるホバーエフェクトを作成します まず初めに、タイトルが紛らわしいことを認めたいと思います。申し訳ありません。私が達成したいのは、ホバー時の次の効果です。私のウェブサイトはここです https://wordpres...

から 2024-04-04 11:55:21

0

2

315

関連トピック

詳細>

• Javaで入力された数値を取得する方法
• コンソールケーブルとネットワークケーブルの違い
• ^quxjg$c
• コンピューターの電源を入れた後、モニターに信号が表示されない
• CMD ポートクローズコマンド
• HTMLサブページからトップページに戻る方法
• HTMLの段落内に2つのスペースを空ける方法
• キープレスイベントをトリガーする方法