个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我将 js-mindmap 库用于另一种用途，我需要允许选择链接到某些链接上的外部/内部页面，但需要其他链接进入元素符号列表(最好使用相同的 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';">×</span>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
最佳答案
给你吧我的 friend ，它有点 hacky 但它有效。我对插件本身以及您的样式和 html 进行了一些修改。
该插件正在获取您的 anchor 标签，剥离所有内容并重新创建它们。我必须确保我的新属性 data-content 得到保留。现在插件检查链接是否具有此属性，如果有，它不会触发点击事件。
然后，我分配了自己的点击处理程序来替换 alert div 的内容并随后显示它:
$('a').click(function(e){
var tag = $(this).attr('data-content');
if(tag)
{
$('.alert .content').html(content[tag]).parent().show();
}
});
如果您有任何问题，请告诉我。
关于javascript - 使用js-mindmap在思维导图选择中创建元素符号列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41363740/
24
4
0
我是 hadoop mapreduce 框架领域的新手。自己看了很多教程，了解了框架。我已经在伪分布式模式下成功配置了一个 hadoop 设置。我有两个特定任务需要在 Hadoop MapReduce
我在我的Rails应用程序中实现了 sphinx 搜索。 我想模糊搜索。它应该搜索拼写错误，例如，如果输入搜索查询charact * a * ristics，则应该搜索charact * e * ri
我正在和会思考的 sphinx 一起工作 define_index do indexes to indexes created_on has c
我正在尝试在我的 Rails 3 应用程序中设置 Thinking sphinx。我设置了mysql并安装了sphinx没有错误。在我的 gemfile 中有 gem "riddle", "~> 1.
我有一个带有 ui-bootstrap 日期选择器的表单。我想防止日期成为过去。 我将指令的 min-date 设置为 new Date()如下所示。这可以正确地防止在使用弹出窗口时选择过去的日期，但
我对 Sphinx 还很陌生。 尝试查找名称为“bob”且 company_id 为“14”的用户。 Controller: @users = User.search 'bob', :conditio
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我是一名优秀的程序员,十分优秀！