<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>编辑文字</title>
|
<style>
|
.text{
|
float:left;
|
color:white;
|
font-size:16px;
|
margin-left: 30px;
|
margin-top: 5px;
|
}
|
.labelInput {
|
width: 150px;
|
height: 30px;
|
margin-left: 25px;
|
margin-right: 50px;
|
line-height: 40px;
|
font-size: 16px;
|
text-indent: 8px;
|
outline: 0;
|
float: left;
|
border: none;
|
border-color: #3b403f;
|
/* box-shadow: 0 2px 6px #3a3c42; */
|
border-top-left-radius: 2px;
|
border-bottom-left-radius: 2px;
|
background-color: rgba(63, 72, 84, 0.7);
|
color: white;
|
}
|
.my-save-btn{
|
margin-top: 80px;
|
margin-left: 100px;
|
width: 70px;
|
height: 30px;
|
color: white;
|
background-color: #303247;
|
border:1px;
|
cursor: pointer;
|
border-radius: 2px;
|
}
|
.my-save-btn:hover{
|
background-color:rgb(107, 169, 220);
|
}
|
.layui-form-select .layui-input {
|
padding-right: 30px;
|
height: 30px;
|
cursor: pointer;
|
background: #20212b;
|
color: grey;
|
border-color: #3b403f;
|
}
|
|
.layui-form-select dl dd.layui-this {
|
background-color: grey;
|
top: 35px;
|
color: #fff;
|
}
|
|
/*下拉框高度*/
|
.layui-form-select dl {
|
top: 33px;
|
background: #3b403f !important;
|
color: white;
|
height: 100px;
|
}
|
|
</style>
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
</head>
|
|
<body>
|
<div style="margin-top: 20px;">
|
<form class="layui-form" action="">
|
<div>
|
<span class="text">内容</span>
|
<input id="input" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
|
</div>
|
<div>
|
<div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
|
字体颜色
|
</div>
|
<div id="colorSelect" style="display:inline-block;margin-top: 5px;">
|
</div>
|
</div>
|
<div>
|
<div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
|
字体大小
|
</div>
|
<div style="display:inline-block;margin-top: 5px; width: 150px;">
|
<select id="fontsize" lay-verify="required" class="my-select" lay-filter="fontsize">
|
<option value="10">10</option>
|
<option value="20">20</option>
|
<option value="30">30</option>
|
<option value="40">40</option>
|
<option value="50">50</option>
|
<option value="60">60</option>
|
<option value="70">70</option>
|
<option value="80">80</option>
|
<option value="90">90</option>
|
<option value="100">100</option>
|
<option value="110">110</option>
|
<option value="120">120</option>
|
<option value="130">130</option>
|
<option value="140">140</option>
|
<option value="150">150</option>
|
</select>
|
</div>
|
</div>
|
<div>
|
<div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
|
字体
|
</div>
|
<div style="display:inline-block;margin-top: 5px; margin-left:28px;;width: 150px;">
|
<select id="fontfamily" lay-verify="required" class="my-select" lay-filter="fontfamily">
|
<option value="SimSun">宋体</option>
|
<option value="SimHei">黑体</option>
|
<option value="Microsoft Yahei">微软雅黑</option>
|
<option value="KaiTi">楷体</option>
|
<option value="FangSong">仿宋</option>
|
<option value="LiSu">隶书</option>
|
<option value="MingLiU">细明体</option>
|
|
</select>
|
</div>
|
</div>
|
<!-- <button class="my-save-btn" onclick="closeframe()">完成</button> -->
|
</form>
|
</div>
|
<script>
|
var currentLabelId
|
function child(id,text,fontColor,fontSize,fontfamily) {
|
currentLabelId=id
|
layui.use(['element', 'layer', 'form','colorpicker'], function () {
|
var element = layui.element;
|
var form = layui.form;
|
var colorpicker = layui.colorpicker;
|
$("#input").val(text)
|
colorpicker.render({
|
elem: '#colorSelect',
|
color: fontColor,
|
size:'20px',
|
done: function (color) {
|
parent.updateLabel(2,currentLabelId,color);
|
},
|
// change:function (color) {
|
// parent.updateLabel(2,currentLabelId,color);
|
// },
|
});
|
$("#fontsize").val(fontSize);
|
form.on("select(fontsize)", function (data) {
|
parent.updateLabel(3,currentLabelId,data.value);
|
})
|
$("#fontfamily").val(fontfamily);
|
form.on("select(fontfamily)", function (data) {
|
parent.updateLabel(4,currentLabelId,data.value);
|
})
|
form.render();
|
});
|
}
|
function labelChange(e) {
|
parent.updateLabel(1,currentLabelId,$("#input").val());
|
}
|
|
</script>
|
|
|
</body>
|
|
</html>
|
