<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
overlay .page {
-webkit-border-radius: 3px;
-webkit-box-orient: vertical;
-webkit-transition: 200ms -webkit-transform;
background: black;
box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
color: #333;
display: -webkit-box;
min-width: 400px;
min-height: 100px;
padding: 0 10px 5px 10px;
position: relative;
z-index: 0;
}
.tanchu_title {
margin-top: 5px;
height: 30px;
line-height: 25px;
font-size: 14px;
font-weight: bold;
}
.overlay .page > .close-button {
background-image: url(images/IDR_CLOSE_DIALOG);
background-position: center;
background-repeat: no-repeat;
height: 14px;
position: absolute;
right: 7px;
top: 7px;
width: 14px;
z-index: 1;
}
.order {
width: 645px;
border: 1px solid #cecece;
border-radius: 5px;
}
.textacss {
width: 200px;
height: 70px;
border: 1px solid red;
vertical-align: middle;
border-radius: 5px;
}
.orderfoot {
margin-top: 15px;
margin-bottom: 5px;
text-align: center;
}
.login_username {
font-size: 14px;
width: 180px;
height: 20px;
line-height: 20px;
color: #333;
padding: 5px 6px;
vertical-align: middle;
outline: none;
resize: none;
}
span {
display: inline-block;
}
.lBtn {
height: 30px;
min-width: 80px;
text-align: center;
color: #a33300;
font: 13px/40px "微软雅黑E\8F6F\96C5\9ED1";
/*background: url(images/yellowBtn.png) no-repeat left top;*/
background-color: #FFC815;
text-decoration: none;
border: 0;
cursor: pointer;
background-size: 100% 300%;
line-height: 30px;
}
.btn {
background-image: -webkit-linear-gradient(#F0F0F0, #F0F0F0 38%, #E0E0E0);
border-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
color: #000;
border: 1px solid #CCC;
border-radius: 5px;
padding: 6px;
/* width: 80px; */
text-align: center;
}
.itemxuanzhong {
background-image: none;
background-color: #B6F0CF !important;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="page" style="width:600px;height:470px;border:1px solid black;margin:0px auto;">
<h3 class="tanchu_title">新增标签</h3>
<div class="close-button" id="indent_zan_cun_guanbi1"></div>
<div class="dialog_content" style="height:365px;padding:10px;">
<span>标签名称:
<input id="label_name" class="login_username" style="background: right no-repeat; width:150px;"><br>
<span style="margin-top:20px;">
<span style="margin-top: 7px;">参与工序:</span>
<div id="participation_process" style="overflow-y:auto;width:450px;max-height:67px;float:right;">
</div>
</span><br><br>
<fieldset class="order" style="width: 430px;height:100px;margin-top:5px;margin-left:70px;overflow-y:auto;">
<input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="底漆" style="width:50px;margin-left:10px;margin-top:3px;">
<input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="雕刻" style="width:50px;margin-left:10px;margin-top:3px;">
<input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="批灰" style="width:50px;margin-left:10px;margin-top:3px;">
<input type="button" onclick="just_select(this);participation_process(this)" class="btn itemxuanzhong" value="贴纸" style="width:50px;margin-left:10px;margin-top:3px;">
<input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="面漆" style="width:50px;margin-left:10px;margin-top:3px;">
<input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="包装" style="width:50px;margin-left:10px;margin-top:3px;">
</fieldset>
<span style="margin-left:28px;margin-top:20px;">备注: <textarea id="label_beizhu" name="" cols="" rows="" style="width:445px;border:1px solid #ccc;border-radius: 5px;" class="textacss"></textarea><br>
</span></span></div>
<div class="orderfoot" style=" margin-top:0px">
<input type="button" value="确 定" class="lBtn" style="margin-right:20px;" onclick="Validation_lable(this,'add')">
<input type="button" value="取 消" class="lBtn" style="margin-right:20px;" onclick="close_xianshi(this)">
</div>
</div>
</body>
<script type="text/javascript">
//设置选中
function just_select(obj){
$(obj).addClass("itemxuanzhong").siblings().removeClass("itemxuanzhong");
}
//选择添加工序
function participation_process(obj){
var obj1=$(obj).clone();
$(obj1).addClass("itemxuanzhong");
$(obj1).removeAttr("onclick");
$("#participation_process").append("<div class='select_lable' style='width:60px;height:40px;vertical-align: top;position: relative;display:inline-block;'></div>");
$("#participation_process").children("div:last").append($(obj1));
$("#participation_process").children("div:last").append("<span style='color:red;cursor: pointer;position: absolute;top:-2px;right:0px;' onclick='del_owner_jiedian(this)'>x</span>");
}
//删除节点
function del_owner_jiedian(obj){
$(obj).parent().remove();
}
//添加和修改效验
function Validation_lable(tthis,flag){
var obj={};
var label_name=$("#label_name").val();
var label_beizhu=$("#label_beizhu").val();
if($.trim(label_name)!=0){
obj.label_name=label_name;
}
var str=[];
var select_label=$('#participation_process').find(".select_lable");
select_label.each(function(){
str.push($(this).find(".itemxuanzhong").val());
})
if(str.length!=0){
str=str.join(",")
obj.select_label=str;
}
if($.trim(label_beizhu)!=0){
obj.label_beizhu=label_beizhu;
}
if(JSON.stringify(obj)=="{}"||$.trim(label_name)==0){
alert("请填写标签名称");
return false;
}
if(flag=="add"){
confirm_new_add_lable(tthis,obj);
}else{
confirm_edit_lable(tthis,obj);
}
}
//确认添加标签
function confirm_new_add_lable(tthis,obj){
$.ajax({url:'API',
dataType:'json',
type:'post',
data:obj,
success:function(data){
close_xianshi(tthis);
}
})
}
//确认修改标签
function confirm_edit_lable(tthis,obj){
$.ajax({url:'API',
dataType:'json',
type:'post',
data:obj,
success:function(data){
close_xianshi(tthis);
}
})
}
</script>
</html>