caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
							<%@ 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;
		}

		.relative-pst{
			position: relative;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					var image = $("#image").val();
					if (image == '') {
						alertx("请上传轮播图");
						return false;
					}
					var jumpType = $("input[name='jumpType']:checked").val();
					if (3 == jumpType) {
						var jumpImage = $("#jumpImage").val();
						if (jumpImage == '') {
							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><a href="${ctx}/hehe/cmHeheImage/">轮播图列表</a></li>
		<li class="active"><a href="${ctx}/hehe/cmHeheImage/form?id=${cmHeheImage.id}">${not empty cmHeheImage.id?'编辑':'添加'}</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="cmHeheImage" action="${ctx}/hehe/cmHeheImage/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>		
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>主题：</label>
			<div class="controls">
				<form:input path="topic" htmlEscape="false" placeholder="最多输入30个汉字" style="position:relative" maxlength="30" class="input-xlarge required"/>
			</div>
		</div>
		<div class="control-group iconBox">
			<label class="control-label"><font color="red">*</font>图片：</label>
			<div class="controls upload-content" id="imageBox">
				<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: 20px">建议图片分辨率750px*366px</label>
				</div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">跳转方式：</label>
			<div class="controls" style="margin-top: 10px">
				<input type="radio" name="jumpType" value="4" class="relative-pst" onchange="changeJumpType()" ${cmHeheImage.jumpType eq 4 ? "checked" : ""} />无：
			</div>
			<div class="controls">
				<input type="radio" name="jumpType" value="1" class="relative-pst" onchange="changeJumpType()" ${(cmHeheImage.jumpType eq null || cmHeheImage.jumpType eq 1 )? "checked" : ""} />链接：
				<form:input path="jumpLink" htmlEscape="false" class="input-xxlarge relative-pst"/>
			</div>
			<div class="controls" style="margin-top: 10px">
				<input type="radio" name="jumpType" value="2" class="relative-pst" onchange="changeJumpType()" ${cmHeheImage.jumpType eq 2 ? "checked" : ""} />产品：
				<form:select path="jumpProductId" class="select-ele input-xlarge">
					<form:option value="" label="请选择"/>
					<form:options items="${productList}" itemLabel="name" itemValue="productId"
								  htmlEscape="false"/>
				</form:select>
			</div>
			<div class="controls upload-content" id="jumpImageBox">
				<input type="radio" name="jumpType" value="3" onchange="changeJumpType()" ${cmHeheImage.jumpType eq 3 ? "checked" : ""} />图片：
				<div class="conList iconBox">
					<form:hidden id="jumpImage" path="jumpImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
					<sys:ckfinder input="jumpImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
					<br>
					<label style="margin-left: 20px">建议图片分辨率750px*1624px</label>
				</div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>排序：</label>
			<div class="controls">
				<form:input path="sort" onkeyup="onlynum(this)" htmlEscape="false" class="input-xlarge required"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>状态：</label>
			<div class="controls">
				<form:select path="status" class="input-xlarge required">
					<form:option value="1" label="启用"/>
					<form:option value="2" label="停用"/>
				</form:select>
			</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 observeEle = document.getElementsByClassName('upload-content')[0];
		var observeEle1 = document.getElementsByClassName('upload-content')[1];
		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');
					}
				}
			})
		});
		observer.observe(observeEle, MutationObserverConfig);
		observer.observe(observeEle1, 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 () {
				$("#imageBox").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")
					}
				})
				$("#jumpImageBox").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);
		});

		changeJumpType();
	});

	/**
	 * @param obj
	 * jquery控制input只能输入数字
	 */
	function onlynum(obj) {
		obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
	}

	function changeJumpType() {
		var jumpType = $("input[name='jumpType']:checked").val();
		var jumpLink = $("#jumpLink");
		var jumpProductId = $("#jumpProductId");
		if (1 == jumpType) {
			jumpLink.addClass("required");
			jumpProductId.removeClass("required");
		}else if (2 == jumpType) {
			jumpProductId.addClass("required");
			jumpLink.removeClass("required");
		} else {
			jumpProductId.removeClass("required");
			jumpLink.removeClass("required");
		}
	}
</script>
</body>
</html>