使用JS-心智圖

我現在用的是JS-思維導圖庫別樣使用的創建思維導圖選擇符號列表，我需要讓選擇鏈接到extrenal一些鏈接/內部網頁，但需要別人來泡進符號列表（最好withing相同的CSS形狀的思維導圖的其餘部分。）我最初看着從標題或alt標籤獲得警報的內容，但不知道他們是否會保留不違約所需的UL和李在思維導圖格式...使用JS-心智圖

我在尋找更多的是更簡單的方式來做到這一點。我確定css最有可能是最好的做法，我需要從html中提取內容以便於創建不同的模塊。

這裏是JSFiddle MindMp

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

在這裏，你去我的朋友，這是一個有點哈克，但它的工作原理。我對插件本身以及你的樣式和html做了一些修改。

該插件是把你的錨標籤，剝離一切，並重新創建它們。我必須確保我的新屬性data-content已被保留。現在，插件檢查鏈接是否具有此屬性，如果是，則不觸發click事件。

然後，我指定我自己的點擊處理程序來代替警報格的內容，然後顯示它：

$('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

是一個良好的開端，但我在尋找子彈名單岔開選擇其他UI元素做的元素。也是子彈列表內容需要在html中以便於創建和更新，不能將內容存儲在javascript中？ – BarclayVision

@BarclayVision我不認爲胸痛的信息需要經常更新。但是，您絕對可以將這些內容存儲在單獨的html文件中，並使用ajax來加載內容。 –

使用JS-心智圖

回答

相關問題