使用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-心智图

回答

相关问题