|
|
@@ -23,7 +23,141 @@
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
+ $(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');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ for (var i = 0; i < 4; i++) {
|
|
|
+ var observeEle = document.getElementsByClassName('upload-content')[i];
|
|
|
+ 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 () {
|
|
|
+ for (var i = 1;i<=4;i++) {
|
|
|
+ $("#bannerBox" + i).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>
|
|
|
+ <style>
|
|
|
+ .jumpType{
|
|
|
+ margin-left: 20px;
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <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: -27px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 50px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hide-pic {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paramRow {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<ul class="nav nav-tabs">
|
|
|
@@ -40,6 +174,38 @@
|
|
|
<form:input path="name" htmlEscape="false" maxlength="30" class="input-xlarge required"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+<%-- <div class="control-group iconBox">--%>
|
|
|
+<%-- <label class="control-label"><span class="help-inline"><font color="red">*</font> </span>PC端banner：</label>--%>
|
|
|
+<%-- <div class="controls upload-content" id="bannerBox1">--%>
|
|
|
+<%-- <div class="conList">--%>
|
|
|
+<%-- <hidden id="productPcBanner" htmlEscape="false" maxlength="255" class="input-xlarge required"/>--%>
|
|
|
+<%-- <sys:ckfinder input="productPcBanner" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"--%>
|
|
|
+<%-- maxHeight="100"/>--%>
|
|
|
+<%-- <br>--%>
|
|
|
+<%-- <label style="margin-left: 150px">建议图片分辨率1920px*510px</label>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- <div class="control-group iconBox">--%>
|
|
|
+<%-- <label class="control-label"><span class="help-inline"><font color="red">*</font> </span>移动端banner：</label>--%>
|
|
|
+<%-- <div class="controls upload-content" id="bannerBox2">--%>
|
|
|
+<%-- <div class="conList">--%>
|
|
|
+<%-- <hidden id="productAppBanner" htmlEscape="false" maxlength="255"--%>
|
|
|
+<%-- class="input-xlarge required"/>--%>
|
|
|
+<%-- <sys:ckfinder input="productAppBanner" type="images" uploadPath="/photo" selectMultiple="false"--%>
|
|
|
+<%-- maxWidth="100" maxHeight="100"/>--%>
|
|
|
+<%-- <br>--%>
|
|
|
+<%-- <label style="margin-left: 150px">建议图片分辨率750px*366px</label>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- <div class="control-group">--%>
|
|
|
+<%-- <label class="control-label">banner跳转链接：</label>--%>
|
|
|
+<%-- <div class="controls">--%>
|
|
|
+<%-- <input htmlEscape="false" placeholder="输入URL地址"--%>
|
|
|
+<%-- class="input-xlarge"/>--%>
|
|
|
+<%-- </div>--%>
|
|
|
+<%-- </div>--%>
|
|
|
<div class="control-group">
|
|
|
<label class="control-label"><span class="help-inline"><font color="red">*</font> </span>排序：</label>
|
|
|
<div class="controls">
|
JiangChongBo