1 阴影外框 3

1.1 效果图 3

1.2 代码 3

2 卡片样式 4

2.1 效果图 4

2.2 代码 4

3 非分页列表样式 5

3.1 效果图 5

3.2 代码 5

4 多选浏览框样式 6

4.1 效果图 6

4.2 代码 6

5 单选浏览框样式 8

5.1 效果图 8

5.2 代码 8

6 右键按钮 9

6.1 效果图 9

6.2 代码 9

7 输入框样式 10

7.1 效果图 10

7.2 代码 10

8 浏览按钮样式 10

8.1 效果图 10

8.2 代码 10

9 按钮样式（文档相关） 10

9.1 效果图 10

9.2 代码 10

10 按钮样式（添加明细） 10

10.1 效果图 10

10.2 代码 10

11 树形 11

11.1 效果图 11

11.2 代码 11

11.3 数据源格式 12

12 单选框树形 13

12.1 效果图 13

12.2 代码 13

13 分页列表 14

14 页面保护 14

14.1 效果图 14

14.2 代码 14

阴影外框

效果图

代码

<table width=100% height=100% border=”0″ cellspacing=”0″ cellpadding=”0″>

<colgroup>

<col width=”10″>

<col width=””>

<col width=”10″>

<tr>

<td height=”10″ colspan=”3″></td>

</tr>

<tr>

<td ></td>

<td valign=”top”>

<TABLE class=”Shadow”>

<tr>

<td valign=”top”>

内容…

</td>

</tr>

</TABLE>

</td>

<td></td>

</tr>

<tr>

<td height=”10″ colspan=”3″></td>

</tr>

</table>

卡片样式

效果图

代码

<TABLE class=ViewForm>

<COLGROUP>

<COL width=”30%”>

<COL width=”70%”>

<TBODY>

<TR class=Title>

<TH colSpan=2>一般</TH>

</TR>

<TR class=Spacing>

<TD class=Line1 colSpan=2></TD>

</TR>

<TR>

<TD>名称</TD>

<TDclass=Field>泛微软件有限公司</TD>

</TR>

<TR>

<TD class=Line colspan=2></TD>

</TR>

</TBODY>

</TABLE>

非分页列表样式

效果图

代码

<TABLE class=ListStyle cellspacing=1>

<COLGROUP>

<COL width=”33%”>

<COL width=”33%”>

<COL width=”33%”>

<TR class=Header>

<TH>列表名1</TH>

<TH>列表名2</TH>

<TH>列表名3</TH>

</TR>

<TR class=Line>

<TD colSpan=3></TD>

</TR>

<TR class=DataDark>

<TD>列表值A1</TD>

<TD>列表值A2</TD>

<TD>列表值A3</TD>

</TR>

<TR class=DataLight>

<TD>列表值B1</TD>

<TD>列表值B2</TD>

<TD>列表值B3</TD>

</TR>

</TABLE>

多选浏览框样式

效果图

代码

<table width=100% class=ViewForm valign=”top”>

<TR class=Spacing><TD class=Line1 colspan=4></TD></TR>

<TR>

<TD width=15%>条件1</TD>

<TD width=35% class=field><input class=InputStyle name=name ></TD>

<TD width=15%>条件2</TD>

<TD width=35% class=field>

<input class=InputStyle name=engname >

</TD>

</TR>

<TR class=Spacing><TD class=Line1 colspan=4></TD></TR>

</table>

<!–#################Search Table END//######################–>

<tr width=”100%”>

<td width=”60%”>

<!–############Browser Table START################–>

<TABLE class=BroswerStyle cellspacing=”0″ cellpadding=”0″>

<TR class=DataHeader>

<TH width=0% style=”display:none”>列表1</TH>

<TH width=”20%”>列表2</TH>

<TH width=”30%”>列表3</TH>

<TH width=”40%”>列表4</TH>

</tr>

<tr>

<td colspan=”4″ width=”100%”>

<div style=”overflow-y:scroll;width:100%;height:350px”>

<table width=”100%” id=”BrowseTable”>

<TD style=”display:’none'”>列表值1</TD>

<td width=”25%” style=”word-wrap:break-word”>列表值2</TD>

<TD width=”30%”>列表值3</TD>

<TD width=”40%”>列表值4</TD>

</TR>

</table>

</div>

</td>

</tr>

</TABLE>

</td>

<!–##########Browser Table END//#############–>

<td width=”40%” valign=”top”>

<!–########Select Table Start########–>

