⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 prop.html

📁 一个用javascript实现的工作流定义工具
💻 HTML
字号:
<!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 + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -