当你在做显示层的时候,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>
<%@ 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>
<%@ 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 prefix="jquery" tagdir="/WEB-INF/tags/jquery" %>
第二步:调用taglib标签:
在<head></head>标签之间加入即可:
- <jquery:jquery></jquery:jquery>
- <jquery:jquery.easyui></jquery:jquery.easyui>
<jquery:jquery></jquery:jquery>
<jquery:jquery.easyui></jquery:jquery.easyui>
有多少个插件就以:jquery:tag文件名称 形式的标签调用.
如要导入JQuery 的 artdialog 插件,就加入<jquery:jquery.artdialog></jquery:jquery.artdialog>
查看一下JSP执行后的源代码,发现这些JS 等文件都已经加载进来了。