|
|
一、表單標簽的通用屬性
對于表單標簽,分為兩種標簽:form標簽本身,和所有來包裝單個的表單元素的其他標簽.form標簽本身的行為不同于它內部的元素,這是很重要的.在我們為所有表單標簽,包括form標簽在內,提供一個參考手冊之前,我們必須先描述一些通用的屬性.
通用屬性
| 屬性 |
Theme |
數據類型 |
描述 |
| cssClass |
simple |
String |
定義 html class 屬性 |
| cssStyle |
simple |
String |
定義html style 屬性 |
| title |
simple |
String |
定義html title 屬性 |
| disabled |
simple |
String |
定義html disabled 屬性 |
| label |
xhtml |
String |
定義表單元素的label |
| labelPosition |
xhtml |
String |
定義表單元素的label位置(top/left),缺省為left |
| requiredposition |
xhtml |
String |
定義required 標識相對label元素的位置 (left/right),缺省是 right |
| name |
simple |
String |
表單元素的name映射 |
| required |
xhtml |
Boolean |
在label中添加 * (true增加,否則不增加) |
| tabIndex |
simple |
String |
定義html tabindex 屬性 |
| value |
simple |
Object |
定義表單元素的value |
模板相關屬性
| 屬性 |
Theme |
數據類型 |
描述 |
| templateDir |
n/a |
String |
定義模板目錄 |
| theme |
n/a |
String |
定義theme名稱 |
| template |
n/a |
String |
定義模板名稱 |
Javascript相關屬性
| 屬性 |
Theme |
數據類型 |
描述 |
| onclick |
simple |
String |
html javascript onclick 屬性 |
| ondbclick |
simple |
String |
html javascript ondbclick 屬性 |
| onmousedown |
simple |
String |
html javascript onmousedown 屬性 |
| onmouseup |
simple |
String |
html javascript onmouseup 屬性 |
| onmouseover |
simple |
String |
html javascript onmouseover 屬性 |
| onmouseout |
simple |
String |
html javascript onmouseout 屬性 |
| onfocus |
simple |
String |
html javascript onfocus 屬性 |
| onblur |
simple |
String |
html javascript onblur 屬性 |
| onkeypress |
simple |
String |
html javascript onkeypress 屬性 |
| onkeyup |
simple |
String |
html javascript onkeyup 屬性 |
| onkeydown |
simple |
String |
html javascript onkeydown 屬性 |
| onselect |
simple |
String |
html javascript onselect 屬性 |
| onchange |
simple |
String |
html javascript onchange 屬性 |
Tooltip 相關屬性
| 屬性 |
數據類型 |
缺省值 |
描述 |
| tooltip |
String |
none |
設置此組件的tooltip |
| tooltipIcon |
String |
/webwork/static/tooltip/tooltip.gif |
tooltip圖標的url |
| tooltipAboveMousePointer |
Boolean |
false |
在鼠標光標位置上放置tooltip.另外設置 tooltipOffseY 允許你設置從鼠標光標位置的垂直位移. |
| tooltipBgColor |
String |
#e6ecff |
tooltip的背景色. |
| tooltipBgImg |
String |
none |
背景圖片. |
| tooltipBorderWidth |
String |
1 |
tooltip邊框的寬度. |
| tooltipBorderColor |
String |
#003399 |
tooltip邊框的背景色 |
| tooltipDelay |
String |
500 |
顯示Tooltip的時間延遲(毫秒). 類似基于操作系統的tooltip的行為. |
| tooltipFixCoordinateX |
String |
not specified |
固定tooltip在指定的X坐標上.例如和tooltipSticky屬性結合時很有用. |
| tooltipFixCoordinateY |
String |
not specified |
固定tooltip在指定的Y坐標上.例如和tooltipSticky屬性結合時很有用. |
| tooltipFontColor |
String |
#000066 |
字體顏色. |
| tooltipFontFace |
String |
arial,helvetica,sans-serif |
字體,例如 verdana,geneva,sans-serif |
| tooltipFontSize |
String |
11px |
字體大小,例如 30px |
| tooltipFontWeight |
String |
normal |
Font weight. 可以是 normal 或者 bold |
| tooltipLeftOfMousePointer |
Boolean |
false |
在鼠標光標位置左側的Tooltip位置 |
| tooltipOffsetX |
String |
12 |
相對鼠標光標位置的水平位移. |
| tooltipOffsetY |
String |
15 |
相對鼠標光標位置的垂直位移. |
| tooltipOpacity |
String |
100 |
tooltip的透明度. 不透明度是行對透明度而言的.設置的值必須是一個介于0(完全透明)和100(不透明)之間的數字.Opera尚未支持. |
| tooltipPadding |
String |
3 |
內部間隔,例如,邊框和內容之間的空格,例如文字或者圖片 |
| tooltipShadowColor |
String |
#cccccc |
使用指定的顏色創建陰影. |
| tooltipShadowWidth |
String |
5 |
使用指定的寬度(距離)創建陰影. |
| tooltipStatic |
Boolean |
false |
就像基于操作系統的tooltip, tooltip不隨著鼠標光標移動而移動. |
| tooltipSticky |
Boolean |
false |
tooltip一直停留在它初始的位置,直到另外一個tooltip被激活,或者用戶點擊了文檔. |
| tooltipStayAppearTime |
String |
0 |
指定一個tooltip消失的時間間隔(毫秒),即時鼠標還在相關的HTML元素上不懂,設置<=0,就和沒有定義一樣. |
| tooltipTextAlign |
String |
left |
調整包括標題和tooltip內容的文字位置.可以是right, left 或 justify |
| tooltipTitle |
String |
none |
標題 |
| tooltipTitleColor |
String |
#ffffff |
title文字的顏色 |
| tooltipWidth |
String |
300 |
tooltip的寬度 |
二、表單標簽
1、checkbox（復選框）
struts2的checkbox標簽在使用的時候需要注意它的兩個屬性。value和fieldValue，在其他的標簽中value是真實值。而在
checkbox中，value如果為true，就表示復選框被選中；如果為false就表示不被選中。fieldValue才是此復選框對應的真實的
值。
 <s:checkbox name="xingming" value="false" fieldValue="aaaaa" label="value=false" />
