<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8" />
<title>商品管理</title>
<script src="./js/echarts.js"></script>
<link rel="stylesheet" href="./css/public.css" />
<link rel="stylesheet" href="./css/goodschild.css" />
<link rel="stylesheet" href="./css/myPagination.css">
<script src="./js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!-- 预览的幕布 -->
<div id="imagePreview" class="preview_modal" onclick="previewCancel()">
<!-- 预览的图片 -->
<
img id="previewImage" src="" alt="Preview Image">
</div>
<!-- 顶部下拉框 -->
<div class="top_box" id="top_box">
<div class="top_left">
<input type="text" placeholder="请输入产品名称搜索" id="searchInput">
</div>
<div class="top_right">
<button id="searchBtn">搜索</button>
<button id="resetBtn">重置</button>
</div>
</div>
<!-- 按钮区域 -->
<div class="top_boxs">
<div class="top_button">
<button id="addition" class="icon-btns">
<
img src="./
img/返回.png" alt="图标描述" width="15" height="15">
<p>返回</p>
</button>
<button id="additionst" class="icon-btns">
<
img src="./
img/加号.png" alt="图标描述" width="20" height="20">
<p>新增</p>
</button>
<button id="expurgate" class="icon-btn" disabled>
<p>全部</p>
<span class="badge" id="badge_first"></span>
</button>
<button id="search" class="icon-btn" disabled>
<p>待审核</p>
<span class="badge" id="badge_second"></span>
</button>
<button id="searchsa" class="icon-btn" disabled>
<p>回收站</p>
<span class="badge" id="badge_seconds"></span>
</button>
<button id="additions" class="icon-btns">
<p>批量审核</p>
</button>
<button id="expurgates" class="icon-btn">
<
img src="./
img/删除.png" alt="图标描述" width="20" height="20">
<p>批量删除</p>
</button>
</div>
<div class="screen" id="refreshs">
<div class="screen_box">
<
img src="./
img/搜索-灰色.png" alt="刷新" class="renovate" id="searchs" />
</div>
<div class="screen_box">
<
img src="./
img/刷新.png" alt="刷新" class="renovate" id="refresh" />
</div>
<div class="screen_box">
<div class="screen_
img">
<
img src="./
img/设置-灰色.png" alt="刷新" class="renovate" id="install" />
</div>
<div class="setting_box">
<p class="setting_title">显示设置</p>
<div class="setting_items">
<label>
<input type="checkbox" value="id" checked> ID
</label>
<label>
<input type="checkbox" value="company" checked> 公司名称
</label>
<label>
<input type="checkbox" value="tradeid" checked> 产品名称
</label>
<label>
<input type="checkbox" value="
img" checked> 商品图片
</label>
<label>
<input type="checkbox" value="name" checked>行业
</label>
<label>
<input type="checkbox" value="status" checked> 审核状态
</label>
<label>
<input type="checkbox" value="type" checked> 上架状态
</label>
<label>
<input type="checkbox" value="create_time" checked> 创建时间
</label>
</div>
</div>
</div>
</div>
</div>
<div class="base_box">
<div id="base_package">
<table class="table_table-bordered">
<thead>
<tr>
<th>
<input type="checkbox" id="selectAll" name="check-all">
</th>
<th>id</th>
<th>公司名称</th>
<th>产品名称</th>
<th>商品图片</th>
<th>行业</th>
<th>审核状态</th>
<th>上架状态</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- 底部分页 -->
<div class="pagination_box">
<div id="pagination" class="pagination"></div>
</div>
</div>
<!-- 新增弹窗 -->
<div class="windows_box">
<div class="paddle_box">
<p class="title">添加/编辑</p>
<div class="form-item">
<p>*产品名称</p>
<input type="text" name="productName" id="productName" placeholder="请输入内容名称">
</div>
<div class="form-item">
<p>*产品图片</p>
<div class="
img_pop">
<form id="myForm">
<label>
<input type="file" name="file" id="file" style="display: none;" onchange="upload(true)"
accept="image/*">
<
img src="./
img/10050.png" id="pic">
</label>
</form>
<p class="error" id="
img_error">图片</p>
</div>
</div>
<div class="form-item">
<p>*产品介绍</p>
<div class="described">
<div class="texta" id="editor"></div>
<p class="error" id="text_error">详情</p>
</div>
</div>
<div id="parcel" class="parcel">
<div class="radio-group">
<p>*上下架</p>
<input type="radio" name="shelf" value="on" checked>
<span>上架</span>
<input type="radio" name="shelf" value="off">
<span>不需要</span>
</div>
<!-- 操作按钮 -->
<div class="hint_button">
<button class="hint_right" onclick="zxc()">确认</button>
<button class="hint_left" onclick="asd()">确定并继续添加</button>
</div>
</div>
</div>
</div>
<!-- 删除弹窗 -->
<div class="delete-mask" id="deleteMask">
<div class="delete-dialog" id="deleteDialog">
<div class="dialog-content" id="dialogContent">
<h3>确定要删除选
中的行业吗？</h3>
</div>
<div class="dialog-actions" id="dialogActions">
<button class="action-cancel" id="cancelBtn" onclick="cancelDelete()">取消</button>
<button class="action-confirm" id="confirmBtn" onclick="confirmDelete()">确定</button>
</div>
</div>
</div>
<!-- 失败 -->
<div id="error">
<div class="errorCenter">
<
img id="error
Img" src="./
img/error.png" alt="" />
<span class="errorText"></span>
</div>
</div>
<!-- 成功 -->
<div id="success">
<div class="successCenter">
<
img id="success
Img" src="./
img/yes.png" alt="" />
<span class="successText"></span>
</div>
</div>
<script src="./js/public.js"></script>
<script src="./js/goodschild.js"></script>
<!-- 分页插件 -->
<script src="./js/myPagination.js"></script>
<!-- 富文本编辑器容器 -->
<div class="texta" id="editor"></div>
<script>
// 初始化 UEditor 富文本编辑器
var ue = UE.getEditor('editor', {
initialContent: '<span style="color: #999">请输入内容...</span>', // 初始占位符文本
autoHeight: false,
});
// 监听编辑器准备就绪事件，为聚焦、失焦绑定占位符处理逻辑
ue.ready(() => {
// 聚焦时，若内容是初始占位符则清空
ue.addListener('focus', () => {
if (ue.getContent() === '<p><span style="color: #999">请输入内容...</span></p>') {
ue.setContent('');
}
});
// 失焦时，若内容为空或仅含换行则恢复占位符
ue.addListener('blur', () => {
if (ue.getContent() === '' || ue.getContent() === '<p><br></p>') {
ue.setContent('<span style="color: #999">请输入内容...</span>');
}
});
});
</script>
</body>
本文详细介绍了img标签在网页开发中常用的几个关键事件，包括onError、onLoad和onAbort，阐述了它们的作用及如何利用这些事件优化网页加载体验。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
