简易自定义标签在网页中的应用示例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_10107/article/details/82445944

本文介绍如何创建并使用简单的自定义标签，通过整合jQuery技术展示和隐藏div框，提供一个易于理解的实例，鼓励读者自行尝试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/Jquery/WebContent/taglibTest.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="showdialog" uri="http://org.cc.taglib.tips" %>
<!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>

</head>
<body>
<showdialog:ShowDialog contents="This is a test!"></showdialog:ShowDialog>
</body>
</html>


/Jquery/WebContent/index.html

<html>
<head><title></title>
<style type="text/css">
	body{
		background-color:#DCDCDC;
		text-align:left;
	}
	.test_show_box{
		text-align:left;
		background-color:#FFFFFF;
		margin-left:50px;
		width:230px;
		height:150px;
		border-style:solid;
		border-width:1; 
		border-color:#3399CC;
		word-break:normal;
		text-indent:26px;
		padding:5 12 5 12;
		position :relative;
		display:none;
	};

</style>
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="JS/operate.js"></script>
</head>
<body>
	<span id="show_hide_btn">show</span>
	<div><a href="taglibTest.jsp">taglib</a></div>
	<div class="test_show_box">Now, I will tell you how to use jquery technology to show or hide a div box. It's just a simple example,you can try it by youself.You just should have more patience. </div>

</body>

[quote]
/Jquery/WebContent/JS/operate.js
$(function(){
$("#show_hide_btn").click(function(){
$(".test_show_box").clearQueue().stop("stopAll","goToEnd");
$(".test_show_box").css("left","50");
$(".test_show_box").css("top","0");
$(".test_show_box").show().animate({left:"200",top:"40"},"slow");
$(".test_show_box").fadeOut(3000);
});

});
[/quote]
[quote]
web.xml里边可以不指定我们自定义标签的位置。web.xml会自动扫描web-inf下配置文件
[/quote]


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>Jquery</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <!--定义jsp相关配置-->
  <jsp-config>
  	<taglib>
  		<!--标签库的uri路径即在jsp头文件中声明引用<%@ taglib prefix="showdialog" uri="http://org.cc.taglib.tips" %>的uri-->
  		<taglib-uri>http://org.cc.taglib.tips</taglib-uri>
  		<!--自定义的标签库的路径-->
  		<taglib-location>/WEB-INF/lib/custom-taglib.tld</taglib-location>
  	</taglib>

  </jsp-config>
</web-app>