js-mindmapを使用してマインドマップ選択で箇条書きリストを作成する

私はjs-mindmapライブラリを別の用途に使用していますが、一部のリンクでextrenal/internalページにリンクする選択を許可する必要があります。（マインドマップの残りの部分と同じCSSの形をしていることが好ましい）私はタイトルやaltタグからアラートの内容を取得することを最初に見ていましたが、デフォルトにすることなくulとliを保持するかどうかはわかりませんマインドマップ形式...js-mindmapを使用してマインドマップ選択で箇条書きリストを作成する

私はこれを達成するためのより単純な方法を探しています。私は確かにCSSがベストプラクティスであると確信しています。そして、異なるmodlesを作成しやすいようにHTMLからコンテンツを取り出す必要があります。それは少しハックだが、それは動作しますが、ここで

<!DOCTYPE html> 
<html> 
<head> 
<!-- Computer Medic 2016 
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap 
--> 
<title>ALS Mindmap</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" /> 
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/> 

<!-- jQuery --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<!-- UI, for draggable nodes --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 

<!-- Raphael for SVG support (won't work on android) --> 
<script type="text/javascript" src="mindmap/raphael-min.js"></script> 

<!-- Mindmap --> 
<script type="text/javascript" src="mindmap/js-mindmap.js"></script> 

<!-- Kick everything off --> 
<script src="mindmap/script.js" type="text/javascript"></script> 

<style> 
.alert { 
    padding: 20px; 
    background-color: #f44336; 
    color: white; 
} 

.closebtn { 
    margin-left: 15px; 
    color: white; 
    font-weight: bold; 
    float: right; 
    font-size: 22px; 
    line-height: 20px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

.closebtn:hover { 
    color: black; 
} 
</style> 



</head> 
<body> 
    <ul> 
    <li><a href="http://jeffbarcay.com/">ALS</a> 
     <ul> 
     <li><a href="#" target="_blank" class="alert" style="background:green !important;">Chest Pain</a></li> 
     <li><a href="#" target="_blank" class="icon linkedin" color="blue">Shortness of Breath</a></li> 
     <li><a href="#" target="_blank" class="icon facebook">Allergic Reaction</a></li> 
     <li><a href="http://www.google.com" target="_blank" class="icon twitter" title="goo">Diabetic</a></li> 
     <li><a href="#">STEMI</a> 
      <ul> 
      <li><a href="#" target="_blank" class="icon twitter" title="9">ACS</a></li> 
      <li><a href="#" target="_blank" class="closebtn" title="13">STEMI</a> 
       <ul> 
       <li><a href="#" title="A">Treatment</a></li> 
       <li><a href="#" title="C">Protocol</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 


     </ul> 
    </li> 
    </ul> 


    <div class="alert"> 
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
    </ul> 
    </div> 

</body> 
</html>

出典

2016-12-28 BarclayVision

は、あなたが行く私の友人：

はここJSFiddle MindMp

htmlです。私はあなたのスタイルやHTMLだけでなく、プラグイン自体にいくつかの変更を加えました。

プラグインがアンカータグを取得し、すべてを削除して新たに作成していました。新しい属性data-contentが保持されていることを確認しなければなりませんでした。プラグインはリンクにこの属性があるかどうかをチェックし、そうであればクリックイベントを発生させません。

はその後、私は警告のdivの内容を交換し、その後、それを示すために、私自身のクリックハンドラを割り当てる：

$('a').click(function(e){ 
    var tag = $(this).attr('data-content'); 
    if(tag) 
    { 
     $('.alert .content').html(content[tag]).parent().show(); 
    } 
});

ご質問があれば、私に知らせてください。

https://jsfiddle.net/x8826shn/7/

出典

2016-12-31 16:20:51

はそれほど正確にはJavaScriptファイルへの変更何でしたか？私はCSSの変更を参照してください... – BarclayVision

これは良いスタートですが、私は他のulの要素として選択された要素から分岐する箇条書きのリストを探しています。また、箇条書きのリストの内容は、HTMLの中に作成して更新するのが容易である必要があり、コンテンツをjavascriptに格納することはできません??? – BarclayVision

@BarclayVision私は胸の痛みに関する情報は頻繁に更新する必要があるとは思わなかった。しかし、あなたは絶対に別のhtmlファイルにそのものを格納し、ajaxを使用してコンテンツを読み込むことができます。 –

js-mindmapを使用してマインドマップ選択で箇条書きリストを作成する

答えて

関連する問題