VML流程图

VML教程 

VML Editor

<html xmlns:vml="urn:schemas-microsoft-com:vml">
<head runat="server">
    <title>无标题页</title>
    <link rel="stylesheet" type="text/css" href="Css/vmlstyle.css" />

    <script language="javascript" type="text/javascript" src="Js/vmlset.js"></script>

    <object id="vmlRender" classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E">
    </object>
    <style type="text/css">vml\:* { FONT-SIZE: 12px; BEHAVIOR: url(#VMLRender) }
</style>
</head>
<body>
    <form id="form1" runat="server">
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='1' table_id='9' flowtype='start' passcount='0'
            flowtitle='<b>1</b><br>签收' flowflag='0' receiverid='' receivername=''
            fillcolor='#00EE00' style='left: 20; top: 50; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲签收

·下一步骤:2'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>1</b><br />签收</vml:textbox>
        </vml:roundrect>
        <vml:line mfrid='1' title='' source='1' object='2' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='2' table_id='10' flowtype='' passcount='0'
            flowtitle='<b>2</b><br>收文登记' flowflag='0' receiverid='' receivername=''
            fillcolor='#EEEEEE' style='left: 20; top: 230; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲收文登记

·下一步骤:3,4'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>2</b><br />收文登记</vml:textbox>
        </vml:roundrect>
        <vml:line mfrid='2' title='' source='2' object='3' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:line mfrid='2' title='' source='2' object='4' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='3' table_id='11' flowtype='' passcount='0'
            flowtitle='<b>3</b><br>拟办意见' flowflag='0' receiverid='' receivername=''
            fillcolor='#EEEEEE' style='left: 200; top: 50; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲拟办意见

·下一步骤:4'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>3</b><br />拟办意见</vml:textbox>
        </vml:roundrect>
        <vml:line mfrid='3' title='' source='3' object='4' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='4' table_id='26' flowtype='' passcount='0'
            flowtitle='<b>4</b><br>分办' flowflag='0' receiverid='' receivername=''
            fillcolor='#EEEEEE' style='left: 200; top: 230; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲分办

·下一步骤:5,6,7'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>4</b><br />分办</vml:textbox>
        </vml:roundrect>
        <vml:line mfrid='4' title='' source='4' object='5' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:line mfrid='4' title='' source='4' object='6' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:line mfrid='4' title='' source='4' object='7' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='5' table_id='27' flowtype='' passcount='0'
            flowtitle='<b>5</b><br>批办' flowflag='0' receiverid='' receivername=''
            fillcolor='#EEEEEE' style='left: 380; top: 50; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲批办

·下一步骤:6,7,8'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>5</b><br />批办</vml:textbox>
        </vml:roundrect>
        <vml:line mfrid='5' title='' source='5' object='6' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:line mfrid='5' title='' source='5' object='7' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:line mfrid='5' title='' source='5' object='8' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='6' table_id='28' flowtype='' passcount='0'
            flowtitle='<b>6</b><br>传阅' flowflag='0' receiverid='' receivername=''
            fillcolor='#EEEEEE' style='left: 380; top: 230; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲传阅

·下一步骤:7,8'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>6</b><br />传阅</vml:textbox>
        </vml:roundrect>
        <vml:line mfrid='6' title='' source='6' object='7' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:line mfrid='6' title='' source='6' object='8' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='7' table_id='29' flowtype='' passcount='0'
            flowtitle='<b>7</b><br>承办' flowflag='0' receiverid='' receivername=''
            fillcolor='#EEEEEE' style='left: 560; top: 50; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲承办

·下一步骤:8'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>7</b><br />承办</vml:textbox>
        </vml:roundrect>
        <vml:line mfrid='7' title='' source='7' object='8' from='0,0' to='0,0' style='position: absolute;
            display: none; z-index: 2' arcsize='4321f' coordsize='21600,21600'>
            <vml:stroke endarrow='block'>
            </vml:stroke>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='1px,1px' />
        </vml:line>
        <vml:roundrect inset='2pt,2pt,2pt,2pt' id='8' table_id='30' flowtype='end' passcount='0'
            flowtitle='<b>8</b><br>归档、销毁' flowflag='0' receiverid='' receivername=''
            fillcolor='#F4A8BD' style='left: 560; top: 230; width: 100; position: absolute;
            height: 50; vertical-align: middle; cursor: hand; text-align: center; z-index: 1'
            arcsize='4321f' coordsize='21600,21600' title='      ▲归档、销毁

·下一步骤:结束,'>
            <vml:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px' />
            <vml:textbox inset='1pt,2pt,1pt,1pt' onselectstart='return false;'><b>8</b><br />归档、销毁</vml:textbox>
        </vml:roundrect>
    </form>
</body>
</html>


html { overflow-y: scroll; }

a:link{color: #0066cc; text-decoration: none;}
a:visited {color: #0066cc; text-decoration: none}
a:hover {color: #333333; text-decoration: underline}
a:active {color: #333333; text-decoration: underline}

A.A1:link { COLOR: #124164; TEXT-DECORATION: underline;}
A.A1:visited { COLOR: #124164; TEXT-DECORATION: underline}
A.A1:active  { COLOR: #124164; TEXT-DECORATION: underline}
A.A1:hover   { COLOR: #ff0000; TEXT-DECORATION: underline}

body { font-size: 12pt;}
img{border:0px;}
table{border-collapse:collapse;}
.bodycolor { BACKGROUND: #E2E5E6}
.loginbodycolor { BACKGROUND: #6BA2D8}
.topbar {font-size: 9pt;BACKGROUND: #C4D9EF;background-image: url("topbar.gif")}
.topbar2 {font-size: 9pt;BACKGROUND: #C4D9EF; background-image: url("menubg.gif")}

.panel{ BACKGROUND: #C4D9EF; COLOR:#654125;}
.timebar{ BACKGROUND: #CEDFF1;}
.menu_tr1{ font-size: 9pt;COLOR:#000000;background-image:url("topbar.gif");cursor:pointer}
.menu_tr2{ font-size: 9pt;COLOR:#000000;BACKGROUND: #CEDFF1;cursor:pointer}

.small  { font-size: 9pt;}
.small1  { font-size: 9pt;COLOR: #000000;}
.big { font-size: 12pt;}
.big1   { font-size: 12pt;COLOR: #000000;}
.big2   { font-size: 18pt}
.big3   { font-size: 12pt;COLOR: #124164;FONT-WEIGHT: bold;}
.big4   { COLOR: #FF0000;}
.verybig{ font-size: 24pt}
<!--
input.SmallButton, input.ArrowButton {FONT-SIZE: 9pt;height: 20px; text-decoration: none; vertical-align: middle; border: 1px solid #6E91C7; background: #F4FBE1 url('button_bg.gif');}
input.SmallButton:hover, input.ArrowButton:hover  {FONT-SIZE: 9pt;color: #395500; background: #F4FADF url('bg_input_btn_hover.png'); border: 1px solid #80AA00; border-top: 1px solid #99CC00; border-left: 1px solid #99CC00;}

input.BigButton {FONT-SIZE: 12pt; margin: 1px; height: 24px; text-decoration: none; vertical-align: middle; border: 1px solid #6E91C7; background: #F4FBE1 url('button_bg.gif');}
input.BigButton:hover {FONT-SIZE: 12pt;color: #395500; background: #F4FADF url('bg_input_btn_hover.png'); border: 1px solid #80AA00; border-top: 1px solid #99CC00; border-left: 1px solid #99CC00;}
-->

input.SmallButtonAHover{width:50px;height:21px;color:#FFFFFF;background:url("btn_a.png") no-repeat;border:0px;cursor:pointer;background-position:0 -21px;}
input.SmallButtonA{width:50px;height:21px;color:#FFFFFF;background:url("btn_a.png") no-repeat;border:0px;cursor:pointer;}
input.SmallButtonA:hover{background-position:0 -21px;}

input.SmallButtonBHover{width:74px;height:21px;color:#FFFFFF;background:url("btn_b.png") no-repeat;border:0px;cursor:pointer;background-position:0 -21px;}
input.SmallButtonB{width:74px;height:21px;color:#FFFFFF;background:url("btn_b.png") no-repeat;border:0px;cursor:pointer;}
input.SmallButtonB:hover{background-position:0 -21px;}

input.SmallButtonCHover{width:105px;height:21px;color:#FFFFFF;background:url("btn_c.png") no-repeat;border:0px;cursor:pointer;background-position:0 -21px;}
input.SmallButtonC{width:105px;height:21px;color:#FFFFFF;background:url("btn_c.png") no-repeat;border:0px;cursor:pointer;}
input.SmallButtonC:hover{background-position:0 -21px;}

input.SmallButtonDHover{width:160px;height:21px;color:#FFFFFF;background:url("btn_d.png") no-repeat;border:0px;cursor:pointer;background-position:0 -21px;}
input.SmallButtonD{width:160px;height:21px;color:#FFFFFF;background:url("btn_d.png") no-repeat;border:0px;cursor:pointer;}
input.SmallButtonD:hover{background-position:0 -21px;}

input.SmallButtonEHover{width:245px;height:21px;color:#FFFFFF;background:url("btn_e.png") no-repeat;border:0px;cursor:pointer;background-position:0 -21px;}
input.SmallButtonE{width:245px;height:21px;color:#FFFFFF;background:url("btn_e.png") no-repeat;border:0px;cursor:pointer;}
input.SmallButtonE:hover{background-position:0 -21px;}

input.BigButtonAHover{width:60px;height:24px;color:#FFFFFF;background:url("big_btn_a.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;background-position:0 -24px;}
input.BigButtonA{width:60px;height:24px;color:#FFFFFF;background:url("big_btn_a.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;}
input.BigButtonA:hover{background-position:0 -24px;}

input.BigButtonBHover{width:84px;height:24px;color:#FFFFFF;background:url("big_btn_b.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;background-position:0 -24px;}
input.BigButtonB{width:84px;height:24px;color:#FFFFFF;background:url("big_btn_b.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;}
input.BigButtonB:hover{background-position:0 -24px;}

input.BigButtonCHover{width:125px;height:24px;color:#FFFFFF;background:url("big_btn_c.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;background-position:0 -24px;}
input.BigButtonC{width:125px;height:24px;color:#FFFFFF;background:url("big_btn_c.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;}
input.BigButtonC:hover{background-position:0 -24px;}

input.BigButtonDHover{width:195px;height:24px;color:#FFFFFF;background:url("big_btn_d.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;background-position:0 -24px;}
input.BigButtonD{width:195px;height:24px;color:#FFFFFF;background:url("big_btn_d.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;}
input.BigButtonD:hover{background-position:0 -24px;}

input.BigButtonEHover{width:305px;height:24px;color:#FFFFFF;background:url("big_btn_e.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;background-position:0 -24px;}
input.BigButtonE{width:305px;height:24px;color:#FFFFFF;background:url("big_btn_e.png") no-repeat;border:0px;cursor:pointer;font-size:12pt;}
input.BigButtonE:hover{background-position:0 -24px;}

input.BigInput,textarea.BigInput {font-size: 10pt;padding: 1px 5px; vertical-align: middle; border: 1px solid #C0BBB4; background: white url('bg_input_text.png') top left repeat-x;}
input.BigInput:hover,textarea.BigInput:hover {font-size: 10pt;border: 1px solid #99CC00; background: white url('bg_input_text_hover.png') top left repeat-x;}

input.SmallInput,textarea.SmallInput {font-size: 9pt;padding: 1px 5px; vertical-align: middle; border: 1px solid #C0BBB4; background: white url('bg_input_text.png') top left repeat-x;}
input.SmallInput:hover,textarea.SmallInput:hover {font-size: 9pt;border: 1px solid #99CC00; background: white url('bg_input_text_hover.png') top left repeat-x;}

input.BigInputMoney{COLOR:#006; BACKGROUND: #F8F8F8; text-align: RIGHT; border:solid 1px black; BORDER-BOTTOM:1px double; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 22px; LINE-HEIGHT: normal}

input.BigStatic,textarea.BigStatic {font-size: 10pt;padding: 1px 5px; vertical-align: middle; border: 1px solid #C0BBB4; background: #E0E0E0;}

input.SmallStatic,textarea.SmallStatic {font-size: 9pt;padding: 1px 5px; vertical-align: middle; border: 1px solid #C0BBB4; background: #E0E0E0;}

select.BigSelect  { COLOR: #000066;  border: 1px solid #C0BBB4; background: white url('bg_input_text.png') top left repeat-x; BORDER-BOTTOM:1px double; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 22px; LINE-HEIGHT: normal}
select.BigSelect:hover  { COLOR: #000066;  border: 1px solid #C0BBB4; background: white url('bg_input_text_hover.png') top left repeat-x; BORDER-BOTTOM:1px double; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 22px; LINE-HEIGHT: normal}

select.SmallSelect{ COLOR: #000066;  border: 1px solid #C0BBB4; background: white url('bg_input_text.png') top left repeat-x; BORDER-BOTTOM:1px double; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
select.SmallSelect:hover{ COLOR: #000066;  border: 1px solid #C0BBB4; background: white url('bg_input_text_hover.png') top left repeat-x; BORDER-BOTTOM:1px double; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}

select.BigStatic  { COLOR: #000066; BACKGROUND: #E0E0E0; border:solid 1px black; BORDER-BOTTOM:1px double; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 22px; LINE-HEIGHT: normal}
select.SmallStatic{ COLOR: #000066; BACKGROUND: #E0E0E0; border:solid 1px black; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}

.TableControl{ background: url("footer_bg.png") bottom left;}
.TableHeader { COLOR:#2E2E5A; FONT-WEIGHT: bold; FONT-SIZE: 9pt; background:url("list_hd_bg.png"); line-height:25px;}
.TableHeader1 { BACKGROUND: #D3E5FA; background-image: url("button_back.gif");  cursor:pointer; COLOR: #000066;}
.TableHeader2 { BACKGROUND: #D3E5FA; background-image: url("menubg.gif");  cursor:pointer; COLOR: #000066;FONT-WEIGHT: bold;}
.TableContent{ BACKGROUND: #F0F0F0;}
.TableData   { BACKGROUND: #FFFFFF;COLOR:#000000;}
.TableLine1  { BACKGROUND: #F3F3F3;}
.TableLine2  { BACKGROUND: #FFFFFF;}
.TextColor1  { COLOR: #FF6600;}
.TextColor2  { COLOR: #FF0000;}
.top{ COLOR: #FF0000;font-weight:bold;}

.percent { height: 12px; border: 1px solid #666666; float: left; padding: 0px;margin-top:3px;}
.percent div {height: 8px;font-size: 0px;margin: 1px;}
.percenttxt {float:left;font-size: 9pt;margin-top:1px;}
.s_on{background:url(/images/topmenubg2.gif);font-size: 9pt;}
.s_of{background:url(/images/topmenubg1.gif);font-size: 9pt;}
.m_on{background:url(/images/topmenubg2.gif);font-size: 9pt;}
.border14-1 {border: solid 1px #2E2E5A;font-size: 14px;}/* 表格外框 */
.border14-2 {border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #2E2E5A;border-right-width: 1px;border-right-style: solid;border-right-color: #2E2E5A;font-size: 14px;}/* 表格边框右面 */
.border14-3 {border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #98BBD6;font-size: 14px;border-top-style: none;border-right-style: none;border-left-style: none;}/* 表格边框底面 */
.border14-4 {border-right-width: 1px;border-right-style: solid;border-right-color: #98BBD6;font-size: 14px;}/* 表格边框左面 */
.title_text {  font-size: 14px; font-weight: bold; color: #0A5FA2; }
.table_border {  border-color: #98BBD6 #98BBD6 black; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px}
.table_bg {  background-attachment: fixed; background-image: url("bg_header.png"); background-repeat: repeat; background-position: left; border-color: #2E2E5A black; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px}
.table_left {  background-attachment: fixed; background-image: url(table_left.gif); background-repeat: no-repeat; background-position: left}

.attach_name:link,.attach_name:hover,.attach_name:active,.attach_name:visited{color:#0D3A73;}
.attach_div{display:none;width:auto;border-top:0;border-left: #124164 1px solid;border-right: #124164 1px solid;border-bottom:#124164 1px solid;position:absolute;padding:0px;z-index:10001;background:#E2E5E6;}
.attach_div a{display:block;line-height:20px;padding:3px 0 0 10px;border-top: #124164 1px dotted;width:100%;margin:3px;margin-top:0;}
.attach_div a:hover{background:#F0F0F0;border: solid 1px #606275;padding:3px 0 0 10px;width:auto}

/*  列表型表格样式  */
.TableList{
   border:1px #9F9F9F solid;
   line-height:25px;
   font-size:9pt;
   border-collapse:collapse;
}
.TableList td{
   padding:3px;
   color:#000000;
}
.TableList .TableHeader td,
.TableList td.TableHeader{
   background:url("list_hd_bg.png");
   border-top:1px #9F9F9F solid;
   border-right:1px #DCDCDC solid;
   font-weight:bold;
   text-align:center;
   padding:0px;
}
.TableList .TableLine1 td,
.TableList td.TableLine1{
   background:#F8F8F8;
   border-top:1px #DCDCDC solid;
}
.TableList .TableLine2 td,
.TableList td.TableLine2{
   background:#FFFFFF;
   border-top:1px #DCDCDC solid;
}
.TableList .TableData td,
.TableList td.TableData{
   background:#FFFFFF;
   border-top:1px #DCDCDC solid;
}
.TableList .TableContent td,
.TableList td.TableContent{
   background:#F0F0F0;
   border-top:1px #DCDCDC solid;
}
.TableList .TableFooter td,
.TableList .TableControl td,
.TableList td.TableFooter,
.TableList td.TableControl{
   background: url("footer_bg.png") bottom left;
   border-top:1px #DCDCDC solid;
}
.TableList .TextColor1 td,
.TableList td.TextColor1
{
   COLOR: #FF6600;
}
.TableList .TextColor2 td,
.TableList td.TextColor2
{
   COLOR: #FF0000;
}

/*  block型表格样式  */
.TableBlock{
   border:1px #124164 solid;
   line-height:20px;
   font-size:9pt;
   border-collapse:collapse;
   padding:3px;
}
.TableBlock td{
   padding:3px;
   color:#000000;
}
.TableBlock .TableHeader td,
.TableBlock td.TableHeader{
   background:url("list_hd_bg.png");
   border-top:1px #9F9F9F solid;
   border-right:1px #606275 solid;
   font-weight:bold;
   color:#124164;
   line-height:25px;
}
.TableBlock .TableLine1 td,
.TableBlock td.TableLine1{
   background:#F8F8F8;
   border-top:1px #606275 solid;
   border-right:1px #606275 solid;
}
.TableBlock .TableLine2 td,
.TableBlock td.TableLine2{
   background:#FFFFFF;
   border-top:1px #606275 solid;
   border-right:1px #606275 solid;
}
.TableBlock .TableData td,
.TableBlock td.TableData{
   background:#FFFFFF;
   border-top:1px #606275 solid;
   border-right:1px #606275 solid;
}
.TableBlock .TableContent td,
.TableBlock td.TableContent{
   background:#F0F0F0;
   border-top:1px #606275 solid;
   border-right:1px #606275 solid;
}
.TableBlock .TableFooter td,
.TableBlock .TableControl td,
.TableBlock td.TableFooter,
.TableBlock td.TableControl{
   background: url("footer_bg.png") bottom left;
   border-top:1px #606275 solid;
}

.Content{
   line-height:normal;
}

.TableControl a{
   color:#124164;
   text-decoration: none;
}

.TableBlock .TableRowHover td,
.TableBlock td.TableRowHover
{
   background:#E2E5E6;
}

.TableBlock .TableRowActive td,
.TableBlock td.TableRowActive
{
   background:#7D95A5;
   color:#FFFFFF;
}
/* 提示框样式 */
.MessageBox{
   border:1px #124164 dotted;
   background:#FFFFFF;
   margin-top:15px;
   margin-bottom:15px;
}
.MessageBox td.msg{
   height:90px;
   padding:5px 20px 10px 90px;
   font-weight:bold;
}
.MessageBox td.msg h4.title{
   color:#124164;
   font-size:18pt;
   border-bottom:1px #124164 dotted;
   margin-bottom:10px;
}
.MessageBox td.msg div.content{
   color:#6BAD42;
   border:none;
}
.MessageBox td.error{
   background:url("/images/icon64_error.png") no-repeat top left;
   background-position:10px 10px;
}
.MessageBox td.info{
   background:url("/images/icon64_info.png") no-repeat top left;
   background-position:10px 10px;
}
.MessageBox td.warning{
   background:url("/images/icon64_warning.png") no-repeat top left;
   background-position:10px 10px;
}
.MessageBox td.forbidden{
   background:url("/images/icon64_forbidden.png") no-repeat top left;
   background-position:10px 10px;
}
.MessageBox td.stop{
   background:url("/images/icon64_stop.png") no-repeat top left;
   background-position:10px 10px;
}
.MessageBox td.blank{
   height:40px;
   padding:10px 20px 10px 20px;
   text-align:center;
}

//--- 图形化设计 ---
var dragapproved = false;
var eventsource,x,y;
var popeventsource = "";
var temp1 = 0;
var temp2 = 0;

function nocontextmenu()
{
 event.cancelBubble = true
 event.returnValue = false;

 return false;
}

//-- 初始化移动参数 --
function nodrags()
{
   dragapproved = false;
}

function move()
{
 if (event.button == 1 && dragapproved)
 {
  var newleft = temp1 + event.clientX - x;
  var newtop = temp2 + event.clientY - y;
  eventsource.style.pixelLeft = newleft;
  eventsource.style.pixelTop = newtop;

  drawLine();

  return false;
 }
}

function drags()
{
  if (event.button != 1)
     return;

 var objRect = event.srcElement;
 if (event.srcElement.tagName.toLowerCase() == 'textbox') objRect = event.srcElement.parentElement;

 if ((objRect.tagName == 'roundrect') && (!event.ctrlKey))
 {
  dragapproved = true;
  eventsource = objRect;
  temp1 = eventsource.style.pixelLeft;
  temp2 = eventsource.style.pixelTop;
  x = event.clientX;
  y = event.clientY;
  document.onmousemove = move;
 }
}

//-- 画线 --
function drawLine()
{
  var source;
  var object;
  var sourceObj;
  var objectObj;
  var x0,y0,x1,y1;
  var p0,p1;
  var a = document.getElementsByTagName('line');
  for (var i = 0; i < a.length; i++)
  {
     source = a[i].getAttribute('source');
     object = a[i].getAttribute('object');
     if ((source != null) && (object != null))
     {
        sourceObj = document.getElementById(source);
        objectObj = document.getElementById(object);

        if ((sourceObj == null) || (objectObj == null)) continue;

        if (sourceObj.style.pixelLeft > objectObj.style.pixelLeft)
        {
           if ((sourceObj.style.pixelLeft - objectObj.style.pixelLeft) <= objectObj.style.pixelWidth)
           {
   x0 = sourceObj.style.pixelLeft + sourceObj.style.pixelWidth / 2;
   x1 = objectObj.style.pixelLeft + objectObj.style.pixelWidth / 2;
               if (sourceObj.style.pixelTop >  objectObj.style.pixelTop)
               {
       y0 = sourceObj.style.pixelTop;
       y1 = objectObj.style.pixelTop  + objectObj.style.pixelHeight;
               }
               else
               {
       y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight;
       y1 = objectObj.style.pixelTop;
     }
           }
           else
           {
               x0 = sourceObj.style.pixelLeft;
               x1 = objectObj.style.pixelLeft + objectObj.style.pixelWidth;
     y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight / 2;
     y1 = objectObj.style.pixelTop + objectObj.style.pixelHeight / 2;
           }
        }
        else
        {
           if ((objectObj.style.pixelLeft - sourceObj.style.pixelLeft) <= objectObj.style.pixelWidth)
           {
   x0 = sourceObj.style.pixelLeft + sourceObj.style.pixelWidth / 2;
   x1 = objectObj.style.pixelLeft + objectObj.style.pixelWidth / 2;
               if (sourceObj.style.pixelTop >  objectObj.style.pixelTop)
               {
       y0 = sourceObj.style.pixelTop;
       y1 = objectObj.style.pixelTop  + objectObj.style.pixelHeight;
               }
               else
               {
       y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight;
       y1 = objectObj.style.pixelTop;
     }
           }
           else
           {
  x0 = sourceObj.style.pixelLeft + sourceObj.style.pixelWidth;
  x1 = objectObj.style.pixelLeft;
  y0 = sourceObj.style.pixelTop + sourceObj.style.pixelHeight / 2;
  y1 = objectObj.style.pixelTop + objectObj.style.pixelHeight / 2;
             }
        }

        a[i].from = String(x0) + ',' + String(y0);
        a[i].to = String(x1) + ',' + String(y1);

        a[i].style.pixelLeft = x0 + 'px';
        a[i].style.pixelTop = y0 + 'px';

        //条件
        strIF = a[i].getAttribute('title');
        if ((strIF != null) && (strIF != ''))
        {
 var id = 'if_' + source + '_' + object;
 var obj = document.getElementById(id);

 var left = (x0 + (x1 - x0) / 2 - 30);
 var top = (y0 + (y1 - y0) / 2 - 15);

 if (obj != null)
 {
  obj.style.pixelLeft = left + 'px';
  obj.style.pixelTop = top + 'px';

  obj.style.left = left + 'px';
  obj.style.top = top + 'px';

  obj.style.display = '';
 }
        }

        a[i].style.display = '';
     }
  }
}

//表单加载完成
function document.onreadystatechange()
{
   if (document.readyState=='complete')
   {
      drawLine();
      document.onmousedown = drags;  //开始移动
      document.onmouseup = nodrags;  //结束移动
   }
}

 

posted @ 2011-03-05 19:04  克隆  阅读(848)  评论(0编辑  收藏  举报