<s:checkbox name="xingming" value="true" fieldValue="aaaaa" label="value=true"/>
結果：
2、checkboxlist（復選框組）
<s:checkboxlist name="a" label="請選擇您喜歡的圖書" labelposition="top"
list="{'struts2.0','hibernate','spring'}"/>
<!--用Map對象生成多個復選框-->
<s:checkboxlist name="b" label="請選擇您喜歡的圖書" labelposition="top"
list="#{'struts2.0':'2006/10','hibernate':'2007/8','spring':'2008/9'}"
listKey="key" listValue="value"/>
3、combobox（組合框）
combobox標簽生成一個單行文本框和下拉列表框的組合，但值對應一個請求參數。
<s:combobox label="請選擇您喜歡的圖書" theme="css_xhtml" labelposition="top"
list="{'struts2.0','hibernate','spring'}" size="20" maxlength="20" name="book"/>
結果：
4、select（下拉菜單）
<s:select label="請選擇您喜歡的書籍"
labelposition="top" name="books"
list="{'struts2.0','hibernate','spring','ajax'}"
multiple="true" size="2" required="true"/>
<s:select list="#{'struts':'aaaa','hibernate':'bbbb','spring':'cccc','ajax':'dddd'}"
listKey="key" listValue="value" label="選擇你喜歡的作者" labelposition="top"
name="b" />
結果：
5、doubleselect
doubleselect標簽會生成一個級聯列表框，當選擇第一個下拉列表，第二個下拉框的內容也會隨之改變。
<s:set name="bs"
value="#{'數據標簽':{'action','bean','date','set'},
'控制標簽':{'iterator','append','subset'},'表單標簽':{'select','checkbox','radio'}}"/>
<s:form action="x">
<s:doubleselect label="請選擇您喜歡的圖書" labelposition="top" size="3"
name="author" list="#bs.keySet()" multiple="false"
doubleName="book" doubleList="#bs[top]" doubleMultiple="false"
doubleSize="3"/>
</s:form>
結果：
6、optiontransferselect
<s:optiontransferselect
doubleList="{'javaScript','ajax','sql'}"
list="{'struts2.0','hibernate','spring'}"
name="cnbook" doubleName="enbook"
addAllToLeftLabel="全部向左移" addAllToRightLabel="全部向右移"
addToLeftLabel="向左移" addToRightLabel="向右移"
allowAddAllToLeft="true" allowAddAllToRight="true"
allowAddToLeft="true" allowAddToRight="true"
allowUpDownOnLeft="true"allowUpDownOnRight="true"
multiple="true" doubleMultiple="true"
emptyOption="true" doubleEmptyOption="true"
headerKey="cnKey" doubleHeaderKey="enKey"
headerValue="--選擇中文圖書--" doubleHeaderValue="--choose English book--"
allowSelectAll="true" selectAllLabel="全部選中"
leftTitle="中文圖書" rightTitle="Einglish books"
leftDownLabel="下移" rightDownLabel="下移"
leftUpLabel="上移" rightUpLabel="上移"
label="圖書管理"
>
</s:optiontransferselect>
結果：
7、radio
<s:radio name="a" label="選擇您喜愛的圖書" labelposition="top"
list="'struts','hibernate','spring'"/>
<s:radio name="b" label="選擇您喜愛的圖書" labelposition="top"
list="#{'struts':'111','hibernate':'222','spring':'333'}"
listKey="key" listValue="value"/>
<s:bean name="com.zzn.books.BookService" id="bs"/>
<s:radio name="c" label="選擇您喜愛的圖書" labelposition="top"
list="#bs.books" listKey="name" listValue="author"/>
結果：
8、optgroup
optgroup標簽用于生成一個下拉列表框的選項組，因此，該標簽必須放在<s:select.../>標簽中使用。
<s:select name="book" label="選擇你喜歡的作者" labelposition="top"
list="#{'struts':'aaaa','hibernate':'bbbb','spring':'cccc','ajax':'dddd'}"
listKey="key" listValue="value" >
<s:optgroup label="Rod Johnson"
list="#{'aaaaaaaa':'bbbbbbbb'}"
listKey="key" listValue="value"/>
<s:optgroup label="David Flanagan"
list="#{'javaScript:The Definitive Guide':'David'}"
listKey="key" listValue="value"/>
</s:select>
結果：
9、token
這是一個防止多次提交表單的標簽，能避免刷新頁面時多次提交，如果要該標簽起作用，應該在struts.xml中用TokenInterceptor攔截器或TokenSessionStoreInerceptor攔截器。
<s:tolen/>
10、head
該標簽主要用于生成HTML主要頁面的HEAD部分。如果需要頁面中有用Ajax組件，使用一個帶theme=”ajax“屬性的head標簽，就可以將標準Ajax的頭信息包含在頁面中。
<s:head theme="ajax"/>
11、updownselect
<s:updownselect name="a" label="請選擇您喜歡的圖書" labelposition="top"
moveUpLabel="向上移動"
list="{'struts2.0','hibernate','spring'}"/>
<s:updownselect name="b" label="請選擇您喜歡的圖書" labelposition="top"
moveDownLabel="向下移動" selectAllLabel="全部選擇"
list="#{'struts2.0':'2006/10','hibernate':'2007/8','spring':'2008/9'}"
listKey="key" listValue="value" emptyOption="true"/>
結果：
12、actionerror和actionmessage
actionerror和actionmessage這兩個標簽用法完全一樣，都是負責輸出Action實例里封裝的信息，區別是actionerror
標簽負責輸出Action市里的getActionError()方法的返回值，而actionmessage標簽負責輸出Action實例的
getActionMessage()的返回值。
13、tree和treenode初步
注意：用這個標簽加上<s:head theme="ajax"/>
<s:tree label="計算機圖書" id="book" theme="ajax"
showRootGrid="true" showGrid="true" treeSelectedTopic="treeSelected">
<s:treenode label="張孝祥" id="zxx" theme="ajax">
<s:treenode label="java教程" id="java" theme="ajax"/>
<s:treenode label="javascript寶典" id="javascript" theme="ajax"/>
<s:treenode label="j2ee詳解" id="j2ee" theme="ajax"/>
</s:treenode>
<s:treenode label="李剛" id="lg" theme="ajax" >
<s:treenode label="struts2.0" id="struts" theme="ajax"/>
<s:treenode label="spring" id="spring" theme="ajax"/>
<s:treenode label="hibernate" id="hibernate" theme="ajax"/>
</s:treenode>
<s:treenode label="David" id="d" theme="ajax" >
<s:treenode label="ajax" id="ajax" theme="ajax"/>
</s:treenode>
</s:tree>
13、datetimepicker（日歷控件）
<s:datetimepicker name="order.date" label="購買日期" toggleType="explode" value="today"/>
結果：
|