您的位置：首页 > 其它

【脑图制作】实现业务流程图设计并保存流程图

2016-03-02 11:11 309 查看

html：

<!-- HTML代码片段中请勿添加<body>标签 //-->

<input type="button"  style=" margin:2px 0 0 2px; background:#ddd;  height:25px; border:1px solid #999; width:80px; " onclick="RemoveChild(this);" value="保存" />

<div class="tree">
<ul>
<li><a href="javascript:;" onclick="addChild(this);" >river
</a>
</li>
</ul>
</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

css：

/*CSS源代码*/
* {
margin: 0;
padding: 0;
}

.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li::before, .tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}

.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}

.tree li:only-child::after, .tree li:only-child::before {
display: none;
}

.tree li:only-child {
padding-top: 0;
}

.tree li:first-child::before, .tree li:last-child::after {
border: 0 none;
}

.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}

.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}

.tree li a {
border: 1px solid #ccc;
padding: 3px 10px 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 13px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li a:hover, .tree li a:hover + ul li a {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}

.tree li a:hover + ul li::after, .tree li a:hover + ul li::before, .tree li a:hover + ul::before, .tree li a:hover + ul ul::before {
border-color: #94a0b4;
}

.dd {
width: 3000px;
overflow: scroll;
height: 700px;
}

js:

/*Javascript代码片段*/
var addChild=function(obj){
var strText=window.prompt( "请输入结构名称")
if (strText!=null){
if(strText== '' ){
alert("请输入字符");
}
var li="<li><a href=\"javascript:;\" onclick=\"addChild(this);\">"+strText+"</a></li>";
if($(obj).parent().find("ul").length>0){
$(obj).parent().children("ul").first().append(li);
}else{
$(obj).parent().append("<ul>"+li+"</ul>");
}
}
else
{
var strText=confirm('确实删除吗？')
if(strText!=false){
$(obj).parent().remove();
}
}
};
var RemoveChild=function(obj){
alert($(".tree").html());
}

运行代码：点击运行效果

原文地址：点击打开链接

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

【脑图制作】 实现业务流程图设计 并保存流程图

【脑图制作】实现业务流程图设计并保存流程图