caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>图片管理</title>
	<meta name="decorator" content="default"/>
	<style>
		.iconBox {
			font-size: 0;
		}

		.controls .conList {
			display: inline-block;
			margin-right: 15px;
		}

		.conList .btn:nth-of-type(1) {
			margin-left: 25px;
		}

		.upload-content {
			margin-top: -70px;
		}

		.upload-content .conList .btn:nth-of-type(1) {
			width: 90px;
			height: 100px;
			border: 2px solid #eee;
			background: #fff;
			position: relative;
		}

		.upload-content .conList .btn:nth-of-type(1) > div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #666;
		}

		.upload-content .conList .btn:nth-of-type(1) span {
			font-size: 35px;
		}

		.upload-content .conList .btn:nth-of-type(1) h5 {
			color: #666;
		}

		.cancel-upload {
			background: transparent;
			border: none;
			box-shadow: none;
			position: relative;
			top: -38px;
			left: -25px;
			cursor: pointer;
			z-index: 100;
		}

		.upload-content .conList ol li {
			width: 114px;
			min-height: 80px;
			text-align: center;
			background: #fff;
			position: relative;
			top: 120px;
			margin-left: 2px;
		}

		.hide-pic {
			display: none !important;
		}

		.paramRow {
			margin-top: 10px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					var image = $("#image").val();
					if (image === '') {
						alertx("请上传二维码图片");
						return false;
					}
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/hehe/cmHeheRelatedImages/form?id=1">首页二维码</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="cmHeheRelatedImages" action="${ctx}/hehe/cmHeheRelatedImages/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>		
		<div class="control-group iconBox">
			<label class="control-label"><span class="help-inline"><font color="red">*</font> </span>二维码：</label>
			<div class="controls upload-content" id="imageBox1">
				<div class="conList">
					<form:hidden id="image" path="image" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
					<sys:ckfinder input="image" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"
								  maxHeight="100"/>
					<br>
					<label style="margin-left: 150px">建议图片分辨率500px*500px</label>
				</div>
			</div>
		</div>
		<div class="form-actions">
			<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
<script>
	$(function () {
		$('.upload-content .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
		$('.upload-content .conList .btn:nth-of-type(2)').after('<img class="cancel-upload" src="/static/images/close-btn1.png">').remove();
		$('.upload-content .conList').find('.cancel-upload').hide();
		var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
		var MutationObserverConfig = {
			childList: true,
			subtree: true,
			characterData: true
		};
		var observer = new MutationObserver(function (mutations) {
			$.each(mutations, function (index, item) {
				if (item.type === 'childList') {
					// 在创建新的 element 时调用
					var target = $(item.target),
							thisWrapper = target.closest('.conList'),
							nextEle = thisWrapper.next();
					thisWrapper.find('li').css('z-index', 99);
					thisWrapper.find('.cancel-upload').show();
					if (nextEle.hasClass('hide-pic')) {
						nextEle.removeClass('hide-pic');
					}
				}
			})
		});
		var observeEle = document.getElementsByClassName('upload-content')[0];
		observer.observe(observeEle, MutationObserverConfig)
		$('body').on('click', '.cancel-upload', function () {
			var wrapper = $(this).closest('.conList');
			wrapper.find('li').css('z-index', '-1');
			wrapper.find('input').val('');
			$(this).hide();
			wrapper.removeClass("hide-pic");
			wrapper.parent().append(wrapper.clone());
			wrapper.remove();
			$(".conList").each(function (i, ele) {
				if ($(ele).find("input.input-xlarge").val()) {
					$(ele).next().removeClass("hide-pic")
				}
			})
		});
		$(window).on("load", function () {
			setTimeout(function () {
				$("#imageBox1").find("input.input-xlarge").each(function (i, ele) {
					if ($(ele).val()) {
						$(ele).next().find("li").css("z-index", "99");
						$(ele).parents(".conList").find(".cancel-upload").show();
						$(ele).parents(".conList").next().removeClass("hide-pic")
					}
				});
			}, 200);
		});
	});
</script>
</body>
</html>