<table cellspacing=”1″ align=”left” width=”100%”>

<tr>

<td align=”center” valign=”top” width=”30%”>

<img src=”/images/arrow_u.gif” style=”cursor:hand” title=”<%=SystemEnv.getHtmlLabelName(15084,user.getLanguage())%>” onclick=”javascript:upFromList();”>

<br><br>

<img src=”/images/arrow_all.gif” style=”cursor:hand” title=”<%=SystemEnv.getHtmlLabelName(17025,user.getLanguage())%>” onClick=”javascript:addAllToList()”>

<br><br>

<img src=”/images/arrow_out.gif” style=”cursor:hand” title=”<%=SystemEnv.getHtmlLabelName(91,user.getLanguage())%>” onclick=”javascript:deleteFromList();”>

<br><br>

<img src=”/images/arrow_all_out.gif” style=”cursor:hand” title=”<%=SystemEnv.getHtmlLabelName(16335,user.getLanguage())%>” onclick=”javascript:deleteAllFromList();”>

<br><br>

<img src=”/images/arrow_d.gif” style=”cursor:hand” title=”<%=SystemEnv.getHtmlLabelName(15085,user.getLanguage())%>” onclick=”javascript:downFromList();”>

</td>

<td align=”center” valign=”top” width=”70%”>

<select size=”15″ name=”srcList” multiple=”true” style=”width:100%;word-wrap:break-word” >

</select>

</td>

</tr>

</table>

<!–########//Select Table End########–>

</td>

</tr>

</FORM>

</td>

</tr>

</TABLE>

<!–##############Shadow Table END//######################–>

</td>

<td></td>

</tr>

<tr>

<td height=”10″ colspan=”3″></td>

</tr>

</table>

单选浏览框样式

效果图

代码

< TABLE width=100% class=ViewForm>

<TR class=Spacing><TD class=Line1 colspan=4></TD></TR>

<TR>

<TD width=15%>条件1</TD>

<TD width=35% class=field><input class=InputStyle name=name></TD>

<TD width=15%>条件2</TD>

<TD width=35% class=field><input class=InputStyle name=engname ></TD>

</TR>

< TR>< TD class=Line colspan=4></ TD ></ TR >

</TABLE>

<TABLE class= BroswerStyle cellspacing=1>

<COLGROUP>

<COL width=”0%”>

<COL width=”33%”>

<COL width=”33%”>

<COL width=”33%”>

<TR class= DataHeader>

<TH width=0% style=”display:none”>列表1</TH>

<TH>列表名2</TH>

<TH>列表名3</TH>

<TH>列表名4</TH>

</TR>

<TR class=Line>

<TD colSpan=3></TD>

</TR>

<TR class=DataDark>

<TD>列表值A1</TD>

<TD>列表值A2</TD>

<TD>列表值A3</TD>

</TR>

<TR class=DataLight>

<TD>列表值B1</TD>

<TD>列表值B2</TD>

<TD>列表值B3</TD>

</TR>

</TABLE>

右键按钮

效果图

代码

<%@ include file=”/systeminfo/RightClickMenuConent.jsp” %>

<%

RCMenu += “{ 提交,javascript:submit(),_self} ” ;

RCMenuHeight += RCMenuHeightStep ;

RCMenu += “{ 返回,/main.jsp,_self} ” ;

RCMenuHeight += RCMenuHeightStep ;

/* 参数以”,”隔开第一个是名称 ，第二个是链接地址或者是javascript 方法，第三个是target 。 */

%>

<%@ include file=”/systeminfo/RightClickMenu.jsp” %>

输入框样式

效果图

代码

<INPUT class=”InputStyle” id=” sample” name=”sample”>

浏览按钮样式

效果图

代码

<BUTTON class=”Browser” id=”sample” name=”sample”></BUTTON>

按钮样式（文档相关）

效果图

代码

<button id=”createdoc” class=AddDocFlow><%=SystemEnv.getHtmlLabelName(82,user.getLanguage())%></buttong>

按钮样式（添加明细）

效果图

代码

<BUTTON Class=BtnFlow type=button accessKey=A onclick=”addRow<%=detailno%>(<%=detailno%>)”><U>A</U>-添加</BUTTON>

<BUTTON Class=BtnFlow type=button accessKey=E onclick=”if(isdel()){deleteRow1(<%=detailno%>);}”><U>E</U>-删除</BUTTON>

树形

效果图

代码

引入的JS与CSS

<script type=”text/javascript” src=”/js/xtree.js”></script>

