发布于 2017-01-18 00:06:01 | 88 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


用js控制生成了一个组织结构图并设置这个组织结构可以任意拖动到指定位置,具体代码如下
首先用js控制生成了一个组织结构图

再设置这个组织结构可以任意拖动到指定位置

页面代码如下 具体代码 实例 可以去我资源空间下载
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>部门组织架构图</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="css.css" type="text/css" rel="stylesheet" /> 
<script src="jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="jquery.ui.draggable.min.js" type="text/javascript"></script> 
<script src="main.js" type="text/javascript"></script> 
</head> 
<body style="overflow:hidden;"> 
<div class="strt-wrap" id="strtWrap"> 
<div class="strt-block"> 
<div class="strt-part"> 
<span class="strt-name" style="background: #6D6D6D;color: white;">天云平台</span> 
<div class="line-v"><span></span></div> 
<div class="strt-block"> 
<div class="strt-part"> 
<span class="line-h line-h-r"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #DBA659;color: white;">档案类</span> 
<div class="line-v"><span></span></div> 
<div class="strt-block"> 

<div class="strt-part"> 
<span class="line-h line-h-r"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #DBA659;color: white;">档案</span> 
</div> 
<div class="strt-part"> 
<span class="line-h line-h-c"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #DBA659;color: white;">档案</span> 
</div> 
<div class="strt-part"> 
<span class="line-h line-h-c"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #DBA659;color: white;">档案</span> 
</div> 
<div class="strt-part"> 
<span class="line-h line-h-l"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #DBA659;color: white;">档案</span> 
</div> 
</div> 
</div> 
<div class="strt-part"> 
<span class="line-h line-h-c"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">搜索类</span> 
<div class="line-v"><span></span></div> 
<div class="strt-block"> 
<div class="strt-part"> 
<span class="line-h line-h-r"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span> 


</div> 
<div class="strt-part"> 
<span class="line-h line-h-c"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span> 
</div> 
<div class="strt-part"> 
<span class="line-h line-h-c"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span> 

</div> 
<div class="strt-part"> 
<span class="line-h line-h-l"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span> 
</div> 
</div> 
</div> 
<div class="strt-part"> 
<span class="line-h line-h-l"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">分析类</span> 
<div class="line-v"><span></span></div> 
<div class="strt-block"> 
<div class="strt-part"> 
<span class="line-h line-h-r"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">分析</span> 
</div> 
<div class="strt-part"> 
<span class="line-h line-h-c"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">分析</span> 

</div> 
<div class="strt-part"> 
<span class="line-h line-h-c"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">分析</span> 

</div> 
<div class="strt-part"> 
<span class="line-h line-h-l"></span> 
<div class="line-v"><span></span></div> 
<span class="strt-name" style="background: #679BCC;color: white;">分析</span> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</body> 

</html> 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务