您的位置: 首页  >  IT文章  >  fis有关标签介绍

fis有关标签介绍

分类: IT文章 • 2024-04-27 20:30:04
fis相关标签介绍

fis简介

  • fis在github上的开源地址为： https://github.com/fouber/fis-java-jsp
  • 关于fis的几个接口的实现
  • fis:html
    • 它是一个标识性的一个标签，表明html页面需要fis进行处理
    • 他必须要以结束
    • 其他的标签必须要位于和之间
  • fis:div
    • 类似于html标签，在ajax调用中非常有用
  • fis:styles
    • 是一个占位符，页面中的所有的css以后会被fis收集在这个地方
    • 一般来说是放在之前
  • fis:scripts
    • 是一个占位符，页面中的所有的js以后会被fis收集在这个地方
    • 用户写的js也会按照顺序收集在这个地方
    • 一般来说是放在之前
  • fis:require
    • 用于表示它依赖一个js或者css文件，可以在页面位置的任意地方写

 

  • 一个典型的页面实现可能如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="fis" uri="http://fis.baidu.com/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<fis:html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <fis:styles/>
</head>
<body>
        我是body
        <fis:script>
        console.log("11111111");
        </fis:script>
        <fis:require name="resources/lib/bootstrap/css/bootstrap.css"></fis:require>
        <fis:require name="resources/lib/js/jquery.js"></fis:require>
        <fis:script>
        console.log("222222222");
        </fis:script>
        <fis:scripts/> 
</body>
</fis:html>

 

  • 执行后的效果如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Insert title here</title>
                <link rel="stylesheet" type="text/css" href="resources/lib/bootstrap/css/bootstrap.css"/>
        </head>
        <body>
                我是body
                
                
                <script type="text/javascript" src="resources/lib/js/jquery.js"/>
                <script type="text/javascript">
                console.log("11111111");
                </script>
                <script type="text/javascript">
                console.log("222222222");
                </script>
        </body>
</html>

 

相关推荐