该博客围绕JS鼠标指向显示展开，虽未给出具体内容，但可知是关于前端开发中利用JavaScript实现鼠标指向元素时显示特定内容的相关技术。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en"><%--预约单 列表模式 cy--%>
<head>
<!-- jsp文件头和头部 -->
<script type="text/javascript" src="${ctx}/staticNew/ace/js/jquery.js"></script>
<link rel="stylesheet" href="${ctx}/staticNew/css/common.css"/>
<link rel="stylesheet" href="${ctx}/staticNew/ace/css/chosen.css"/>
<!-- jsp文件头和头部 -->
<%@ include file="../../index/top.jsp" %>
<link rel="stylesheet" href="${ctx}/staticNew/ace/css/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/style.css">
<!-- 百度echarts -->
<script src="${ctx}/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/validate.js"></script>
<script src="${ctx}/staticNew/ace/js/date-time/bootstrap-datepicker.js"></script>
<style>
.calendarMode_head {
width: 100%;
height: 100px;
margin-top: 20px;
}
.calendarMode_table {
width: 100%;
height: 600px;
}
.calendarMode_head_a1 {
margin-left: 8px;
margin-right: 8px;
}
.calendarMode_head_button4 {
float: left;
margin-right: 20px;
}
input, select {
width: 130px;
margin-left: 5px;
margin-right: 15px;
display: inline-block
}
a {
color: #0000aa;
margin-left: 8px;
margin-right: 8px;
cursor: pointer;
}
</style>
</head>
<body style="background-color: white">
<form>
<div class="calendarMode_head">
<%--头部第一行--%>
<div class="col-sm-12">
<div class="col-sm-6">
<%--这里要把这个企业下的所有门店列出--%>
<select class="calendarMode_select_merchantDef_type"
style=" float: left; ">
<option>请选择门店</option>
<option>总店</option>
<option>旗舰店</option>
</select>
<%--这里根据时间搜索--%>
<input type="text" style="float: left" validates="required,maxLength[20]" label="有效期" readonly
id="datepicker"/>
</div>
<div class="col-sm-6 ">
<a class="btn btn-mini btn-primary calendarMode_head_a1">开单</a>
<a class="btn btn-mini btn-primary calendarMode_head_a1">充值</a>
<a class="btn btn-mini btn-primary calendarMode_head_a1">一键消耗</a>
<a class="btn btn-mini btn-primary calendarMode_head_a1"> 列表模式</a>
<a class="btn btn-mini btn-primary calendarMode_head_a1">房间概况</a>
<a class="btn btn-mini btn-primary calendarMode_head_a1">简报</a>
<img src="${ctx}/static/images/wenhao.png" style="width: 15px;height: 15px">
</div>
</div>
<%--头部第二行--%>
<div class="col-sm-12" style="margin-top: 20px">
<button onclick="addReserveOrder();" class="btn btn-mini btn-purple calendarMode_head_button4">新增预约
</button>
<span style="float: left;margin-right: 3px">会员姓名:<input type="text" onclick=""/></span>
<span style="float: left;margin-right: 3px">手机号码:<input type="text" onclick=""/></span>
<div style="float: left;display: inline-block;width: 180px;height: 30px ;line-height: 30px;margin-right: 3px">
<span style="float: left;width: auto;display: inline-block">技师:</span>
<select style=" float: left;">
<option>请选择</option>
<option>张三</option>
<option>李四</option>
<option>王五</option>
<option>赵六</option>
</select>
</div>
<div style="float: left;display: inline-block;width: 230px; height: 30px ;line-height: 30px;margin-right: 3px">
<span style="float: left;width: auto;display: inline-block">客户类型:</span>
<select style=" float: left;">
<option>请选择</option>
<option>会员</option>
<option>散客</option>
</select>
</div>
<button class="btn btn-mini btn-pink">查询</button>
</div>
</div>
<%--隐藏--%>
<div class="calendarMode_table">
<table class="table table-striped table-bordered table-hover"
style="margin-top: 5px;">
<thead>
<tr>
<th class="center">序号</th>
<th class="center">客户</th>
<th class="center">预约时间</th>
<th class="center">预约技师</th>
<th class="center">预约状态</th>
<th class="center">服务项目</th>
<th class="center">客户备注</th>
<th class="center">备注</th>
<th class="center">操作</th>
</tr>
</thead>
<c:choose>
<c:when test="${not empty page.result}">
<c:forEach items="${page.result}" var="reserveOrder"
varStatus="status">
<tr>
<td align="center">${status.index+1}</td>
<td align="center">
<c:if test="${not empty reserveOrder.merchantCard}">
会员:${reserveOrder.merchantCard.username}<%--会员--%>
手机: ${reserveOrder.merchantCard.mobileNo}
</c:if>
<c:if test="${not empty reserveOrder.individual}">
散客:${reserveOrder.individual.name}<%--散客--%>
手机: ${reserveOrder.individual.phone}
</c:if>
</td>
<td>
${reserveOrder.reserveTime}<%--预约时间--%>
</td>
<td>
${reserveOrder.stuff.name}<%--预约技师--%>
</td>
<td>
<c:if test="${reserveOrder.status eq '0'}">
待确认
</c:if>
<c:if test="${reserveOrder.status eq '1'}">
已确认
</c:if>
<c:if test="${reserveOrder.status eq '2'}">
已到店
</c:if>
<c:if test="${reserveOrder.status eq '3'}">
已完成
</c:if>
<c:if test="${reserveOrder.status eq '4'}">
已取消
</c:if>
<c:if test="${reserveOrder.status eq '5'}">
爽约
</c:if>
</td>
<td>
服务项目
</td>
<td>
客户备注
</td>
<td>
备注
</td>
<td align="center"><%--预约状态 0 待确认，1 已确认，2 已到店，3 已完成，4 已取消，5 爽约，--%>
<c:if test="${reserveOrder.status eq '0'}"><%--待确认--%>
<a class="btn btn-mini btn-warning"
onclick="UpReserveOrderStatus('${reserveOrder.id}','1')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">确认</i>
</a>
</c:if>
<c:if test="${reserveOrder.status eq '1'}"><%--已确认--%>
<a class="btn btn-mini btn-primary"
onclick="reserveOrderDetails('${reserveOrder.id}')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">详情</i>
</a>
<a class="btn btn-mini btn-warning"
onclick="UpReserveOrderStatus('${reserveOrder.id}','2')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">到店</i>
</a>
<a class="btn btn-mini btn-info"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">修改</i>
</a>
<a class="btn btn-mini btn-finish"
onclick="addRemarkToReserveFollow('${reserveOrder.id}')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">备注</i>
</a>
<a class="btn btn-mini btn-warning"
onclick="UpReserveOrderStatusTO4('${reserveOrder.id}','4')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">取消</i>
</a>
<a class="btn btn-mini btn-primary light-blue "
id="more_button_hover${reserveOrder.id}"
onmouseover="more_button_check('${reserveOrder.id}')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">更多</i>
</a>
</c:if>
<%--隐藏--%>
<ul id="more_button${reserveOrder.id}"
style="display: none; height: auto; width: 100px; border: 1px solid red;
float: right; font-size: 12px; z-index: 9999; position: absolute; right: 0;"
>
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="" style=" color: white;">
开单
</a>
</li>
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="" style=" color: white;">
体验
</a>
</li>
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="" style=" color: white;">
消耗
</a>
</li>
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="" style=" color: white;">
充值
</a>
</li>
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="" style=" color: white;">
编辑档案
</a>
</li>
<c:if test="${empty reserveOrder.individual.id}">
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="upTel('${reserveOrder.id}')" style=" color: white;">
换手机号
</a>
</li>
</c:if>
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="reserveFollowList('${reserveOrder.id}')"
style=" color: white;">
根进历史
</a>
</li>
<li style=" background-color: #0E2D5F; height: 25px;
line-height: 25px; border: 1px solid salmon; font-size: 12px;">
<a onclick="" style=" color: white;">
赠送优惠卷
</a>
</li>
</ul>
<c:if test="${reserveOrder.status eq '2'}"><%--已到店--%>
<a class="btn btn-mini btn-purple"
onclick="reserveOrderDetails('${reserveOrder.id}')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">详情</i>
</a>
</c:if>
<c:if test="${reserveOrder.status eq '3'}"><%--已完成--%>
<a class="btn btn-mini btn-warning"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">结账</i>
</a>
</c:if>
<c:if test="${reserveOrder.status eq '4'}"><%--已取消--%>
<a class="btn btn-mini btn-purple ace-icon "
onclick="reserveOrderDetails('${reserveOrder.id}')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">详情</i>
</a>
</c:if>
<c:if test="${reserveOrder.status eq '5'}"><%--爽约--%>
<a class="btn btn-mini btn-purple"
onclick="reserveOrderDetails('${reserveOrder.id}')"
style="padding-left: 2px;">
<i class="ace-icon fa fa-cloud-upload bigger-120">详情</i>
</a>
</c:if>
</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="100" class="center">没有相关数据</td>
</tr>
</c:otherwise>
</c:choose>
</table>
<div class="page-header position-relative">
<table style="width: 100%;">
<tr>
<td style="vertical-align: top;"></td>
<td style="vertical-align: top;">
<div class="pagination"
style="float: right; padding-top: 0px; margin-top: 0px;">
<tags:pagination page="${page}"
paginationSize="${page.pageSize}"/>
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
<!-- /.main-container -->
<!-- basic scripts -->
<!-- 页面底部js¨ -->
<script src="${ctx}/staticNew/ace/js/jquery-ui.js"></script>
<script src="${ctx}/staticNew/ace/js/bootstrap.js"></script>
<!-- 删除时确认窗口 -->
<script src="${ctx}/staticNew/ace/js/bootbox.js"></script>
<!-- ace scripts -->
<script src="${ctx}/staticNew/ace/js/ace/ace.js"></script>
<script src="${ctx}/staticNew/ace/js/date-time/bootstrap-datepicker.js"></script>
<!-- 下拉框 -->
<script src="${ctx}/staticNew/ace/js/chosen.jquery.js"></script>
<!--提示框-->
<script type="text/javascript" src="${ctx}/staticNew/js/jquery.tips.js"></script>
<!-- inline scripts related to this page -->
<script>
//新增预约单
function addReserveOrder() {
var diag = new top.Dialog();
diag.Drag = true;
diag.Title = "新增预约单";
diag.URL = '${ctx}/reserveOrder/addReserveOrder';
diag.Width = 600;
diag.Height = 500;
//确认按钮
diag.OKEvent = function () {
var reloadFlag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_addReserveOrder_room');
diag.innerFrame.contentWindow.saveAddReserveOrder();//
diag.close();
self.location.reload();
// self.location.reload();
// self.location.reload();
};
//关闭按钮
diag.CancelEvent = function () { //关闭事件
var reload_flag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_addReserveOrder_room');
if (reload_flag.value == "true") {
top.jzts();
setTimeout("self.location.reload()", 100);
}
diag.close();
self.location.reload();
};
diag.show();
diag.okButton.className = "btn btn-primary";
diag.cancelButton.className = "btn btn-danger";
}
/*时间框*/
jQuery(function ($) {
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
isRTL: true,
language: 'cn',
/*
format: 'yyyy-mm-dd',
*/
autoclose: true,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShow: function () {
//change button colors
var datepicker = $(this).datepicker("widget");
setTimeout(function () {
var buttons = datepicker.find('.ui-datepicker-buttonpane')
.find('button');
buttons.eq(0).addClass('btn btn-xs');
buttons.eq(1).addClass('btn btn-xs btn-success');
buttons.wrapInner('<span class="bigger-110" />');
}, 0);
}
});
});
//取消订单 状态改为4 并保存备注
function UpReserveOrderStatusTO4(reserveOrderId) {
var diag = new top.Dialog();
diag.Drag = true;
diag.Title = "取消订单";
diag.URL = '${ctx}/reserveOrder/UpReserveOrderStatusTO4?reserveOrderId=' + reserveOrderId;
diag.Width = 300;
diag.Height = 100;
//确认按钮
diag.OKEvent = function () {
var reloadFlag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveRemarkToReserveFollowAndUpReserveOrderStatusTO4');
diag.innerFrame.contentWindow.saveRemarkToReserveFollowAndUpReserveOrderStatusTO4();//
diag.close();
self.location.reload();
};
//关闭按钮
diag.CancelEvent = function () { //关闭事件
var reload_flag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveRemarkToReserveFollowAndUpReserveOrderStatusTO4');
if (reload_flag.value == "true") {
top.jzts();
setTimeout("self.location.reload()", 100);
}
diag.close();
self.location.reload();
};
diag.show();
diag.okButton.className = "btn btn-primary";
diag.cancelButton.className = "btn btn-danger";
}
//修改订单状态 预约状态 0 待确认，1 已确认，2 已到店，3 已完成，4 已取消，5 爽约，
function UpReserveOrderStatus(reserveOrderId, reserveOrderStatus) {
var msg = "";
if (reserveOrderStatus == '0') msg = "确认将订单状态改为待确认?";
if (reserveOrderStatus == '1') msg = "确认客户确认来?";
if (reserveOrderStatus == '2') msg = "确认客户已到店?";
if (reserveOrderStatus == '3') msg = "确认将订单状态改为已完成?";
if (reserveOrderStatus == '4') msg = "确认将订单状态改为已取消?";
if (reserveOrderStatus == '5') msg = "确认客户爽约?";
bootbox.dialog({
message: msg, title: "提示",
buttons: {
Cancel: {
label: "取消",
className: "btn-default",
callback: function () {
}
}
, OK: {
label: "确定",
className: "btn-primary",
callback: function () {
$.ajax({
url: '${ctx}/reserveOrder/UpReserveOrderStatus',
type: 'post',
data: {
'reserveOrderStatus': reserveOrderStatus, // * 预约状态 0 待确认，1 已确认，2 已到店，3 已完成，4 已取消，5 爽约，
'reserveOrderId': reserveOrderId
},
success: function (data) {
var attr = JSON.parse(data);
console.info(attr);
if (attr.code == 0) {
self.location.reload();
} else {
alert(attr.message);
}
}
});
}
}
}
}
)
}
//详情 预约单详情 cy
function reserveOrderDetails(reserveOrderId) {
var diag = new top.Dialog();
diag.Drag = true;
diag.Title = "查看预约单";
diag.URL = '${ctx}/reserveOrder/reserveOrderDetails?reserveOrderId=' + reserveOrderId;
diag.Width = 800;
diag.Height = 500;
//确认按钮
diag.OKEvent = function () {
/*diag.innerFrame.contentWindow.saveAddReserveOrder();//
self.location.reload();*/
};
//关闭按钮
diag.CancelEvent = function () { //关闭事件
var reload_flag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_reserveOrderDetails_room');
if (reload_flag.value == "true") {
top.jzts();
setTimeout("self.location.reload()", 100);
}
diag.close();
self.location.reload();
};
diag.show();
diag.okButton.style = "display:none";
diag.cancelButton.className = "btn btn-danger";
}
//添加备注 到跟进记录
function addRemarkToReserveFollow(reserveOrderId) {
var diag = new top.Dialog();
diag.Drag = true;
diag.Title = "添加备注";
diag.URL = '${ctx}/reserveOrder/addRemarkToReserveFollow?reserveOrderId=' + reserveOrderId;
diag.Width = 300;
diag.Height = 100;
//确认按钮
diag.OKEvent = function () {
var reloadFlag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveRemarkToReserveFollow');
diag.innerFrame.contentWindow.saveRemarkToReserveFollow();//
diag.close();
self.location.reload();
};
//关闭按钮
diag.CancelEvent = function () { //关闭事件
var reload_flag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveRemarkToReserveFollow');
if (reload_flag.value == "true") {
top.jzts();
setTimeout("self.location.reload()", 100);
}
diag.close();
self.location.reload();
};
diag.show();
/* diag.okButton.style = "display:none"; */
diag.okButton.className = "btn btn-primary";
diag.cancelButton.className = "btn btn-danger";
}
//更多
function more_button_check(reserveOrderId) {
var more_button_hover = document.getElementById('more_button_hover'+reserveOrderId);//按钮
var more_button = document.getElementById('more_button'+reserveOrderId);//隐藏的
var timer = null;
more_button.onmouseover = more_button_hover.onmouseover = function () {
if (timer) clearTimeout(timer);
more_button.style.display = 'block';
};
more_button.onmouseout = more_button_hover.onmouseout = function () {
timer = setTimeout(function () {
more_button.style.display = 'none';
}, 100);
};
}
//修改会员手机号
function upTel(reserveOrderId) {
var diag = new top.Dialog();
diag.Drag = true;
diag.Title = "修改会员手机号";
diag.URL = '${ctx}/reserveOrder/upTel?reserveOrderId=' + reserveOrderId;
diag.Width = 300;
diag.Height = 140;
//确认按钮
diag.OKEvent = function () {
var reloadFlag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveUpTel');
diag.innerFrame.contentWindow.saveUpTel();//
diag.close();
self.location.reload();
};
//关闭按钮
diag.CancelEvent = function () { //关闭事件
var reload_flag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveUpTel');
if (reload_flag.value == "true") {
top.jzts();
setTimeout("self.location.reload()", 100);
}
diag.close();
self.location.reload();
};
diag.show();
/* diag.okButton.style = "display:none"; */
diag.okButton.className = "btn btn-primary";
diag.cancelButton.className = "btn btn-danger";
}
//根进历史
function reserveFollowList(reserveOrderId) {
var diag = new top.Dialog();
diag.Drag = true;
diag.Title = "修改会员手机号";
diag.URL = '${ctx}/reserveOrder/reserveFollowList?reserveOrderId=' + reserveOrderId;
diag.Width = 700;
diag.Height = 300;
//确认按钮
diag.OKEvent = function () {
var reloadFlag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveUpTel');
diag.innerFrame.contentWindow.saveUpTel();//
diag.close();
self.location.reload();
};
//关闭按钮
diag.CancelEvent = function () { //关闭事件
var reload_flag = diag.innerFrame.contentWindow.document.getElementById('reload_flag_saveUpTel');
if (reload_flag.value == "true") {
top.jzts();
setTimeout("self.location.reload()", 100);
}
diag.close();
self.location.reload();
};
diag.show();
/* diag.okButton.style = "display:none"; */
diag.okButton.className = "btn btn-primary";
diag.cancelButton.className = "btn btn-danger";
}
</script>
</body>
</html>
扫一扫
2116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
