Jsp自定义tag标签实现通用模态框

亦凉 2021-04-27 15:20 670阅读 0赞

#### 一、自定义tag标签的好处： ####

程序员可以自定义一些特定功能的标签, 用来达到封装代码, 分工, 重用性等多种好处.

#### 二、需求 ####

多处需要使用模态框，信息提示、警告、删除确认等，将模态框代码抽取出来，通过传参，提高通用性

#### 三、实现 ####

1.  通常在web工程WEB-INF文件夹下创建tags文件夹来存放自定义的tag，如/WEB-INF/tags，这里我们新建了一个model.tag用于存放公用代码
````
    <%@tag language="java" pageEncoding="utf-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@attribute name="title" type="java.lang.String" required="false" description="模态框标题" %>
    <%@attribute name="msg" type="java.lang.String" required="true" description="模态框内容" %>
    <%@attribute name="opts" type="java.lang.String" required="false" description="操作类型：info-提示 confirm-确认" %>
    <%@attribute name="url" type="java.lang.String" required="false" description="确认后跳转url" %>
    
    <div class="modal fade" id="modal-default" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">${title}</h4>
                </div>
                <div class="modal-body">
                    <p>${msg}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btnModalOK">确定</button>
                </div>
            </div>
            
        </div>
        
    </div>
    
    <script> $("#btnModalOK").click(function () { <c:if test="${opts!='confirm'}"> $("#modal-default").modal("hide"); </c:if> <c:if test="${opts=='confirm'}"> console.log(${ url}); </c:if> }) </script>
````
通常我们在.tag文件的开头加上以上的代码来告诉jsp容器这是一个tag标记文件。  
`attribute`标签用于指定传入参数的信息  
这里还对模态框的确认按钮进行了简单逻辑处理，需要注意的是，由于这里的model.tag使用到了jQuery，所以在jsp页面中使用时应确保jQuery已经引入，否则事件不生效

1.  在jsp页面中使用  
    引入标签库（prefix是自定义的）：  
    `<%@ taglib tagdir="/WEB-INF/tags" prefix="tags" %>`  
    使用标签，填入相应参数：  
    `<tags:model msg="内容" title="标题"></tags:model>`

这样就可以通过添加相应的事件调用这个模态框

$("#delete").click(function () { 
            $("#modal-default").modal("show");
        })