Struts2+JQuery插件的使用

Struts2—使用JQuery插件(2) 本节介绍更多更高级的JQuery控件.

1.首先做好基本配置，这次将JSON 插件一起加入

struts2xml文件

struts-jquery.xml

2.选项卡效果

2.1选项卡的内容在本地

新建localtab.jsp

关于JqueryUI 插件:

在Jquery官方，提供了很多的jquery插件，其中jqueryUI 是一套关于用户界面的插件，使用它可以很方便的做出各种界面效果，而且还提供了themes 各种主题包的下载，可以很方便的更换主题

在为Struts2做插件的时候，struts2-jquery插件将jquery官方的jquery核心js文件，还有jquery的UI插件，以及主题(themes)都打进了jar包中，如下图

在localtab.jsp文件中添加如下代码:

运行该jsp文件，效果如下:

字体有些大，我们可以通过css将字体进行调整

上面我们使用标签引入jquery库的时候，只是使用

引入了jqueyUI，此时会有一个默认的themes被应用。我们可以查看生成的HTML 源代码：

可以看到themes的名称为smoothness,那么插件包中都提供了那些themes呢，我们可以查看struts2-jquery-plugin-1.8.X.ja文件:

可以看到提供了cupertino ,darkness,lightness, redmod,smoothness 这样的几个风格，其中smoothness是默认的风格.

2.2改变风格

如何改变风格呢?很简单在中只需要给jquerytheme属性设置风格名称即可:

做完这个设置之后，浏览页面：

可以看到这个页面的风格发生了变化

插件包中提供的主题毕竟有限，如果我们需要更多的主题，我们可以到jquery官方网站下载更多的主题，甚至可以使用官网提供的在线工具定制出我们需要的主题.

Jquey首页:

定制主题(theme)

下载定制好的主题:

下载之后的文件, 这里我下载的是名称为start的themes：

进入development-bundle 文件夹:

进入themes文件夹

里面有两个themes，一个是base，一个是start，这两个文件夹的目录结构都是一样的，不光是这两个一样，所有的jquery UI的themes目录结构都是一样的，里面都是一些css样式，还有图片文件。

关于下载包中的其它文件，struts2-jquery-plugin-1.8.2.jar 文件中已近包含了。我们只需要themes文件夹中的主题文件夹

那么我们如何在项目中应用下载的主题呢？参考官方文档中 标签的说明，我们可以做如下的操作:

在WEB-Root中新建一个文件夹:

将下载的start 主题包拷贝到这个文件夹中:

我们发现下载的ui.theme.css 文件与标准jar包中的不一样。仔细对比发现下载的start中的ui.theme.css并不完整，其它的部分分布在ui.tabs.css,ui.slider.css文件中。所以要想使用完整的，只需要将其它部分的加入进来即可。

仔细观察我们发现还有一个文件，jquery-ui.1.7.2.custom.css 文件，该文件其实是在我们网站下载的时候定制的，我们定制了多少内容，它里面就有多少内容。而我下载的时候定制的是全部的内容，所以只需要将该文件的文件名改名为ui.theme.css，然后将其它的css文件删除即可.

修改 标签，指定主题名称,和自定义主题安装目录:

运行jsp：

2.3定制皮肤

多下载几个themes 放入到应用各中。在jsp 页面中放几个链接，当点击链接的时候传递 themes 的名称到Action ，这里不需要编写Action 类，使用默认的Action 即可，只需要在 struts-jquery.xml 文件中做配置即可，让重新返回到 jsp 页面，然后我们可以使用标签取出传递的themes 名称即可

以下是下载的thems ：

在localtab.jsp 页面上添加链接

配置Action 。在struts-jquery.xml文件中配置

修改localtab.jsp页面:

2.4选项卡的内容在远程服务器，通过ajax 方式获取

新建remotetab.jsp 文件，内容如下

新建RemoteTabAction 类

部署Action，在struts-jquery.xml

新建tabContent.jsp

3.日历控件

新建datepicker.jsp 文件

我们发现出来的是英文界面。在struts2-jquery-plugin-1.8.2.jar文件中可以看到一些国际化文件：

这些js 文件需要引入到页面才会生效，默认是英文。查看标记的说明文档，我们发现了locale 这样一个属性，这个属性可以用来导入国际化的js 文件，那那这个属性的值写成什么呢？当然不能胡写，我们仔细观察这些js 文件，因为我们需要用到日历，所以仔细观察日历相关的js 文件：

很显然，如果要显示简体中文，应该写: zh-CN ，所以修改datepicker.jsp 文件中的内容:

再次运行：

如果需要选择很久以前的日期或者以后的日期，很显然上面的方式就不是很方便了，我们需要提供可以选择的年和月:

在datepicker.jsp 文件中添加如下代码:

面的是在非IE中的运行结果，如果在IE中效果就不是那样了：