引入公共头部时,控制引入js、css、title,避免重复造轮子,能少敲点代码就少敲点
1.头部或底部文件中引入jstl的标签库
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
2.这一部分放入公共的头或底部文件中,放置在待引入css和js的位置,两种方式具体应用中有细微差别
<!-- 1.可以分开引入 -->
<c:if test="${ not empty param.css}">
<c:forEach var="css" items="${fn:split(param.css, ',')}">
<c:if test="${not empty css}">
<link type="text/css" rel="stylesheet" href="/static/css/${css}">
</c:if>
</c:forEach>
</c:if>
<c:if test="${ not empty param.js || not empty param.ajs}">
<c:forEach var="js" items="${fn:split(param.js, ',')}">
<c:if test="${not empty js}">
<script type="text/javascript" src="/static/js/${js }"></script>
</c:if>
</c:forEach>
<c:forEach var="js" items="${fn:split(param.ajs, ',')}">
<c:if test="${not empty js}">
<script type="text/javascript" src="${js }"></script>
</c:if>
</c:forEach>
</c:if>
<!-- 2.或者可以一起引入 -->
<c:if test="${not empty param.css || not empty param.js || not empty param.ajs}">
<c:forEach var="css" items="${fn:split(param.css, ',')}">
<c:if test="${not empty css}">
<link type="text/css" rel="stylesheet" href="/static/css/${css}">
</c:if>
</c:forEach>
<c:forEach var="js" items="${fn:split(param.js, ',')}">
<c:if test="${not empty js}">
<script type="text/javascript" src="/static/js/${js }"></script>
</c:if>
</c:forEach>
<c:forEach var="js" items="${fn:split(param.ajs, ',')}">
<c:if test="${not empty js}">
<script type="text/javascript" src="${js }"></script>
</c:if>
</c:forEach>
</c:if>
3.这一部分放置在引入公共头部或底部的页面中
<!-- ajs表示引入外部的js,在实现中是直接src=ajs;js表示引入系统内部的js,在实现中是直接src="公共的路径"+ajs -->
<!-- 这里还可以声明头部的title等其他的参数,参数是自定义的 在头部或底部文件里直接使用”${param.参数 }“就可以拿到 -->
<jsp:include page="../common/header.jsp">
<jsp:param name="css" value="test.css"/>
<jsp:param name="js" value="test.js,test2.js"/>
<jsp:param name="ajs" value="http://test.js, http://test2.js"/>
</jsp:include>
css也可以使用类似js的方式。
分享到:
相关推荐
js控制css属性对照表 免分数下载 无私分享
cognos引入外部JS+CSS 引入jquery 自定义dialogue 本例子写了一个jquery的dialogue例子,点击弹出一个界面美观的dialogue
云台控制器+css+jQuery+canvas(鼠标移入移出,按钮改变样式)
bootstrap的switch控件需要引入的js和css文件,自己整理的!
Mvc结构下js
css模拟title和alt的提示效果,可以查看淘宝网里的产品展示页面,用于显示产品的规格和相关信息.
openlayer 需引入ol.css ,ol.js,就和Arcgis 引入 Arcgis JS API 一样的道理
一个本地化的 folium 地图资源,包括了js,css 等文档,配合python脚本将对应资源的引用本地化,避免了引入url资源时跨境加载js/css资源网络慢的问题,提升本地folium地图的加载速度,速度提升 800 倍,让地图打开...
大屏回凹头部 css3特效动画按路径移动 css即层叠样式表,想必学习前端的小伙伴们已经非常熟悉了。那么大家应该都知道,一个炫酷的动画特效,能使你的网站显得更加高大上,丰富内容吸引用户。
Js 控制CSS滤镜,想实现图和图之间切换有效果的,这个必须看
页面内引用element ui的js 及css离线版 便于不想通过webpack 打包和前后端分离使用
CSS3现代头部导航是一款纯css3的现代简洁头部导航菜单。 CSS3现代头部导航演示图:
CSS控制视频的宽高 video元素自身控制 01 通过元素自身属性控制 在HTML5中,经常会通过为video元素添加宽高的方式给视频预留一定的空间,这样浏览器在加载页面时就会预先确定视频的尺寸,为其保留合适的空间,使页面...
可控制的图片左右滚动的js+css,实现效果类似于flash
JS和CSS和C++互相调用
js 动态引用外部js,css文件 可以动态修改网页 样式。。。
html+javascript+css(8本chm)无论对于我们jsp或者asp的Web开发的初学者都很有用,关键是方便我们随时参考和查阅。
JavaScript CSS代码压缩工具
一开始想法是为了统一管理css\js,写在jsp页面上,但加载时一股脑全加载进来,后来改写成用关键字来引入对应的样式及脚本,但又后来觉得可能引入的便签上有特殊属性,再次扩展,最终演变成这样的书写格式,这样统一...