借助css定位实现动态关联的一个例子

chemzqm

浏览: 154870 次
性别:
来自: 北京

最近访客更多访客>>

awerty3450p

zanggj0618

熊大-光头强又来砍树啦

kk_破千菊

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ext-core

CSS EXT C C++C#

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript" src="ext-core.js">
        </script>
    </head>
    <style type="text/css">
        #manager {
            height: 200px;
        }
        
        .server {
            height: 100%;
            width: 20%;
            position: relative;
            float: left;
        }
        
        .server-name {
            height: 20px;
            width: 50px;
        }
        
        .server-body {
            width: 10%;
            height: 160px;
            background-color: blue;
        }
        
        .div-arrows {
            position: absolute;
            width: 90%;
            left: 10%;
            top: 20px;
            height: 100%;
        }
        
        .arrow-from {
            width: 100%;
            height: 16px;
            background: url(from.JPG) no-repeat center right;
            !important
        }
        
        .arrow-to {
            width: 100%;
            height: 16px;
            background: url(to.JPG) no-repeat center left;
            !important
        }
    </style>
    <script type="text/javascript">
    ServerManager = (function(){
        var dh = Ext.DomHelper;
        var el;
        var servers = [];
        return {
			init:function(id){
				el = Ext.get(id);
			},
            addServer: function(name){
				servers.push(name);
                dh.append(el, {
                    cls: 'server',
                    id: name,
                    children: [{
                        cls: 'server-name',
                        html: name
                    }, {
                        cls: 'server-body'
                    }, {
                        cls: 'div-arrows'
                    }]
                });               
            },
            resiveMessge: function(msg){
                var arr = msg.split('-');
                if (this.getIndex(arr[0]) < this.getIndex(arr[1])) {
                	var arrowEl = Ext.fly(arr[0]).child('.div-arrows');
					dh.append(arrowEl,{cls:'arrow-from'});
                }
                else {
                	var arrowEl = Ext.fly(arr[1]).child('.div-arrows');
					dh.append(arrowEl,{cls:'arrow-to'});
                }
            },
            getIndex: function(name){
                var i = servers.indexOf(name);
                if (i == -1) 
                    throw '找不到该服务器';
                return i;
            }
        }
    })()
	
	Ext.onReady(function(){//例子
		ServerManager.init('manager');
		ServerManager.addServer('a');
		ServerManager.addServer('b');
		ServerManager.addServer('c');
		
		ServerManager.resiveMessge('a-b');
		ServerManager.resiveMessge('b-c');
		ServerManager.resiveMessge('c-b');
		
		ServerManager.addServer('d');
		ServerManager.resiveMessge('d-c');
	});
    </script>
    <body>
        <div id="manager">
            
        </div>
    </body>
</html>

效果：