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

我正在使用js-mindmap库进行不同的使用,我需要允许选择链接到某些链接上的extrenal / internal页面,但需要其他链接到子弹列表(最好与其他链接相同的css形状)思维导图.)我最初看的是从标题或alt标签获取警报的内容,但不确定他们是否会保留所需的ul和li而不会默认为思维导图格式…

我正在寻找更简单的方法来实现这一目标.我确信css很可能是最佳实践,我需要从html中提取内容以便于创建不同的模型.

这是JSFiddle MindMp

HTML：

<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016 
NOTE: https://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>

解决方法

在这里,你去我的朋友,它有点hacky但它的工作原理.我对插件本身以及你的样式和HTML做了几处修改.

该插件正在使用您的锚标签,剥离所有内容并重新创建它们.我必须确保保留我的新属性数据内容.现在,插件检查链接是否具有此属性,如果有,则不会触发click事件.

然后,我分配了自己的点击处理程序来替换警报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/

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

解决方法

相关推荐