<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
<style>
body{margin:0;line-height:0;background:#E6EBED;}
#wrap{
width:400px;
overflow:hidden;
margin:36px auto 0;
padding:0;
border:1px solid #D2DCE1;
border-radius:3px;
background:#FFF;
box-shadow:1px 1px 2px #999;
}
#main{
padding:10px;
overflow:hidden;
}
h3{
font-size:20px;
margin:0px auto 18px;
padding:0;
line-height:25px;
text-align:center;
font-family:微软雅黑;
}
select{
float:left;
}
label{
margin:5px 0;
font-size:12px;
line-height:20px;
}
input{
float:left;
margin:5px 0;
}
label,textarea{
float:left;
clear:both;
}
textarea{
padding:0;
width:100%;
}
input.submit{
float:right;
width:80px;
height:25px;
font-size:14px;
font-family:微软雅黑;
text-shadow:1px 1px 1px #999;
color:#FFF;
border:1px solid #98CCE7;
border-radius:20px;
background:-moz-linear-gradient(top,#BADFF3,#7ACBED);
box-shadow:1px 1px 1px #999;
}
#file input{
float:left;
clear:both;
}
#file_thumb input{
float:left;
clear:both;
}
a#plus{
float:left;
clear:both;
margin:10px 0 0;
font-size:12px;
color:#09C;
text-decoration:none;
}
#foot{
padding:20px;
overflow:hidden;
border-top:1px solid #D2DCE1;
border-radius:0 0 3px 3px;
background:#F0F5F7;
}
body .hide{
display: none;
}
.error-msg{
border: 1px solid #ff8080;
background-color: #fff3f3;
padding: 3px;
display: inline-block;
font-size:13px;
}
</style>
</head>
<body>
<script src="jquery-1.6.4.min.js"></script>
<script>
$(function(){
var fileact = 0;
$("#plus").bind("click",function(){
if(fileact++ <= 3){
$("<input/>").attr("type", "file")
.attr("name", "detail_file_" + fileact)
.bind("change", function(){fileChangeCheck(this,true,'')})
.appendTo("#file");
}
});
$("#cat,#ite").hide();
$("#sel").one("change",function(){
$(this).find("option").first().remove();
});
$("#sel").bind("change",function(){
if($(this).find("option:selected").val() == 1){
$("#cat,#ite").show();
}else{
$("#cat,#ite").hide();
}
});
$.getJSON("http://192.168.1.210:8080",function(json){
var catlen = json.data.length;
var seltion;
var itelen;
for(var i=0;i<catlen;i++){
$("#cat").append($("<option/>").val(json.data[i].cid).html(json.data[i].cname));
}
$("#cat").one("change",function(){
$(this).find("option").first().remove();
});
$("#cat").bind("change",function(){
$("#ite").empty();
seltion = $(this).find("option:selected").index();
itelen = json.data[seltion].item.length;
for(var i=0;i<itelen;i++){
$("#ite").append($("<option/>").html(json.data[seltion].item[i].cname));
}
});
});
$('[name=thumb_file]').eq(0).change(function(){fileChangeCheck(this,true,'')});
$('[name=detail_file]').eq(0).change(function(){fileChangeCheck(this,true,'')});
});
function fileChangeCheck(file, isMustFill, supportTypes) {
var v = file.value;
if(v) {
v = v.toLowerCase();
}else {
$('[name=ExtCheckMsg]').eq(0).addClass('hide');
return;
}
var defaultSupportTypes = "png";//默认只支持png图片格式
var p;
if(supportTypes && supportTypes != '') {
p = new RegExp("^(\.+\\.)("+supportTypes.replace(/ /g,"").replace(/,|，/g ,"|")+")$");
}else {
p = new RegExp("^(\.+\\.)("+defaultSupportTypes.replace(/ /g,"").replace(/,|，/g ,"|")+")$");
}
if(!p.test(v.replace(/\n/g,''))) {
$('[name=ExtCheckMsg]').eq(0).removeClass('hide');
if(isMustFill) {
$('[name=MustFillMsg]').eq(0).addClass('hide');
}
try{InitFrame()}catch(e){}
return false;
}else {
$('[name=ExtCheckMsg]').eq(0).addClass('hide');
if(isMustFill) {
$('[name=MustFillMsg]').eq(0).addClass('hide');
}
}
try{InitFrame()}catch(e){}
}
</script>
<div id="wrap">
<div id="main">
<h3>新增产品</h3>
<label>产品分类：</label>
<select id="sel">
<option>--请选择类别--</option>
<option value="1">大奖</option>
<option value="2">新品</option>
</select>
<select id="cat">
<option>--请选择大奖类别--</option>
</select>
<select id="ite">
<option>--请选择--</option>
</select>
<label>产品名称：</label>
<input>
<label>产品价格：</label>
<input>
<label>产品功能：</label>
<textarea></textarea>
<label>推荐理由：</label>
<textarea></textarea>
<label>产品照片缩略图：</label>
<div id="file_thumb">
<input type="file" class="file" name="thumb_file">
</div>
<label>产品照片详细图：</label>
<div id="file">
<input type="file" class="file" name="detail_file">
</div>
<a href="javascript:void(0);" id="plus">添加详细图</a>
</div>
<div id="foot">
<span class="error-msg hide" name="MustFillMsg" style="clear:both;">
<label class="content" style="font-size:13px;">文件名不能为空</label>
</span>
<span class="error-msg hide" name="ExtCheckMsg" style="clear:both;float:left;">
<label class="content" style="font-size:13px;">文件格式不正确</label>
</span>
<input type="submit" class="submit" value="提交">
</div>
</div>
</body>
</html>
|
