`
liuxing87327
  • 浏览: 82166 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

引入公共头部时,控制引入js、css、title

    博客分类:
  • java
阅读更多

引入公共头部时,控制引入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的方式。

分享到:
评论

相关推荐

    vue 引入公共css文件的简单方法(推荐)

    在入口 js 文件(通常是 main.js)中,我们可以使用 import 语句来引入公共的 CSS 文件。例如: ```javascript import Vue from 'vue' import App from './App' import router from './router' import axios from '...

    jquery zTree需要使用的js和css

    首先,我们需要引入zTree必要的JavaScript和CSS文件。在标题"jquery zTree需要使用的js和css"中提到,这意味着我们讨论的核心是这两个部分。在实际应用中,通常会将`jquery.ztree.core.js`(核心功能)和`zTreeStyle...

    CSS参考手册(Web标准布局的本质,XHTML书写规范,CSS基础与书写规范,网页头部元素的详细定义,CSS基本布局的属性,CSS容器属性)

    **网页头部元素的详细定义**涉及`&lt;head&gt;`标签内包含的各种元素,如`&lt;title&gt;`定义页面标题,`&lt;meta&gt;`用于元信息,`&lt;link&gt;`引入外部资源(如CSS文件),`&lt;style&gt;`内联定义CSS,以及`&lt;script&gt;`用于引入JavaScript代码。...

    html+css+javascript.ppt javascript css html

    例如,使用`&lt;style&gt;`标签可以在文档头部定义全局样式,或者通过`&lt;link&gt;`标签引入外部样式表。`&lt;base&gt;`标签用于设置页面所有链接的基础URL。 JavaScript是一种解释型的、跨平台的、轻量级的编程语言,常用于增强网页...

    Html+Css+Javascript从入门到精通.pdf

    ### Html+Css+Javascript从入门到精通 #### Web开发基础教程概述 《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识,并通过实践逐步深入理解...

    HTML、CSS、JavaScript语法手册.pdf

    - **`&lt;script&gt;`**: 引入JavaScript代码。 **1.2 HTML头部标签详解** - **`&lt;base&gt;`**: 设置文档的基础URL。这有助于简化页面内部链接的书写,只需要提供相对路径即可。例如: ```html ``` - **`&lt;title&gt;`**: ...

    artDialog的js,css与事例

    在实际使用中,我们通常会通过引入JS和CSS文件来初始化ArtDialog。在"artDialog-master"这个压缩包中,应该包含了ArtDialog的源码文件和示例。一般而言,会有一个`artDialog.js`或`artDialog.min.js`的JS文件,这是...

    html+css+js做的企业官网

    新手在编写HTML时需要注意语义化的标签使用,例如使用定义头部,表示导航,表示内容区域,定义独立的内容,表示页脚。此外,通过标签创建超链接,标签引入图片,标签处理表单数据,这些都是构建企业官网不可或缺的...

    html+css+js网页设计.docx

    - **文档头部** `&lt;head&gt;`:这部分不直接在浏览器中显示,主要用于定义文档的元数据(如标题、字符集等)以及引入外部资源(如CSS或JavaScript文件)。 - `&lt;title&gt;`:定义网页的标题,通常显示在浏览器的标签页上。 ...

    div+css布局的前台模板

    6. **JS目录**:"js"文件夹通常包含JavaScript代码,用于实现页面的交互功能,如滚动动画、下拉菜单、弹窗提示、表单验证等。JavaScript可以与HTML和CSS紧密结合,增强用户体验,使网站更加生动和互动。 7. **响应...

    使用html+css+js实现简单网页设计、.docx

    在头部,我们添加了一个 title 标签来设置网页的标题,并添加了一个 link 标签来链接外部的 CSS 文件。在主体部分,我们创建了一个容器元素,里面包含了一个 h1 标签、一个 p 标签和两个按钮。h1 标签用于显示标题,...

    html+css+javascript

    `&lt;style&gt;`用于插入CSS代码,`&lt;link&gt;`则用于引入外部样式表。 CSS允许我们控制元素的外观。例如,`text`属性可以改变`&lt;body&gt;`中的文字颜色,`bgcolor`设置页面背景色,`background`用于添加背景图像,`link`, `alink...

    jquery日期时间空间timepicker所需要的js和css

    只需要在页面头部引入jQuery、jQuery UI库以及上述三个文件,然后通过简单的配置和调用,就可以将时间选择功能添加到任何HTML输入元素上。例如: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery Timepicker 示例&lt;/...

    狗狗科技网页头部.rar

    常见的头部JavaScript用例包括初始化库和框架(如jQuery、Vue.js或React.js)、设置事件监听器以及进行页面加载时的初始处理。 图像和其他媒体资源也是网页头部常见的元素。例如,Logo图片通常位于头部,而背景音乐...

    JS+css3实现随着鼠标位置变换的标题文本动态阴影效果源码.zip

    在本项目中,"JS+css3实现随着鼠标位置变换的标题文本动态阴影效果源码.zip" 是一个利用JavaScript和CSS3技术创建的互动效果,它使得网页标题文本的阴影根据鼠标指针的位置动态变化。这个功能可以为网页增添一种独特...

    HTML+CSS+JS文档整理

    ### HTML+CSS+JS文档整理知识点 #### 一、HTML基础概述 - **HTML定义**:HTML(HyperText Markup Language)是一种标记语言,用于描述网页的结构和内容。不同于编程语言,HTML主要用于定义网页的各个组成部分及其...

    Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.docx

    还可以使用CSS实现固定定位(fixed)的头部导航。 【列表】 HTML中的列表包括有序列表()、无序列表()和定义列表()。CSS可以设置列表样式,如列表符号、列表间距等。 【表格】 元素用于创建表格,表示行,表示单元格...

    在母版页的内容页中使用JS和CSS.doc

    首先,为了在母版页中引入CSS和JavaScript,我们需要在标签内添加一个ContentPlaceHolder控件。这样,内容页就可以在这个占位符中插入自己的CSS和JS链接。例如: ```html &lt;title&gt;TechMan&lt;/title&gt; ; charset=utf-...

Global site tag (gtag.js) - Google Analytics