You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

840 lines
42 KiB
Plaintext

11 months ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>傻瓜表单样式定义</title>
<script src="../../../Scripts/jquery-1.11.0.min.js"></script>
<script src="../../../Scripts/QueryString.js" type="text/javasFoolFrmBodycript">
</script>
<script src="../../../Scripts/config.js" type="text/javascript"></script>
<script src="../../../Scripts/QueryString.js" type="text/javascript"></script>
<script src="../../../Comm/Gener.js" type="text/javascript"></script>
<link href="../../CSS/FoolFrmBody.css" rel="stylesheet" />
<link href="../../CSS/Toolbar.css" rel="stylesheet" />
<link href="../../../Style/skin/css/Default.css" rel="stylesheet" />
<link href="../../../Style/skin/adminfont/iconfont.css" rel="stylesheet" />
<link href="../../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
<script src="../../../Scripts/layui/layui/layui.js" type="text/javascript"></script>
<link href="../../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- <script src="../../Admin.js"></script>-->
<!--<link href="../../../Scripts/bootstrap/css/bootstrap.css" rel="Stylesheet" />-->
<!-- 用于显示图标 -->
<link href="../../../Comm/fonts/simple-line-icons.css" rel="stylesheet" />
<link href="../../../Comm/fonts/font-icons.min.css" rel="stylesheet" />
<link href="../../../Comm/fonts/font-awesome.css" rel="stylesheet" />
<script src="StyleEditor.js"></script>
<!-- 字段的三个风格. -->
<style type="text/css">
.layui-btn-radius {
border-radius: 10px;
}
.FoolFrmBody table tr td {
position: relative
}
.input-group {
position: absolute;
z-index: 99;
left: 15px;
top: 17px;
}
.FoolFrmBody input {
padding-left: 25px;
}
.layui-row {
margin-bottom: 5px;
}
.layui-col-xs2 {
padding-left: 5px
}
.layui-inline {
margin-bottom: 5px;
}
.layui-input-inline {
width: 100px !important;
}
.input-icon {
position: absolute;
left: 1px;
top: 1px;
width: 38px;
line-height: 36px;
text-align: center;
color: #d2d2d2;
}
.layui-input, .layui-select, .layui-textarea {
height: 38px;
line-height: 1.3;
line-height: 38px\9;
border-width: 1px;
border-style: solid;
background-color: #fff;
border-radius: 2px;
}
</style>
<script type="text/javascript">
var styleNo = null;
layui.use(['dropdown', 'colorpicker', 'layer', 'table', 'form', 'laydate'], function () {
var dropdown = layui.dropdown
, form = layui.form
, layer = layui.layer
, colorpicker = layui.colorpicker
, laydate = layui.laydate
, element = layui.element
, $ = layui.jquery;
form.render('select');
//绑定模版.
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
ens = hander.DoMethodReturnJSON("Default_GenerTemplate");
var templates = [];
var templateName = GetQueryString("Template");
templateName = templateName == null || templateName == undefined ? "" : templateName;
$.each(ens, function (i, item) {
if (item.No == templateName) {
$("#TB_Template").html(item.Name);
}
templates.push({
"id": item.No,
"title": item.Name
});
})
dropdown.render({
elem: '#Btn_Template'
, data: templates
, click: function (obj) {
TemplateChange(obj.id);
}
});
if (templateName && templateName.indexOf("Sys.") > 0)
$("#Btn_Delete").attr("disabled", "disabled");
//绑定面板.
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
ens = hander.DoMethodReturnJSON("Default_GenerGloVars");
//绑定风格文件
GenerBindDDL("DDL_Style", ens, "No", "Name");
//装载风格文件.
LoadCss();
//增加事件,调用 StyleEditer.js .
AddEventExt();
//增加字段icon.
AddICON();
styleNo = $("#DDL_Style").val();
//设置颜色
$.each($(".layui-color"), function (i, item) {
var id = item.id;
//开启全功能
colorpicker.render({
elem: '#' + id
, color: ''
, format: 'rgb'
, predefine: true
, alpha: true
, done: function (color) {
var cssID = this.elem.replace("#div_", "");
$('#TBPara_' + cssID).val(color); //向隐藏域赋值
var changeobj = $('#DDL_Style').val();//要改变的对象.
if (changeobj) { //判断是否有选中对象
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText = cssText + cssID + ":" + color + " !important";
$("." + changeobj).css("cssText", cssText);
setTimeout(function () { }, 500);
}
color || this.change(color); //清空时执行 change
}
, change: function (color) {
var cssID = this.elem.replace("#div_", "");
//给当前页面头部和左侧设置主题色
var changeobj = $('#DDL_Style').val();//要改变的对象.
console.log(changeobj)
if (changeobj) { //判断是否有选中对象
/*var cssText = $("." + changeobj).attr("style") + cssID + ":" + color + " !important";
//$("." + changeobj).css(cssID, color);
$("." + changeobj).css("cssText", cssText);
setTimeout(function () { }, 500);*/
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText = cssText + cssID + ":" + color + " !important";
$("." + changeobj).css("cssText", cssText);
setTimeout(function () { }, 500);
}
}
});
});
//处理工具栏按钮
$('.layui-toolbar').on('click', function () {
var url = "";
var title = "";
var type = $(this).data('type');
switch (type) {
case "Back": //返回
Back();
break;
case "Btn_App"://应用
App();
break;
case "Btn_Delete"://删除模板
Delete(templateName);
break;
case "Btn_Save"://保存为模板
SaveAsTemplate();
break;
case "Btn_Refresh"://刷新
Reload();
break;
default: break;
}
});
//改变风格Style
form.on('select(StyleChange)', function (data) {
if (data.value == null || data.value == "") {
//显示.
$("#styleeditor").hide();
return;
}
if (data.value == "FoolFrmTable") {
$(".stylegroup").hide();
$(".styledetail").hide();
} else {
$(".stylegroup").show();
$(".styledetail").show();
}
DDLChange(data.value, colorpicker);
form.render('select');
});
form.on('select(ChangeStyle)', function (data) {
DDLChange("FoolFrmFieldInput", colorpicker);
form.render('select');
})
//字体大小单位的监听
form.on('select(unit)', function (data) {
var id = data.elem.id;
var textId = id.replace("-unit", "");
var changeobj = $('#DDL_Style').val();//要改变的对象
var thispropertyval = $("#" + textId).val();//文字大小的值
if (changeobj) {//判断是否有选中对象
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText += "font-size:" + thispropertyval + data.value + " !important";
$("." + changeobj).css("cssText", cssText);
}
});
//字体设计
form.on('select(font)', function (data) {
var id = data.elem.id;
var cssID = id.replace("TBPara_", "");
cssID = cssID.replace("DDLPara_", "");
var changeobj = $('#DDL_Style').val();//要改变的对象
if (changeobj) {
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText +=cssID + ":" + data.value + " !important";
$("." + changeobj).css("cssText", cssText);
}
})
//边框
form.on('select(borderWhich)', function (data) {
var changeobj = $('#DDL_Style').val();
var thispropertyval = $("#TBPara_border-width_Temp").val();
var borderselect = data.value;
if (changeobj) {
var cssText = $("." + changeobj).attr("style");
cssText = cssText == null || cssText == undefined ? "" : cssText;
if (borderselect == "all") {
cssText += "border-width:" + thispropertyval + $("#TBPara_border-width-unit_Temp").val() + " !important";
} else {
cssText += "border-" + borderselect + "-width:" + thispropertyval + $("#TBPara_border-width-unit_Temp").val() + " !important";
}
$("." + changeobj).css("cssText", cssText);
}
})
//表单中标签或者输入框的点击事件
$.each(ens, function (i, en) {
$("." + en.No).attr("data-info", en.No);
$("." + en.No).on('click', function () {
if ($(this).attr("data-info") == "FoolFrmFieldRow" || $(this).attr("data-info") == "FoolFrmTitle")
return;
DDLChange($(this).attr("data-info"), colorpicker);
form.render();
return;
})
})
form.render();
/**
* 改变模板文件
* @param val
*/
function TemplateChange(val) {
if (val == "" || val == undefined) {
return;
}
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
hander.AddPara("Name", val);
var msg = hander.DoMethodReturnString("Default_Template_Selected");
var url = "?FK_MapData=" + GetQueryString("FK_MapData");
url += "&FrmID=" + GetQueryString("FrmID");
url += "&FK_Node=" + GetQueryString("FK_Node");
url += "&FK_Flow=" + GetQueryString("FK_Flow");
url += "&Template=" + val;
SetHref(url);
}
/**
*退回
*/
function Back() {
var url = "../Designer.htm?FK_MapData=" + GetQueryString("FK_MapData");
url += "&FrmID=" + GetQueryString("FrmID");
url += "&FK_Flow=" + GetQueryString("FK_Flow");
url += "&FK_Node=" + GetQueryString("FK_Node");
SetHref(url);
}
/*
* 应用
*/
function App() {
layer.confirm('您确认要执行吗?确定后,就会替换现在的风格文件。', {
btn: ['确定', '取消']
}, function (index) {
layer.close(index);
SaveItem();
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
var data = hander.DoMethodReturnString("Default_App");
if (data.indexOf('err@') == 0) {
layer.alert(data);
return;
}
Back();
}, function (index) {
layer.close(index);
});
}
/**
* 删除模板
*/
function Delete(val) {
if (val == "") {
layer.alert("请选择一个模版.");
return;
}
layer.confirm('您确认要执行删除吗?', {
btn: ['确定', '取消']
}, function (index) {
layer.close(index);
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
hander.AddPara("Name", val);
var data = hander.DoMethodReturnString("Default_Template_Delete");
alert(data);
if (data.indexOf('err@') == 0) {
alert(data);
return;
}
Reload();
}, function (index) {
layer.close(index);
});
}
/**
* 保存为模板
*/
function SaveAsTemplate() {
layer.prompt({
title: '请输入模版名称,不能有特殊符号.',
formType: 0,
value: '',
}, function (str, index) {
layer.close(index);
if (str == null || str == undefined || str == "")
return;
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
hander.AddPara("TemplateName", str);
var data = hander.DoMethodReturnString("Default_SaveAsTemplate");
layer.alert(data);
if (data.indexOf('err@') == 0)
return;
});
}
/**
* 动态加载css样式
*/
function LoadCss() {
var url = "../../../../DataUser/Style/FoolFrmStyle/DefaultPreview.css?ref=11" + Math.random();
// 动态加载css
var loadStyle = function (url) {
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
};
// css加载
loadStyle(url);
$('head').children(':last').attr({
rel: "stylesheet",
type: 'text/css',
href: url,
});
}
function SetICONForCtrl(id, icon) {
var html = "";
html += ' <i class="' + icon + '"></i>';
$('#' + id).before(html);
$("#" + id).css("padding-left", "40px");
}
function AddICON() {
SetICONForCtrl("TB_Tel", "input-icon icon-phone");
SetICONForCtrl("TB_Email", "input-icon icon-envelope-letter");
SetICONForCtrl("TB_Addr", "input-icon icon-location-pin");
SetICONForCtrl("TB_SQR", "input-icon layui-icon layui-icon-username");
SetICONForCtrl("TB_SQRQ", "input-icon layui-icon layui-icon-date");
}
});
//保存应用.
function SaveItem(styleNo) {
if (styleNo == null || styleNo == undefined)
styleNo = $("#DDL_Style").val();
en = new Entity("BP.Sys.GloVar", styleNo);
$("#Btn_SaveItem").val("正在保存...");
if (en.AtPara == null || en.AtPara == undefined)
en.AtPara = "";
//处理数据.
DealHidCtrl();
//设置为空.
en.AtPara = "";
//执行copy.
en.CopyForm();
en.Val = en.AtPara;
if (en.Val == "") {
alert("err");
return;
}
// alert(en.AtPara);
en.Update();
//生成风格文件作用于.
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
var data = hander.DoMethodReturnString("GloValStyles_App");
$("#Btn_SaveItem").val("保存成功....");
setTimeout(function () { $("#Btn_SaveItem").val("保存"); }, 500);
}
//调样式的面板
function DDL_Style_Change() {
var val = $("#DDL_Style").val();
if (val == null || val == "") {
//显示.
$("#styleeditor").hide();
//执行一次保存.
//SaveItem();
return;
}
if (val == "FoolFrmTable") {
$(".stylegroup").hide();
$(".styledetail").hide();
} else {
$(".stylegroup").show();
$(".styledetail").show();
}
DDLChange(val);
}
function DDLChange(changeToStyleNo, colorpicker) {
//显示.
$("#styleeditor").show();
//保存旧的条目.
SaveItem(styleNo);
styleNo = changeToStyleNo;
en = new Entity("BP.Sys.GloVar", styleNo);
//执行批量赋值.
var val = en.Val;
en.AtPara = val;
GenerFullAllCtrlsVal(en);
$("#DDL_Style").val(styleNo);
}
</script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header" style="text-align: center;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);background-color:white">
<div class="layui-btn-container" style="padding-top:10px">
<button type="button" class="layui-btn layui-btn-sm layui-toolbar" data-type="Back">
<i class="layui-icon layui-icon-return"></i>返回
</button>
<button class="layui-btn layui-btn-normal layui-btn-sm layui-toolbar" id="Btn_Template">
<span id="TB_Template">请选择模板</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-toolbar" data-type="Btn_App">
<i class="layui-icon layui-icon-app"></i>应用
</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm layui-toolbar" data-type="Btn_Delete" id="Btn_Delete">
<i class="layui-icon layui-icon-delete"></i>删除模版
</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-toolbar" data-type="Btn_Save">
<i class="layui-icon layui-icon-save"></i>保存为模版
</button>
<button type="button" class="layui-btn layui-btn-sm layui-toolbar " data-type="Btn_Refresh">
<i class="layui-icon layui-icon-refresh"></i>刷新
</button>
</div>
</div>
<div class="layui-body" style="margin-top:20px;left:15px">
<div class="layui-row">
<form class="layui-form">
<div class="layui-col-xs8">
<div class="layui-card layui-panel" style="height:100%">
<div class="layui-card-body">
<div class="layui-row FoolFrmTitle">
<div class="layui-col-xs12">
<div class="FoolFrmTitleIcon pull-right"><img src='../../../../DataUser/ICON/LogBiger.png' style='height:40px;' /></div>
<div class="FoolFrmTitleLable">傻瓜表单样式定义器</div>
</div>
</div>
<div class="layui-row FoolFrmGroupBar">
<div class="layui-col-xs12">基本信息</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">申请人</div>
<div class="layui-col-xs4">
<input class="layui-input FoolFrmFieldInput" type="text" id="TB_SQR" value="驰骋工作流" />
</div>
<div class="layui-col-xs2 FoolFrmFieldLabel">申请日期</div>
<div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_SQRQ" value="2003-02-23" /></div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">地址</div>
<div class="layui-col-xs10">
<input class="layui-input FoolFrmFieldInput" type="text" id="TB_Addr" value="济南市.高新区.碧桂园凤凰中心19层" />
</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs12 FoolFrmFieldLabel"><span style="color:red">*</span>申请原因</div>
<div class="layui-col-xs12">
<textarea class="layui-textarea FoolFrmFieldInput" id="TB_SQYY" placeholder="不少于50字请仔细填写" cols="10"></textarea>
</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">电话</div>
<div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_Tel" value="0531-82374939" /></div>
<div class="layui-col-xs2 FoolFrmFieldLabel">邮件</div>
<div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_Email" value="ccs@ccflow.org" /></div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel"> 是否执行到位?</div>
<div class="layui-col-xs4 FoolFrmFieldInput">
<div class="">
<input type="checkbox" name="CB_IsOK" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
<div class="layui-col-xs2 FoolFrmFieldLabel">性别</div>
<div class="layui-col-xs4">
<select name="DDL_XB" id="DDL_XB" lay-filter="ChangeStyle">
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">整治面貌</div>
<div class="layui-col-xs10 FoolFrmFieldInput">
<input type="radio" id="TB_ZZMM_0" name="ZZMM" value="0" title="群众" checked>
<input type="radio" id="TB_ZZMM_1" name="ZZMM" value="1" title="团员" />
<input type="radio" id="TB_ZZMM_2" name="ZZMM" value="2" title="党员" />
<input type="radio" id="TB_ZZMM_3" name="ZZMM" value="3" title="无党派人士" />
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card layui-panel" style="margin: 0px 30px 30px;">
<div class="layui-card-body">
<div>
<div>
<select name="DDL_Style" id="DDL_Style" lay-filter="StyleChange" style="width:200px"></select>
<div id="styleeditor" style="display:block;width:100%;">
<div class="ttstyle">整体</div>
<div class="styletitle layui-inline">
<label class="layui-form-label"> 背景颜色:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" type="hidden" id="TBPara_background-color" value="" />
<div id="div_background-color" class="layui-color"></div>
</div>
</div>
<div class="layui-inline styletitle">
<label class="layui-form-label"> 整体宽度:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_selfbody-width_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_selfbody-width-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_selfbody-width" />
</div>
<div class="layui-inline styletitle">
<label class="layui-form-label"> 整体高度:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_selfbody-hight_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_selfbody-hight-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_selfbody-hight" />
</div>
<div class="ttstyle stylegroup">字体</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label">字体大小:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_font-size_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_font-size-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_font-size" />
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 字体粗细:</label>
<div class="layui-input-inline">
<select id="TBPara_font-weight" lay-filter="font">
<option value="normal">正常</option>
<option value="bold">加粗</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 字体样式:</label>
<div class="layui-input-inline">
<select id="TBPara_font-style" lay-filter="font">
<option value="normal">正常</option>
<option value="italic">斜体</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label">字体行高:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_font-height_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_font-height-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_font-height" />
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label">字体款式:</label>
<div class="layui-input-inline">
<select id="TBPara_font-family" lay-filter="font">
<option value="SimSun">宋体</option>
<option value="SimHei">黑体</option>
<option value="Microsoft YaHei">微软雅黑</option>
<option value="Microsoft JhengHei">微软正黑体</option>
<option value="NSimSun">新宋体</option>
<option value="PMingLiU">新细明体</option>
<option value="MingLiU">细明体</option>
<option value="DFKai-SB">标楷体</option>
<option value="FangSong">仿宋</option>
<option value="KaiTi">楷体</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 字体颜色:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_color" value="" type="hidden" />
<div id="div_color" class="layui-color"></div>
</div>
</div>
<div class="ttstyle stylegroup">
<label class="layui-form-label"> 边框:</label>
<div class="layui-input-inline" style="float:left">
<select id="TBPara_border-which" lay-filter="borderWhich">
<option value="all" selected>全部</option>
<option value="top">上</option>
<option value="bottom">下</option>
<option value="left">左</option>
<option value="right">右</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 边框宽度:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_border-width_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_border-width-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_border-width" />
</div>
<div class="styletitle styledetail">
<label class="layui-form-label"> 边框颜色:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_border-color" value="" type="hidden" />
<div id="div_border-color" class="layui-color"></div>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 边框样式:</label>
<div class="layui-input-inline">
<select id="DDLPara_border-style" lay-filter="font" style="width:50px">
<option value="none">无</option>
<option value="solid">实线</option>
<option value="double">双线</option>
<option value="groove">3D凹槽</option>
<option value="ridge">3D垄状</option>
<option value="dashed">虚线</option>
<option value="dotted">点状</option>
</select>
</div>
</div>
</div>
<button type="button" id="Btn_SaveItem" onclick="SaveItem()" class="layui-btn layui-btn-fluid">保存</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>