prop.html
来自「一个用javascript实现的工作流定义工具」· HTML 代码 · 共 398 行
HTML
398 行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Step Property </TITLE>
</HEAD>
<!-- 下面是改变下拉框风格的样式代码 border:1px solid #C0C0C0; -->
<style>
select{
position:relative;
left:-2px;
top:-2px;
font-size:12px;
width:100%;
line-height:14px;
border:0px;
color:#909993;
}
</style>
<script type="text/javascript" src="tabs/local/webfxlayout.js"></script>
<script type="text/javascript" src="funcs.js"></script>
<script language=jscript src="lang.js"></script>
<link href="style.css" type=text/css rel=stylesheet>
<link id="luna-tab-style-sheet" type="text/css" rel="stylesheet" href="tabs/css/luna/tab.css" />
<style type="text/css">
.dynamic-tab-pane-control .tab-page {
height: 300px;
}
.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {
height: 100px;
}
html, body {
background: ThreeDFace;
}
form {
margin: 0;
padding: 0;
}
body {
margin: 8px;
width: auto;
height: auto;
}
.dynamic-tab-pane-control h2 {
text-align: center;
width: auto;
}
.dynamic-tab-pane-control h2 a {
display: inline;
width: auto;
}
.dynamic-tab-pane-control a:hover {
background: transparent;
}
</style>
<script type="text/javascript" src="tabs/local/webfxlayout.js"></script>
<script type="text/javascript" src="tabs/js/tabpane.js"></script>
<BODY style="margin-left:0;margin-top:3;margin-right:0;margin-bottom:0;background-color:#eeeeee">
<div class="tab-pane" id="tabPane1">
<script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );
</script>
<div class="tab-page" id="tabPage1" >
<h2 class="tab">基本属性</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
<div id=divprop style="overflow:hidden;width:138;height:100%;background-color:#ffffff;border-style:inset;border-width:1">
<table id=tblprop style="margin:0" cellspacing="1" border=0 bgcolor=ThreeDFace>
<tr align=center>
<td bgcolor="#ffffff" style="width:70">属性</td>
<td bgcolor="#ffffff" style="width:130">值</td>
</tr>
</table>
</div>
</div>
<div class="tab-page" id="tabPage2" style="background-color:#eeeeee">
<h2 class="tab">流程属性</h2>
<script type="text/javascript"> tp1.addTabPage( document.getElementById( "tabPage2" ) );</script>
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
<br />
<br />
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2. This is text of tab 2.
</div>
</div>
<script type="text/javascript">
//<![CDATA[
setupAllTabs();
// ------------------------------------------------------
var curType = -1; // 0 step 1 action 2 flow
var curObj = null;
var tbl = tblprop; // 表格对象
function update()
{
if (curObj != null)
{
var ir = false;
switch(curType)
{
case 0: // step
//alert(parent.checkStepID(sid.value));
ir = sid.value != curObj.id;
if ((sid.value != curObj.id) && (parent.checkStepID(sid.value)))
{
alert(getMsg('STEPEXISTS'));
sid.value = curObj.id;
}
else
curObj.id = sid.value;
if (! ir)
ir = curObj.text != stext.value;
curObj.text = stext.value;
if (! ir)
ir = curObj.type != stype.value;
curObj.type = stype.value;
curObj.left = parseInt(sleft.value);
curObj.top = parseInt(stop.value);
break
case 1: // action
ir = sid.value != curObj.id;
if ((sid.value != curObj.id) && (parent.checkActionID(sid.value)))
{
alert(getMsg('ACTIONEXISTS'));
sid.value = curObj.id;
}
else
curObj.id = sid.value;
if (! ir)
ir = curObj.text != stext.value;
curObj.text = stext.value;
break;
case 2: // flow
ir = curObj.text != stext.value;
curObj.id = sid.value;
curObj.text = stext.value;
break;
}
if (ir)
parent.redraw();
}
}
function createText(id, value, readonly)
{
var ret = document.createElement('input');
ret.type = 'text';
ret.id = id;
if (value != null)
ret.value = value;
ret.style.overflow = 'hidden';
ret.style.width = '100%';
ret.style.border = 0;
if (readonly)
ret.readOnly = true;
ret.attachEvent('onchange', update);
return ret;
}
function createTypes(id, value)
{
var values = ['start', 'normal', 'end'];
var texts =['起始', '普通', '结束'];
var ret = document.createElement('select');
ret.id = id;
for (var n = 0; n < texts.length; n ++)
{
var op = new Option(texts[n], values[n]);
ret.options.add(op);
if (values[n] == value)
op.selected = true;
}
ret.attachEvent('onchange', update);
var div = document.createElement('div');
div.appendChild(ret);
div.style.border = '1px solid #F4F4F4';
div.style.width = '100%';// '118';
div.style.height = '17';
div.style.clip = 'rect(0px,118px,16px,0px)';
div.style.overflow = 'hidden';
ret = document.createElement('div');
ret.appendChild(div);
ret.style.width = '100%';// '120';
ret.style.height = '19';
ret.style.clip = 'rect(0px,150px,18px,0px)';
ret.style.overflow = 'hidden';
//ret.class = 'box';
return ret;
}
function createRow(txt, obj)
{
var tr = tbl.insertRow();
var td = tr.insertCell();
td.innerText = txt;
td.bgColor = '#ffffff';
td = tr.insertCell();
td.bgColor = '#ffffff';
td.appendChild(obj);
}
function createReadOnlyRow(txt, id, vlu)
{
var tr = tbl.insertRow();
var td = tr.insertCell();
td.innerText = txt;
td.bgColor = '#ffffff';
td = tr.insertCell();
td.id = id;
td.bgColor = '#ffffff';
td.innerText = vlu;
}
function createStepProp(obj)
{
var id = '', txt = '', type = '', left = '', top = '';
if (obj != null)
{
id = obj.id;
txt = obj.text;
type = obj.type;
left = obj.left;
top = obj.top;
}
var o = null;
o = createText('sid', id);
createRow('id', o);
o = createText('stext', txt);
createRow('text', o);
o = createTypes('stype', type);
createRow('type', o);
o = createText('sleft', left);
createRow('left', o);
o = createText('stop', top);
createRow('top', o);
}
function updateStepValue(obj)
{
if (obj != null)
{
sid.value = obj.id;
stext.value = obj.text;
for (var n = 0; n < stype.options.length; n ++)
if (stype.options[n].value == obj.type)
{
stype.options[n].selected = true;
break;
}
sleft.value = obj.left;
stop.value = obj.top;
}
}
function createFlowProp(obj)
{
var id = '', text = '';
if (obj != null)
{
id = obj.id;
text = obj.text;
}
var o = null;
o = createText('sid', id);
createRow('id', o);
o = createText('stext', text);
createRow('text', o);
}
function updateFlowValue(obj)
{
if (obj != null)
{
sid.value = obj.id;
stext.value = obj.text;
}
}
function createActionProp(obj)
{
var id = '', text = '', from = '', to = '';
if (obj != null)
{
id = obj.id;
text = obj.text;
from = obj.from;
to = obj.to;
}
var o = null;
o = createText('sid', id);
createRow('id', o);
o = createText('stext', text);
createRow('text', o);
o = createText('sfrom', from, true);
createRow('from', o);
o = createText('sto', to, true);
createRow('to', o);
}
function updateActionValue(obj)
{
if (obj != null)
{
sid.value = obj.id;
stext.value = obj.text;
sfrom.value = obj.from;
sto.value = obj.to;
}
}
function showProp(ptype, obj)
{
if (! parent.getDrawState())
update();
if (ptype != curType)
{
for (var n = tbl.rows.length - 1; n >= 1; n --)
tbl.deleteRow(n);
switch(ptype)
{
case 0:
createStepProp(obj);
break;
case 1:
createActionProp(obj);
break;
case 2:
createFlowProp(obj);
break;
}
}
else
switch(ptype)
{
case 0:
updateStepValue(obj);
break;
case 1:
updateActionValue(obj);
break;
case 2:
updateFlowValue(obj);
break;
}
curObj = obj;
curType = ptype;
}
//]]>
var tab = tabPage1;
tab.style.height = document.body.clientHeight - 23;
parent.showFlowProp();
</script>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?