<!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>
本文介绍了一种在HTML中不使用额外标签实现<img>元素title属性内文本换行的方法。通过利用ASCII码进行换行，可以在鼠标悬停图片时显示多行文本，这对于提高用户体验非常有用。
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