<script type=”text/javascript” src=”/js/xmlextras.js”></script>

<script type=”text/javascript” src=”/js/cxloadtree.js”></script>

<link type=”text/css” rel=”stylesheet” href=”/css/xtree2.css” />

Body中的显示

<div id=”treeDIV” class=”cxtree” />

<script>

//以下初始化树

function initTree(){

//设置选中的节点

cxtree_id = ‘Node_123’;//初始化后选择中的节点ID

CXLoadTreeItem(“”, “/workflow/workflow/WorkflowXML.jsp”);//XML数据源

var tree = new WebFXTree();

tree.add(cxtree_obj);

document.getElementById(‘treeDIV’).innerHTML = tree;

cxtree_obj.expand();//展开树

}

</script>

数据源格式

<?xml version=”1.0″ encoding=”GBK” ?>

<TreeNode xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” Title=”envelope” xsi:type=”TreeNode”>

<TreeNode Title=”有子节点0″ NodeXmlSrc= “/childXml.jsp” NodeId=”workflow_70″ Target=”wfmainFrame” Href=” http://url ” />

<TreeNode Title=”无子节点1″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_142″ Target=”wfmainFrame” Href=http://url” />

<TreeNode Title=”无子节点2″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_50″ Target=”wfmainFrame” Href=” http://url ” />

<TreeNode Title=”无子节点3″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_148″ Target=”wfmainFrame” Href=” http://url ” />

<TreeNode Title=”无子节点4″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_49″ Target=”wfmainFrame” Href=” http://url ” />

</TreeNode>

TreeNode：树节点定义

Title：树节点显示的文字

Icon：节点的图标

NodeId：节点的ID

Target：点击链接后的目标地址

Href：点击后的链接地址

NodeXmlSrc：子节点的数据地址

单选框树形

效果图

代码

引入的JS与CSS

<script type=”text/javascript” src=”/js/xtree.js”></script>

<script type=”text/javascript” src=”/js/xmlextras.js”></script>

<script type=”text/javascript” src=”/js/cxloadtree.js”></script>

<link type=”text/css” rel=”stylesheet” href=”/css/xtree2.css” />

Body中的显示

<div id=”treeDIV” class=”cxtree” />

<script>

//设置单选

var appendimg = ‘subject3’;//指定节点前的图标为subject3.gif的节点后出现radio框

var appendname = ‘selObj’;//生成的radio控件名称

//以上二个变量删除，则使用普通树，如果加上这二个变量，则显示单选radio框

//以下初始化树

function initTree(){

//设置选中的节点

cxtree_id = ‘Node_123’;//初始化后选择中的节点ID

CXLoadTreeItem(“”, “/workflow/workflow/WorkflowXML.jsp”);//XML数据源

var tree = new WebFXTree();

tree.add(cxtree_obj);

document.getElementById(‘treeDIV’).innerHTML = tree;

cxtree_obj.expand();//展开树

}

</script>

数据源格式

<?xml version=”1.0″ encoding=”GBK” ?>

<TreeNode xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” Title=”envelope” xsi:type=”TreeNode”>

<TreeNode Title=”有子节点0″ NodeXmlSrc= “/childXml.jsp” NodeId=”workflow_70″ Target=”wfmainFrame” Href=” http://url ” />

<TreeNode Title=”无子节点1″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_142″ Target=”wfmainFrame” Href=http://url” />

<TreeNode Title=”无子节点2″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_50″ Target=”wfmainFrame” Href=” http://url ” />

<TreeNode Title=”无子节点3″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_148″ Target=”wfmainFrame” Href=” http://url ” />

<TreeNode Title=”无子节点4″ Icon=”/LeftMenu/ThemeXP/page.gif” NodeId=”workflow_49″ Target=”wfmainFrame” Href=” http://url ” />

</TreeNode>

TreeNode：树节点定义

Title：树节点显示的文字

Icon：节点的图标

NodeId：节点的ID

Target：点击链接后的目标地址

Href：点击后的链接地址

NodeXmlSrc：子节点的数据地址

分页列表

见《泛微分页控件使用帮助及规范》

页面保护

效果图

代码

function protectCreatorFlow(){

var opt = true;

try {

opt = document.getElementById(‘src’).value==”;

}

catch(e){

opt = true;

}

if(opt && !checkDataChange())

event.returnValue=”提示内容”;

}

/ecology/js/checkDate.js

转载请注明：赫非域 » JSP式样编写指南