问使用js-mindmap在思维导图选择中创建项目符号列表
EN

Stack Overflow用户

提问于 2016-12-28 22:06:24

回答 0查看 664关注 0票数 4

我正在使用js-mindmap库用于不同的用途，我需要允许选择链接到一些链接上的外部/内部页面，但需要其他链接到项目符号列表中(最好使用与思维导图的其余部分相同的css形状)。我最初考虑从title或alt标签中获取警报的内容，但不确定它们是否会保留所需的ul和li，而不默认使用思维导图格式……

我正在寻找一种更简单的方式来实现这一点。我确信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>

javascript

html

css

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41363740

复制

相似问题

问使用js-mindmap在思维导图选择中创建项目符号列表
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用js-mindmap在思维导图选择中创建项目符号列表EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用js-mindmap在思维导图选择中创建项目符号列表
EN