JSP 中集成JQuery 插件的实用方法

来源：互联网发布：网络成瘾对身体的危害编辑：程序博客网时间：2024/05/21 22:35

当你在做显示层的时候，JSP中可能需要集成这样那样的框架，如JQuery 的各种插件，又或许是其他的prototype 等插件，这时你就需要导入多个JS、CSS文件，一个插件可能还不止一个JS、CSS文件，这时文件头都是各种JS、CSS标签。这个还不打紧，万一你要卸载某个插件，这时你不得不再去找这个插件加载了哪些文件，着实麻烦，现在教你一个简单方法，就是用 tag 标签。

这里用集成JQuery插件为例：

1. 首先在WEB-INF下新建一个tags目录，专门存放各种插件；

2. 其次在tags目录下新建jquery，存放jquery插件的tag，并新建相关tag，

tag的内容就是插件需要调用的JS、CSS文件：

jquery.tag:

<%@ tag pageEncoding="utf-8"%><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.6.2.min.js"></script>

jquery.easyui.tag

<%@ tag import="com.zte.ecc.util.Config" %><%@ tag pageEncoding="utf-8"%><link media="all"  type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/easyui/themes/default/easyui.css"/><link media="all"  type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/easyui/themes/icon.css"/><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/easyui/jquery.easyui.min.js?ver=<%=Config.getVERSION()%>"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/easyui/jquery.easyui.extend.js"></script>

tip:还可以导入JAVA类，动态指定版本号。

...此处省略其他的tag，有多少插件就建多少tag。

如图所示；

3. 最后, JSP 调用JQuery插件

第一步：建立一个taglib标签，指定标签指向的目录：

<%@ taglib prefix="jquery" tagdir="/WEB-INF/tags/jquery" %>

第二步：调用taglib标签：

在<head></head>标签之间加入即可：

<jquery:jquery></jquery:jquery><jquery:jquery.easyui></jquery:jquery.easyui>

有多少个插件就以：jquery:tag文件名称形式的标签调用.

如要导入JQuery 的 artdialog 插件，就加入<jquery:jquery.artdialog></jquery:jquery.artdialog>

查看一下JSP执行后的源代码，发现这些JS 等文件都已经加载进来了。