table of Contents
0. Description of the development content of this blog
1. Implementation strategy analysis: JS component-SweetAlert component
(1) Introduction to SweetAlert component:
(2) SweetAlert component download:
2. [Preview] function development and realization
(1) In advance, add SweetAlert components and jQuery components to the current project
Note: Two additional explanations
0. Description of the development content of this blog
After clicking the [Preview] this hyperlink, a dialog box will pop up on the current page, displaying the picture of this oil painting:
1. Implementation strategy analysis: JS component-SweetAlert component
In the front-end html field, there are many ready-made JavaScript components; in order to achieve the "pop-up dialog" function and make the pop-up box more beautiful, we use the SweetAlert component that is widely used in the industry;
(1) Introduction to SweetAlert component:
SweetAlert is a widely used JS dialog box component; its role is to provide a beautiful and reliable dialog box suitable for mobile phones and PC pages;
Visit the official website of https://sweetalert2.github.io/ SweetAlert2;
(2) SweetAlert component download:
2. [Preview] function development and realization
(1) In advance, add SweetAlert components and jQuery components to the current project
Need to use jQuery to operate Dom, so jQuery needs to be introduced;
(2) Write list.jsp:
<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>油画列表</title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/sweetalert2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\list.css">
<script type="text/javascript">
// 在<head></head>中，增加一个自定义函数；
function showPreview(previewObj){ //形参数previewObj就是【预览】超链接的对象；previewObj是一个HTML原生的的Dom对象
// 利用jQuery的${previewObj}：可以将previewObj这个HTML原生的Dom对象进行扩展，让其变成一个JQuery对象；
// 只有previewObj变成jQuery对象之后，才能利用jQUery的attr()方法，对里面的自定义属性进行提取；
var preview = $(previewObj).attr("data-preview");
var pname = $(previewObj).attr("data-pname");
Swal.fire({ // Swal是SweetAlert组件的核心对象；通过调用.fire()方法，在当前页面弹出一个指定样式的对话框
title:pname, // 对话框的标题
// 对话框主体部分,显示的html文本是什么；这儿使用<img>让其显示图片；
html:"<img src='"+preview+"' style='width:361px;height:240px'>",
showCloseButton:true, // 是否在对话框右上方显示叉号；
showConfirmButton:false // 是否显示确认按钮，这儿设置的是不出现；
});
}
</script>
</head>
<body>
<div class="container">
<fieldset>
<legend>油画列表</legend>
<div style="height: 40px">
<a href="#" class="btn-button">新增</a>
</div>
<!-- 油画列表 -->
<table cellspacing="0px">
<thead>
<tr style="width: 150px;">
<th style="width: 100px">分类</th>
<th style="width: 150px;">名称</th>
<th style="width: 100px;">价格</th>
<th style="width: 400px">描述</th>
<th style="width: 100px">操作</th>
</tr>
</thead>
<c:forEach items="${pageModel.pageData}" var="painting">
<tr>
<c:choose>
<c:when test="${painting.category == 1}">
<td>现实主义</td>
</c:when>
<c:when test="${painting.category == 2}">
<td>抽象主义</td>
</c:when>
<c:otherwise>
<td>未分类别</td>
</c:otherwise>
</c:choose>
<td>${painting.pname}</td>
<td><fmt:formatNumber pattern="￥0.00" value="${painting.price}"></fmt:formatNumber></td>
<td>${painting.description }</td>
<td>
<a class="oplink" data-preview="${painting.preview}" data-pname="${painting.pname}" href="javascript:void(0)" onclick="showPreview(this)">预览</a>
<a class="oplink" href="#">修改</a>
<a class="oplink" href="#">删除</a>
</td>
</tr>
</c:forEach>
</table>
<!-- 分页组件 -->
<ul class="page">
<li><a href="/management?method=list&p=1">首页</a></li>
<li><a href="/management?method=list&p=${pageModel.hasPreviousPage?pageModel.page-1:1 }">上页</a></li>
<c:forEach begin="1" end="${pageModel.totalPages}" var="pno" step="1">
<li ${pno==pageModel.page?"class='active'":""}><span>
<a href="/management?method=list&p=${pno}">
${pno}
</a>
</span></li>
<!-- <li class='active'><a href="#">1</a></li>
<li ><a href="#">2</a></li> -->
</c:forEach>
<li><a href="/management?method=list&p=${pageModel.hasNextPage?pageModel.page+1:pageModel.totalPages}">下页</a></li>
<li><a href="/management?method=list&p=${pageModel.totalPages}">尾页</a></li>
</ul>
</fieldset>
</div>
</body>
</html>
A few notes about list.jsp:
(1) Introduce two JavaScript components, jQuery and sweetalert;
(2) Set the [Preview] hyperlink; prepare for display: the two custom attributes of data-preview and data-pname come from the rendering of the server; (can be understood as setting the settings of these custom attributes, and in The transfer in the page is done in the browser)
(3) Write the showPreview() method; pay attention to the following process of converting HTML Dom objects into jQuery objects;
Note: Two additional explanations
(1) Through the above data-preview, attaching data through custom attributes, this development technique is very common in actual work;
(2) Right-click the page component, [Check] can view and change the code of the component;
