Question

我使用js-mindmap库进行其他类型的使用，我需要允许选择链接到某些链接上的extrenal / internal页面，但需要其他链接到子弹列表（最好具有相同的css形状）作为思维导图的其余部分。）我最初看的是从标题或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>

Answer 1

在这里，你去找我的朋友，它有点hacky但它的确有效。我对插件本身以及你的样式和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/

使用js-mindmap

1 个答案: