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

最新推荐文章于 2022-04-13 15:08:20 发布

chem_zqm

最新推荐文章于 2022-04-13 15:08:20 发布

阅读量137

点赞数

分类专栏： Ext-core 文章标签： CSS EXT C C++ C#

本文链接：https://blog.csdn.net/chem_zqm/article/details/83610977

版权

Ext-core 专栏收录该内容

4 篇文章 0 订阅

订阅专栏


<!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>