引入公共头部时,控制引入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 文件(通常是 main.js)中,我们可以使用 import 语句来引入公共的 CSS 文件。例如: ```javascript import Vue from 'vue' import App from './App' import router from './router' import axios from '...
首先,我们需要引入zTree必要的JavaScript和CSS文件。在标题"jquery zTree需要使用的js和css"中提到,这意味着我们讨论的核心是这两个部分。在实际应用中,通常会将`jquery.ztree.core.js`(核心功能)和`zTreeStyle...
**网页头部元素的详细定义**涉及`<head>`标签内包含的各种元素,如`<title>`定义页面标题,`<meta>`用于元信息,`<link>`引入外部资源(如CSS文件),`<style>`内联定义CSS,以及`<script>`用于引入JavaScript代码。...
例如,使用`<style>`标签可以在文档头部定义全局样式,或者通过`<link>`标签引入外部样式表。`<base>`标签用于设置页面所有链接的基础URL。 JavaScript是一种解释型的、跨平台的、轻量级的编程语言,常用于增强网页...
### Html+Css+Javascript从入门到精通 #### Web开发基础教程概述 《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识,并通过实践逐步深入理解...
- **`<script>`**: 引入JavaScript代码。 **1.2 HTML头部标签详解** - **`<base>`**: 设置文档的基础URL。这有助于简化页面内部链接的书写,只需要提供相对路径即可。例如: ```html ``` - **`<title>`**: ...
在实际使用中,我们通常会通过引入JS和CSS文件来初始化ArtDialog。在"artDialog-master"这个压缩包中,应该包含了ArtDialog的源码文件和示例。一般而言,会有一个`artDialog.js`或`artDialog.min.js`的JS文件,这是...
新手在编写HTML时需要注意语义化的标签使用,例如使用定义头部,表示导航,表示内容区域,定义独立的内容,表示页脚。此外,通过标签创建超链接,标签引入图片,标签处理表单数据,这些都是构建企业官网不可或缺的...
- **文档头部** `<head>`:这部分不直接在浏览器中显示,主要用于定义文档的元数据(如标题、字符集等)以及引入外部资源(如CSS或JavaScript文件)。 - `<title>`:定义网页的标题,通常显示在浏览器的标签页上。 ...
6. **JS目录**:"js"文件夹通常包含JavaScript代码,用于实现页面的交互功能,如滚动动画、下拉菜单、弹窗提示、表单验证等。JavaScript可以与HTML和CSS紧密结合,增强用户体验,使网站更加生动和互动。 7. **响应...
在头部,我们添加了一个 title 标签来设置网页的标题,并添加了一个 link 标签来链接外部的 CSS 文件。在主体部分,我们创建了一个容器元素,里面包含了一个 h1 标签、一个 p 标签和两个按钮。h1 标签用于显示标题,...
`<style>`用于插入CSS代码,`<link>`则用于引入外部样式表。 CSS允许我们控制元素的外观。例如,`text`属性可以改变`<body>`中的文字颜色,`bgcolor`设置页面背景色,`background`用于添加背景图像,`link`, `alink...
只需要在页面头部引入jQuery、jQuery UI库以及上述三个文件,然后通过简单的配置和调用,就可以将时间选择功能添加到任何HTML输入元素上。例如: ```html <!DOCTYPE html> <title>jQuery Timepicker 示例</...
常见的头部JavaScript用例包括初始化库和框架(如jQuery、Vue.js或React.js)、设置事件监听器以及进行页面加载时的初始处理。 图像和其他媒体资源也是网页头部常见的元素。例如,Logo图片通常位于头部,而背景音乐...
在本项目中,"JS+css3实现随着鼠标位置变换的标题文本动态阴影效果源码.zip" 是一个利用JavaScript和CSS3技术创建的互动效果,它使得网页标题文本的阴影根据鼠标指针的位置动态变化。这个功能可以为网页增添一种独特...
### HTML+CSS+JS文档整理知识点 #### 一、HTML基础概述 - **HTML定义**:HTML(HyperText Markup Language)是一种标记语言,用于描述网页的结构和内容。不同于编程语言,HTML主要用于定义网页的各个组成部分及其...
还可以使用CSS实现固定定位(fixed)的头部导航。 【列表】 HTML中的列表包括有序列表()、无序列表()和定义列表()。CSS可以设置列表样式,如列表符号、列表间距等。 【表格】 元素用于创建表格,表示行,表示单元格...
首先,为了在母版页中引入CSS和JavaScript,我们需要在标签内添加一个ContentPlaceHolder控件。这样,内容页就可以在这个占位符中插入自己的CSS和JS链接。例如: ```html <title>TechMan</title> ; charset=utf-...