radio 单选按钮
对应HTML中的单选按钮radio。示例代码如下：
| <s:radio list="#{'1':'男','0':'女'}" label="性别" name="gender" value="1" [g1] ></s:radio> |
| <tr> <td class="tdLabel"> <label for="test_gender" class="label"> 性别: </label> </td>
<td> <input type="radio" name="gender" id="test_gender1" checked="checked" value="1" /> <label for="test_gender1"> 男 </label> <input type="radio" name="gender" id="test_gender0" value="0" /> <label for="test_gender0"> 女 </label> </td> </tr> |
select下拉框
生成HTML中的<select>标签。示例代码如下：
| <s:select name="address" label="所在地" list="{'北京','上海','深圳'}"></s:select> |
<tr> <td class="tdLabel"><label for="test_" class="label">所在地:</label></td> <td> <select name="address" id="test_"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="深圳">深圳</option> </select> </td> </tr> |
另一种写法： <s:select label="所在地" list="#{'1':'北京','2':'上海','3':'深圳'}"></s:select> |
生成的源代码： |
autocompleter自动完成框
使用autocompeter之前，一定要在页面中增加(代码中阴影显示的行)：
| <%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <%@ taglib prefix="s" uri="/struts-tags" %> <%@ taglib prefix="sx" uri="/struts-dojo-tags" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>测试struts2</title> </head> <sx:head /> |
项目中引入：struts2-dojo-plugin-2.2.1.1.jar。 struts2中将所有ajax相关的内容都放入了这个包中。
Autocompleter简单示例：
| <sx:autocompleter label="专业" name="major" list="{'计算机应用','计算机工程','计算机数学','英语专业','英语外贸'}" /> |
| 执行效果，在框中输入文字：
|
autocompleter动态数据加载
实际中，使用autocomleter时，数据量通常较大，不可能一下子进行加载，需要我们使用ajax按需加载，类似于Google Suggest的效果。我们使用动态数据来完成更复杂的autocomplete的使用：
data.jsp功能是生成数据，代码如下：
| <%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <%@ taglib prefix="s" uri="/struts-tags" %> ['计算机软件','计算机应用','计算机理论','人工智能','英语口语','英语外贸','日语外贸','中文'] |
test.jsp代码如下：
| <sx:autocompleter label="专业" name="major" href="data.jsp" loadOnTextChange="true" loadMinimumCount="0" autoComplete="false" showDownArrow="true" /> |
效果：
datetimepicker 标签日期选择器
典型使用代码：
| <sx:datetimepicker language="zh" name="birthday" displayFormat="yyyy-MM-dd" label="输入出生日期"></sx:datetimepicker> |
| <sx:head extraLocales="zh" /> |
效果：
中文bug问题的解决方式(当月份大于十月时会出现乱码问题)：
- 解压struts2-dojo-plugin-2.3.1.jar
- 分别打开org\apache\struts2\static\dojo\nls\dojo-zh.js和dojo-zh_cn.js
- 将下面代码copy进去
| dojo.provide("nls.dojo_zh");dojo.provide("dojo.i18n.calendar.nls.gregorian");dojo.i18n.calendar.nls.gregorian._built=true;dojo.provide("dojo.i18n.calendar.nls.gregorian.zh");dojo.i18n.calendar.nls.gregorian.zh={"days-standAlone-narrow":["日","一","二","三","四","五","六"],"eras":["公元前","公元"],"am":"上午","months-format-abbr":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"days-format-abbr":["周日","周一","周二","周三","周四","周五","周六"],"pm":"下午","months-format-wide":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"months-standAlone-narrow":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"days-format-wide":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],"field-weekday":"Day of the Week","dateFormat-medium":"yyyy MMM d","field-second":"Second","field-week":"Week","timeFormat-full":"HH:mm:ss z","field-year":"Year","field-minute":"Minute","timeFormat-medium":"HH:mm:ss","field-hour":"Hour","dateFormat-long":"yyyy MMMM d","field-day":"Day","field-dayperiod":"Dayperiod","field-month":"Month","dateFormat-short":"yy/MM/dd","field-era":"Era","timeFormat-short":"HH:mm","timeFormat-long":"HH:mm:ss z","dateFormat-full":"EEEE, yyyy MMMM dd","field-zone":"Zone"};dojo.provide("dojo.i18n.calendar.nls.gregorianExtras");dojo.i18n.calendar.nls.gregorianExtras._built=true;dojo.provide("dojo.i18n.calendar.nls.gregorianExtras.zh");dojo.i18n.calendar.nls.gregorianExtras.zh={"dateFormat-yearOnly":"yyyy'年'"};dojo.provide("dojo.i18n.calendar.nls.gregorian");dojo.i18n.calendar.nls.gregorian._built=true;dojo.provide("dojo.i18n.calendar.nls.gregorian.zh");dojo.i18n.calendar.nls.gregorian.zh={"days-standAlone-narrow":["日","一","二","三","四","五","六"],"eras":["公元前","公元"],"am":"上午","months-format-abbr":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"days-format-abbr":["周日","周一","周二","周三","周四","周五","周六"],"pm":"下午","months-format-wide":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"months-standAlone-narrow":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"days-format-wide":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],"field-weekday":"Day of the Week","dateFormat-medium":"yyyy MMM d","field-second":"Second","field-week":"Week","timeFormat-full":"HH:mm:ss z","field-year":"Year","field-minute":"Minute","timeFormat-medium":"HH:mm:ss","field-hour":"Hour","dateFormat-long":"yyyy MMMM d","field-day":"Day","field-dayperiod":"Dayperiod","field-month":"Month","dateFormat-short":"yy/MM/dd","field-era":"Era","timeFormat-short":"HH:mm","timeFormat-long":"HH:mm:ss z","dateFormat-full":"EEEE, yyyy MMMM dd","field-zone":"Zone"};dojo.provide("dojo.widget.nls.TimePicker");dojo.widget.nls.TimePicker._built=true;dojo.provide("dojo.widget.nls.TimePicker.zh");dojo.widget.nls.TimePicker.zh={"any":"any"};dojo.provide("dojo.widget.nls.DropdownTimePicker");dojo.widget.nls.DropdownTimePicker._built=true;dojo.provide("dojo.widget.nls.DropdownTimePicker.zh");dojo.widget.nls.DropdownTimePicker.zh={"selectTime":"Select time"};dojo.provide("dojo.widget.nls.DropdownDatePicker");dojo.widget.nls.DropdownDatePicker._built=true;dojo.provide("dojo.widget.nls.DropdownDatePicker.zh");dojo.widget.nls.DropdownDatePicker.zh={"selectDate":"Select a date"}; |
- 保存时，使用utf-8编码进行保存。
- 将修改成的两个文件，拖曳到压缩包中，操作如下：
默认值value无法设置的问题：
| <sx:datetimepicker language="zh" name="birthday" value="'2007-7-14'" displayFormat="yyyy-MM-dd" label="输入出生日期"></sx:datetimepicker> |
| 注意在如上代码中，value属性值增加了单引号处理。这样既可完成设置value！ |
doubleselect 联动下拉框
不太灵活，一般建议手动完成！ 作为扩展自学内容！
optiontransferselect 选项移动下拉框
实现上面效果，代码如下：
| <s:optiontransferselect label="职业选择" name="alljob" list="{'计算机软件开发','硬件维修','软件测试'}" doubleList="{'a','aa','aaa'}" doubleName="myjob" leftTitle="计算机行业职业细分" rightTitle="已经选中的职业" leftDownLabel="向下" leftUpLabel="向上" rightUpLabel="向上" rightDownLabel="向下" headerKey="" headerValue="请选择职业" ></s:optiontransferselect> |
optgroup 选项分组下拉框
作为扩展自学内容！写出文档！ 其实有html标签可以写：
| <select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup>
<optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select> |
效果如下：
<sx:textarea /> 文本域
代码如下：
<sx:textarea label="简介" name="aa" value="ccc" ></sx:textarea>
效果：
常用非表单UI标签
fielderror、actionerror、actionmessage 输出错误信息
跟数据校验结合紧密。见数据校验相关内容！
设置value值为1的选项默认选中！
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
