onepage/tm/template_dir/admin/activity/setPage_article.html

<{include file="./admin/header.html"}>
<{include file="./admin/left.html"}>
<{include file="./admin/nav.html"}>
<{include file="get_kindeditor.html"}>

<script type="text/javascript" src="<{$web_cfg.cdn}>/public/static/js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/swiper.animate.min.css" />
<script src="<{$web_cfg.cdn}>/public/static/js/swiper.jquery.min.js"></script>
<script src="<{$web_cfg.cdn}>/public/static/js/swiper.animate.min.js"></script>

<style>
.set-nav {
	margin: 0 auto;
}
.set-nav-hr {
	background-color: #ddd;
    height: 1px;
    position: relative;
}
.form-group label {
	font-weight: 600;
}
.checkbox-inline, .radio-inline {
	font-weight: 400!important;
}
.rowlabel {
	font-weight: 300!important;
}
.music_play_hide {
	display:none;
}
.create_page_box {
	display:none;
	position: relative;
}
.create_page_box .panel-heading {
	background-color: #fff;
}
.topic_page, .template_page, .edit_page {
	width: 320px;
	height: 570px;
	background-color: #fff;
    box-shadow: 0 0 4px #d2d2d2;
    position: relative;
	margin: 20px auto 0px auto;
}
.topic_page_mask {
	
}

.template_page {
	margin-bottom: 20px;
	overflow: hidden;
}
.num_page {
	color: #777;
    font-size: 20px;
    font-weight: bold;
    left: 10px;
    position: absolute;
    top: 10px;
}
.ks-layer {
	float: left;
	width: 36px;
	height: 50px;
	border: 1px solid #777;
	margin-bottom: 7px;
    margin-right: 11px;
	position: relative;
	cursor: pointer;
}
.ks-layer>div {
	background-color: #ccc;
    border: 1px solid #777;
    display: inline-block;
    padding: 10px;
    position: absolute;
}
.ks-layer-center>div {
	left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    padding-left: 10px;
    padding-right: 10px;
    top: 50%;
}
.ks-layer-leftup>div {
	left: -1px;
    top: -1px;
}
.ks-layer-leftdown>div {
	bottom: -1px;
    left: -1px;
}
.ks-layer-rightup>div {
	right: -1px;
    top: -1px;
}
.ks-layer-down>div {
	bottom: 6%;
    left: 50%;
    margin-left: -10px;
    padding-left: 10px;
    padding-right: 10px;
}
.ks-layer-up>div {
	left: 50%;
    margin-left: -10px;
    margin-top: -1px;
    padding-left: 10px;
    padding-right: 10px;
}
.ks-layer-top>div {
	left: 50%;
    margin-left: -21px;
    padding-left: 20px;
    padding-right: 20px;
    top: 3px;
}
.ks-layer-bottom>div {
	left: 50%;
    margin-left: -21px;
    padding-left: 20px;
    padding-right: 20px;
    bottom: 3px;
}
.ks-layer-rightdown>div {
	bottom: -1px;
    right: -1px;
}
.ks-layer-box label {
	display: inline;
    margin: 0;
    padding: 0;
}
.ks-layer-radio label {
	font-size: 9px;
	width: 44px;
}
.ks-move-rest {
	border: 1px solid #777;
    height: 50px;
    margin-bottom: 18px;
    position: relative;
    top: 7px;
    width: 50px;
}
.ks-move-rest .black {
	background-color: #ccc;
    height: 100%;
    width: 100%;
}
.ks-move-left {
	border: 1px solid #777;
    height: 30px;
    left: -16px;
    margin-bottom: 28px;
    margin-top: 10px;
    position: relative;
    width: 65px;
}
.ks-move-left div {
	float: left;
    line-height: 28px;
    text-align: center;
    width: 31px;
}
.ks-move-left .black{
	background-color: #ccc;
    height: 28px;
    width: 32px;
}
.ks-move-top {
	border: 1px solid #777;
	height: 65px;
    width: 30px;
	margin-bottom: 5px;
}
.ks-move-top .black {
	background-color: #ccc;
    height: 32px;
    width: 28px;
}
.ks-move-top div {
	float: left;
    height: 31px;
    padding-top: 7px;
    text-align: center;
    width: 28px;
}
.topic_page  a {
	color: #666;
    display: block;
    font-size: 80px;
    line-height: 480px;
    text-align: center;
    text-decoration: none;
}
.topic_page a:hover {
	color: #999;
}
#create_page {
	position: relative;
    top: -35px;
}
.times {
	color: #333;
    display: block;
    font-size: 16px;
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: 1;
}
.edit {
	background-color: #fff;
    color: #777;
    font-size: 70px;
    height: 100%;
    opacity: 0.61;
    text-align: center;
    width: 100%;
    z-index: 10000;
	cursor: pointer;
}
.edit i {
	line-height: 480px;
}
.topic_button {
	z-index: 0;
}
.background_image {
	display: block;
    overflow: hidden;
    width: 100%;
    z-index: 0;
	position: absolute;
}
.ks-screen{width:220px;height:392px;background-color:#eee;float:left;margin-right:20px;position:relative;overflow:hidden;margin-bottom:20px;}
.swiper-container {width:100%; height:100%; position:absolute;}
.upper_image {position: absolute;}
.button_image {position: absolute;}
#set_screen {background-color: #fff;}
.mask {background-color: #fff;height: 100%;opacity: 0.5;position: absolute;width: 100%;display:none;cursor: move;}
.op {position: absolute;right: 5px;top: 5px;display:none;}
.op div {border:1px solid #666;margin-bottom:5px;color:#666;cursor:pointer;font-family:arial;padding:0 5px;background-color:#fff;}
.op div:hover {color:#000;}
#qrcode {background-color: #fff;box-shadow: 0 0 30px #d2d2d2;color: red;left: 40%; padding: 5px;position: fixed;text-align: center;top: 10%;}
#qrcode img {width: 250px;}
#qrcode .closed {cursor: pointer;font-size: 14px; padding: 0 7px;position: absolute;right: 0;top: 0;}
.ks-dd-dragging {position: relative;}
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {margin-left: 0px;}
.image-layer {background-color: #F1F1F1;padding: 10px;position: relative;margin-bottom:5px;box-shadow:0 0 2px #d2d2d2;}
.image-layer a{display: block;position: absolute;right: 5px;top: 10px;}
.image-layer-set {margin-top: 10px; display:none;}
.js_add_layer {bottom: -20px;position: absolute;}
.create_page_button {text-align:center;color:#999;cursor:pointer;}
.create_page_button:hover {color:#000;}
.create_page_button i {font-size: 30px;position: relative;top: 40%;}
.ks-input-page {background-color:#ccc;}
.ks-topic-bg-image {background-position: 0 0;}
</style>


<div id="activity_container">

<div class="activity_center">
<{include file="./admin/activity/common_nav.html"}>
<form id="activity_form">
<input name="events_id" type="hidden" value="<{$events_Data.events.id}>">
<div id="screens" class="panel panel-default">
	<div class="panel-body">
		<{foreach from=$pageData item=item key=key}>
		<{if !$item.input_page}>
		<div class="ks-screen ks-screen-p">
			<{if $item.bgimage_url}>
			<img class="background_image" style="" src="<{$item.bgimage_url}>" >
			<{/if}>
			
			<{foreach from=$item.layers item=layer}>
			<{if $layer.url}>
				<{if $layer.link}>
				<a href="<{$item.button_link}>">
				<{/if}>
				<img class="upper_image" style=
				"
				width:<{$layer.width}>px;
				height:<{$layer.height}>px;
				<{$layer.style}>
				"
				src="<{$layer.url}>"
				>
				<{if $layer.link}>
				</a>
				<{/if}>
			<{/if}>
			<{if $layer.video_url}>
				<div class="layer_anim" style="width:<{$layer.video_width}>px;height:<{$layer.video_height}>px;<{$layer.style}>;background-color:#ccc;color:#fff;font-size:20px;text-align:center;line-height:<{$layer.video_height}>px;" >视频</div>
			<{/if}>
			<{/foreach}>
			
			<input name="p[]" type="hidden" value='<{$item.json}>' />
			<div class="mask"></div>
			<div class="op">
				<div class="modify">修改</div>
				<div class="delete">删除</div>
			</div>
		</div>
		<{else}>
		<div class="ks-screen ks-screen-p ks-input-page">
			<div style="position:absolute;top:45%;text-align:center;width:100%;color:#999;">表单页</div>
			<input name="p[]" type="hidden" value='<{$item.json}>' />
			<div class="mask"></div>
			<div class="op">
				<div class="delete">删除</div>
			</div>
		</div>
		<{/if}>
		<{/foreach}>
		<div id="ks_create_screen" class="ks-screen create_page_button create_topic_page_button">
            <i class="fa fa-plus"></i>
        </div>
	</div>
	<div class="clear"></div>
</div>
<a id="save_submit" href="javascript:;" class="button button-3d button-primary button-rounded"><i class="fa fa-refresh fa-spin" style="display:none;"></i> 保存</a>
</form>
<div class="clear"></div>
	<div class="create_page_box panel panel-default" style="margin-top: 40px;">
		<div class="panel-body">
			<div class="num_page">N1</div>
			<a href="javascript:;" class="times create_page_closed"> x </a>
			<div class="row">
				<div class="col-md-6" style="position: sticky; top: 50px;">
					<!-- 可视化页面 -->
					<div class="template_page"></div>
				</div>
				<!-- 表单 begin -->
				<div class="col-md-6">
					<div class="block_15"></div>
					<div class="create_page_input_box"></div>
					<a href="javascript:;" class="js_add_layer">增加一个图层 +</a>
				</div>
				<!-- 表单 end -->
			</div>
			<p></p>
			<div style="text-align:center;margin-top:40px;">
			<a href="javascript:;" class="create_page_submit button button-primary button-rounded">保存</a>
			<a href="javascript:;" class="create_page_closed button  button-rounded">取消</a>
			</div>
		</div>
	</div>
</div>

<script>
var tmpPG, tmpPageData = {'layers': {}}, modify_ks_screen;
KISSY.use('node, io, op_dever/topic-page-2, json, event, dom, dd, dd/plugin/scroll, dd/plugin/proxy, xtemplate', function (S, Node, IO, TopicPage, JSON, Event, DOM, DD, Scroll, Proxy, XTemplate) {
	var $ = S.all;
	var K = KindEditor;
	
	tmpPG = new TopicPage('.template_page');
	
	//创建专题页面
	$(".create_topic_page_button").on('click', function () {
		create_page_box_show();
		
		var numberPage = $("#screens .ks-screen-p").length;
		$(".num_page").text('N' + ++numberPage);
		
		var id = genid();
		var data = {'id': id};
		var render = getBackgroundInputTpl(data);
		$(".create_page_input_box").append(render);
		bind_upload(id);
	});
	//创建表单页面
	/*
	$(".create_input_page_button").on('click', function () {
		if ($(".ks-input-page").length > 0) {
			alert('只能创建一个表单页面');
			return;
		}
		
		var data = '{"input_page":1}';
		$('<div class="ks-screen ks-screen-p ks-input-page">\
				<div style="position:absolute;top:45%;text-align:center;width:100%;color:#999;">表单页</div>\
				<input name="p[]" type="hidden" value=\''+data+'\' />\
				<div class="mask"></div>\
				<div class="op">\
					<div class="delete">删除</div>\
				</div>\
			</div>\
		').insertBefore($("#ks_create_screen"));
	});
	*/
	
	//增加图层
	$(".js_add_layer").on('click', function () {
		var id = genid();
		var key = $(".create_page_input_box .image-layer").length - 1;
		var data = {'id': id, 'key': key};
		var render = getLayerInputTpl(data);
		$(".create_page_input_box").append(render);
		bind_upload(id, key);
	});
	
	//关闭创建页面
	$(".create_page_closed").on('click', function () {
		create_page_box_hide();
	});
	
	//显示修改、删除按钮
	Event.delegate(document,'mouseenter','.ks-screen-p', function (e) {
		$(".mask", $(e.currentTarget)).show();
		$(".op", $(e.currentTarget)).show();
	});
	//隐藏修改、删除按钮
	Event.delegate(document,'mouseleave','.ks-screen-p', function (e) {
		$(".mask", $(e.currentTarget)).hide();
		$(".op", $(e.currentTarget)).hide();
	});
	//修改页面
	Event.delegate(document,'click','.op .modify', function (e) {
		var ks_screen_p = $(e.currentTarget).parent().parent();
		
		var numberPage = DOM.index("#screens .ks-screen", ks_screen_p);
		$(".num_page").text('N' + ++numberPage);
		
		var data = JSON.parse($('input', ks_screen_p).val());
		data.modify_screen = ks_screen_p;
		create_page_box_show();
		tmpPageData = data;
		tmpPG.setData(tmpPageData).render();
		
		//渲染背景表单
		var id = genid();
		var render = getBackgroundInputTpl({'id': id, 'bgimage_url': tmpPageData.bgimage_url, 'bgimage_isShow': tmpPageData.bgimage_isShow});
		$(".create_page_input_box").append(render);
		bind_upload(id);
		
		//渲染图层表单
		for (var key in tmpPageData.layers) {
			var id = genid();
			var key = $(".create_page_input_box .image-layer").length - 1;
			var data = tmpPageData.layers[key];
			data.id = id;
			data.key = key;
			var render = getLayerInputTpl(data);
			$(".create_page_input_box").append(render);
			bind_upload(id, key);
		}
	});
	//删除页面
	Event.delegate(document,'click','.op .delete', function (e) {
		var ks_screen_p = $(e.currentTarget).parent().parent();
		ks_screen_p.remove();
	});
	// 展开图层选项卡
    Event.delegate(document,'click','.switch_btn', function (e) {
		$(e.currentTarget).parent(2).all('.image-layer-set').toggle();
	});
	//不显示背景图片
	Event.delegate(document,'click','.bgimage_checkbox', function (e) {
		var self = $(e.currentTarget);
		if (S.isUndefined(self.attr('checked'))) {
			tmpPageData.bgimage_isShow = false;
			tmpPG.setData(tmpPageData).render();
		} else {
			tmpPageData.bgimage_isShow = true;
			tmpPG.setData(tmpPageData).render();
		}
	});
	//不显示图层
	Event.delegate(document,'click','.layer_checkbox', function (e) {
		var self = $(e.currentTarget);
		var key = $(e.currentTarget).attr('data-key');
		if (S.isUndefined(self.attr('checked'))) {
			if (S.isUndefined(tmpPageData.layers[key])) {
				tmpPageData.layers[key] = {};
			}
			tmpPageData.layers[key].isShow = false;
			tmpPG.setData(tmpPageData).render();
		} else {
			tmpPageData.layers[key].isShow = true;
			tmpPG.setData(tmpPageData).render();
		}
	});
    //布局
	Event.delegate(document,'click','.position', function (e) {
		var self = $(e.currentTarget);
		var key = $(e.currentTarget).attr('data-key');
		if (S.isUndefined(tmpPageData.layers[key])) {
			tmpPageData.layers[key] = {};
		}
		tmpPageData.layers[key].position = self.val();
		tmpPG.setData(tmpPageData).render();
	});
    //视频
    Event.delegate(document,'focusout','.video_url,.video_width,.video_height', function (e) {
		var self = $(e.currentTarget);
		var key = $(e.currentTarget).attr('data-key');
		if (S.isUndefined(tmpPageData.layers[key])) {
			tmpPageData.layers[key] = {};
		}
		
		var parent = self.parent(2);
		var image_layer = self.parent('.image-layer');
		var video_url = parent.all('.video_url').val();
		if (!video_url) {
			delete tmpPageData.layers[key].video_url;
			delete tmpPageData.layers[key].video_width;
			delete tmpPageData.layers[key].video_height;
			tmpPG.setData(tmpPageData).render();
			
			// 标识下图片图层
			image_layer.all('img').show();
			image_layer.all('.ke-inline-block').show();
			image_layer.all('small').show();
			image_layer.all('.span-video').remove();
			return ;
		}
		
		//清空图片信息
		delete tmpPageData.layers[key].url;
		delete tmpPageData.layers[key].width;
		delete tmpPageData.layers[key].height;
		
		//添加视频信息
		tmpPageData.layers[key].video_url = video_url;
		tmpPageData.layers[key].video_width = parent.all('.video_width').val();
		tmpPageData.layers[key].video_height = parent.all('.video_height').val();
		
		//标识下视频图层
		if (image_layer.all('.span-video').length <= 0) {
			image_layer.all('img').hide().attr('src', '');
			image_layer.all('.ke-inline-block').hide();
			image_layer.all('small').hide();
			$('<span class="span-video">视频</span>').insertBefore(image_layer.all('img'));
		}
		
		tmpPG.setData(tmpPageData).render();
	});
    //动作
    Event.delegate(document,'click','.action', function (e) {
		var self = $(e.currentTarget);
		var key = $(e.currentTarget).attr('data-key');
		if (S.isUndefined(tmpPageData.layers[key])) {
			tmpPageData.layers[key] = {};
		}
		tmpPageData.layers[key].action = self.val();
		tmpPG.setData(tmpPageData).render();
	});
    //链接
    Event.delegate(document,'focusout','.link', function (e) {
		var self = $(e.currentTarget);
		var key = $(e.currentTarget).attr('data-key');
		if (S.isUndefined(tmpPageData.layers[key])) {
			tmpPageData.layers[key] = {};
		}
		tmpPageData.layers[key].link = self.val();
		tmpPG.setData(tmpPageData).render();
	});
    //使用表单
    Event.delegate(document,'click','.input_btn', function (e) {
		var self = $(e.currentTarget);
		var key = $(e.currentTarget).attr('data-key');
		if (S.isUndefined(tmpPageData.layers[key])) {
			tmpPageData.layers[key] = {};
		}
		
		if (self.attr('checked')) {
			tmpPageData.layers[key].input_btn = 'yes';
		} else {
			tmpPageData.layers[key].input_btn = 0;
		}
		
		tmpPG.setData(tmpPageData).render();
	});
    
	/** 提交单页面 **/
	$(".create_page_submit").on('click', function () {
		var data = tmpPG.getData();
		if (S.isEmptyObject(data)) {
			alert('请先设置页面内容!');
			return false;
		}
		
		//修改的页面
		var modify_screen = {};
		if (!S.isUndefined(data.modify_screen) && !S.isEmptyObject(data.modify_screen)) {
			modify_screen = data.modify_screen;
			delete data.modify_screen;
		}
		
		new IO({
			type: "post"
			, url: VG.conf.root_domain + '/?c=Admin_Activity_SetPage&a=GetPreviewPage'
			, data: {'pageData': JSON.stringify(data)}
			, success: function (data) {
				if (data.ok) { //ok
					var preview_page_html = data.msg;
					if (!S.isEmptyObject(modify_screen)) { //修改
						modify_screen.replaceWith(preview_page_html);
					} else { //创建
						$(preview_page_html).insertBefore($("#ks_create_screen"));
					}
					
					closed_create_page();
				} else {
					alert('操作失败，原因：'+data.msg);
				}
				return false;
			}
			, error: function (NULL, textStatus) {
				alert("请求服务器失败，原因:"+textStatus);
			}
			, dataType: "json"
		});
	});
    
	/** 保存 **/
	var save_submit_status = false;
    function save_submit_active() {
    	save_submit_status = true;
    	$("#save_submit").addClass('active').all('i').show();
    }
    function save_submit_default() {
    	save_submit_status = false;
    	$("#save_submit").removeClass('active').all('i').hide();
    }
    $("#save_submit").on('click', function () {
    	if (save_submit_status) {
    		return false;
    	}
    	save_submit_active();
    	
    	var pageData = IO.serialize("#activity_form");
    	
    	new IO({
			type: "post"
			, url: VG.conf.root_domain + '/?c=Admin_Activity_SetPage&a=ReqUpCutScreen'
			, data: pageData
			, success: function (data) {
				if (data.ok) { //ok
					alert('保存成功');
					window.location.reload();
				} else {
					alert('操作失败，原因：'+data.msg);
					save_submit_default();
				}
				return false;
			}
			, error: function (NULL, textStatus) {
				alert("请求服务器失败，原因:"+textStatus);
				save_submit_default();
			}
			, dataType: "json"
		});
    });
	
	function closed_create_page() {
		create_page_box_hide();
	}
	// 显示创建页面
	function create_page_box_show() {
		$('.create_page_box').show().attr('data-status', 'show');
		$(".create_page_input_box").empty();
		tmpPageData = {'layers': {}};
		tmpPG.setData(tmpPageData).render();
		
		$(window).animate({
            scrollTop:$(".create_page_box").offset().top
        }, 0.3, "easeOut");
	}
	// 隐藏创建页面
	function create_page_box_hide() {
		$(".create_page_box").hide().attr('data-status', 'hide');
		$(".create_page_input_box").empty();
		tmpPageData = {'layers': {}};
		tmpPG.setData(tmpPageData).render();
	}
	
	// 获取背景表单模板 ！！！data中必须要有的字段 id
	function getBackgroundInputTpl(data) {
		var tpl = $("#background_input_tpl").val();
		var render = new XTemplate(tpl).render(data);
		return render;
	}
	
	// 获取图层表单模板 ！！！data中必须要有的字段 id、key
	function getLayerInputTpl(data) {
		var tpl = $("#layer_input_tpl").val();
		var render = new XTemplate(tpl).render(data);
		return render;
	}
	
	// 生成唯一串
	function genid() {
		return Math.floor(2147483648 * Math.random()).toString(36);
	}
    
	/**
	 * 绑定上传按钮
	 * @param string id 选择器唯一标示
	 * @param int key 图片的key（第几个图层）
	 */
	function bind_upload(id, key) {
		var image_checkbox_selector = '.image_'+id+'_checkbox',
			image_imgtag_selector = '.image_'+id+'_imgtag',
			upload_btn_selector = '.image_'+id+'_upload';
		
		var uploadbutton = K.uploadbutton({
			button : K(upload_btn_selector)[0],
			fieldName : 'imgFile',
			url : VG.conf.root_domain + '/?c=kindeditor&a=updateJson&dir=image&size=1',
			afterUpload : function(data) {
				if (data.error === 0) {
					$(image_imgtag_selector).attr('src', data.url);
					$(image_checkbox_selector).attr('checked', true);
					
					if ($(image_checkbox_selector).attr('data-type') == 'bgimage') {
						tmpPageData.bgimage_url = data.url;
					} else {
						if (S.isUndefined(tmpPageData.layers[key])) {
							tmpPageData.layers[key] = {};
						}
						tmpPageData.layers[key].url = data.url;
						tmpPageData.layers[key].width = data.width;
						tmpPageData.layers[key].height = data.height;
					}
					tmpPG.setData(tmpPageData).render();
				} else {
					alert(data.message);
				}
			},
			afterError : function(str) {
				alert('自定义错误信息: ' + str);
			}
		});
		uploadbutton.fileBox.change(function(e) {
			uploadbutton.submit();
		});
	}
	
	/*拖拽产品*/
	var DraggableDelegate = DD.DraggableDelegate, //拖拽
        DroppableDelegate = DD.DroppableDelegate; //放置
	
   	//拖拽节点
	var dragDelegate = new DraggableDelegate({
		container:"#screens .panel-body",
		move: true,
		selector:'.ks-screen-p',
		plugins: [
			new Proxy({
				moveOnEnd: false,
				destroyOnEnd: true
			}), 
			new Scroll()
		]
	});
        
	//放置节点
	var dropDelegate = new DroppableDelegate({
        container:"#screens .panel-body",
        selector:'.ks-screen-p'
    });
	
    //在droppable实例上移动时触发
    dragDelegate.on("dragover", function (ev) {
    	var drag = ev.drag;
        var drop = ev.drop;
        var dragNode = drag.get("dragNode"),
            dropNode = drop.get("node");
        
		//横轴中线位置
		var middleDropX = (dropNode.offset().left * 2 + dropNode.width()) / 2;
		//当前鼠标位置
		if (ev.pageX > middleDropX) {
			var next = dropNode.next();
			if (next && next[0] == dragNode[0]) {
			} else {
				dragNode.insertAfter(dropNode);
			}
		} else {
			var prev = dropNode.prev();
			if (prev && prev[0] == dragNode[0]) {
			} else {
				dragNode.insertBefore(dropNode);
			}
		}
    });
});

</script>

<!-- 背景表单模板 -->
<textarea id="background_input_tpl" style="display:none;">
	<div class="image-layer">
		<div class="form-group" style="margin-bottom:0px;">
			<input class="image_{{id}}_checkbox bgimage_checkbox" type="checkbox" data-type="bgimage" {{#if isShow!==false}}checked{{/if}} >
			<img class="image_{{id}}_imgtag" src="{{bgimage_url}}" style="width:30px;height:20px;background-color:#ccc;">
			<input class="image_{{id}}_upload" type="button" value="选择背景图片" />
			<small class="text-danger">JPG、PNG，640*1140，小于100k</small>
		</div>
	</div>
</textarea>

<!-- 图层表单模板 -->
<textarea id="layer_input_tpl" style="display:none;">
<div class="image-layer">
	<div class="form-group" style="margin-bottom:0px;">
		<input class="image_{{id}}_checkbox layer_checkbox" type="checkbox" data-type="layer" data-key="{{key}}" {{#if isShow!==false}}checked{{/if}} >
		{{#if video_url}}
		<span class="span-video">视频</span>
		{{/if}}
		<img class="image_{{id}}_imgtag" src="{{url}}" style="width:30px;height:20px;background-color:#ccc;{{#if video_url}}display:none;{{/if}}">
		<input class="image_{{id}}_upload" type="button" value="选择图片" />
		<small class="text-danger" {{#if video_url}}style="display:none;"{{/if}}>仅支持PNG透明图片，小于30k</small>
		<a class="switch_btn" href="javascript:;">设置</a>
	</div>
	<div class="image-layer-set">
		<div class="form-group"><label class="control-label rowlabel">或填写视频地址：</label>
		<div class="form-inline">
			<div class="form-group">
				<input class="video_url form-control" type="text" style="width:200px;" data-key="{{key}}" value="{{video_url}}" placeholder="填写视频flash地址">
			</div>
			<div class="form-group">
				<input class="video_width form-control" type="text" style="width:57px;" data-key="{{key}}" value="{{#if video_width}}{{video_width}}{{else}}300{{/if}}" placeholder="宽(px)">
			</div>
			<div class="form-group">
				<input class="video_height form-control" type="text" style="width:57px;" data-key="{{key}}" value="{{#if video_height}}{{video_height}}{{else}}250{{/if}}" placeholder="高(px)">
			</div>
		</div>
		</div>
		<div class="form-group">
			<label class="control-label rowlabel">布局：</label>
			<div class="ks-layer-box">
				<label for="layer_center_{{id}}"><div class="ks-layer ks-layer-center"><div></div></div></label>
				<label for="layer_up_{{id}}"><div class="ks-layer ks-layer-up"><div></div></div></label>
				<label for="layer_down_{{id}}"><div class="ks-layer ks-layer-down"><div></div></div></label>
				<label for="layer_leftup_{{id}}"><div class="ks-layer ks-layer-leftup"><div></div></div></label>
				<label for="layer_leftdown_{{id}}"><div class="ks-layer ks-layer-leftdown"><div></div></div></label>
				<label for="layer_rightup_{{id}}"><div class="ks-layer ks-layer-rightup"><div></div></div></label>
				<label for="layer_rightbottom_{{id}}"><div class="ks-layer ks-layer-rightdown"><div></div></div></label>
			</div>
			<div class="ks-layer-radio clear">
				<label class="radio-inline">
					<input class="position" name="position_{{key}}" type="radio" id="layer_center_{{id}}" value="center" data-key="{{key}}" {{#if position==='center'}}checked{{/if}} > 居中
				</label>
				<label class="radio-inline">
					<input class="position" name="position_{{key}}" type="radio" id="layer_up_{{id}}" value="up" data-key="{{key}}" {{#if position==='up'}}checked{{/if}} > 居上
				</label>
				<label class="radio-inline">
					<input class="position" name="position_{{key}}" type="radio" id="layer_down_{{id}}" value="down" data-key="{{key}}" {{#if position==='down'}}checked{{/if}} > 居下
				</label>
				<label class="radio-inline">
					<input class="position" name="position_{{key}}" type="radio" id="layer_leftup_{{id}}" value="leftup" data-key="{{key}}" {{#if position==='leftup'}}checked{{/if}} > 左上
				</label>
				<label class="radio-inline">
					<input class="position" name="position_{{key}}" type="radio" id="layer_leftdown_{{id}}" value="leftdown" data-key="{{key}}" {{#if position==='leftdown'}}checked{{/if}} > 左下
				</label>
				<label class="radio-inline">
					<input class="position" name="position_{{key}}" type="radio" id="layer_rightup_{{id}}" value="rightup" data-key="{{key}}" {{#if position==='rightup'}}checked{{/if}} > 右上
				</label>
				<label class="radio-inline">
					<input class="position" name="position_{{key}}" type="radio" id="layer_rightbottom_{{id}}" value="rightdown" data-key="{{key}}" {{#if position==='rightdown'}}checked{{/if}} > 右下
				</label>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label rowlabel">动作：</label>
			<div class="ks-action-radio clear" style="font-size:9px;">
				<label class="radio-inline">
					<div>•</div>
					<input name="action_{{key}}" class="action" type="radio" value="rest" data-key="{{key}}" {{#if action==='rest'}}checked{{/if}} > 静止
				</label>
				<label class="radio-inline">
					<div>←</div>
					<input name="action_{{key}}" class="action" type="radio" value="left" data-key="{{key}}" {{#if action==='left'}}checked{{/if}} > 水平移动
				</label>
				<label class="radio-inline">
					<div>↑</div>
					<input name="action_{{key}}" class="action" type="radio" value="up" data-key="{{key}}" {{#if action==='up'}}checked{{/if}} > 纵向移动
				</label>
			</div>
		</div>
		<div class="form-group">
			<div class="row">
				<div class="col-md-6">
					<label class="control-label rowlabel">使用图片链接：</label>
					<input class="link form-control" type="text" style="width:300px;" data-key="{{key}}" value="{{link}}">
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="checkbox">
				<label class="control-label rowlabel">使用表单浮层（使用互动设置中的表单）<input class="input_btn" type="checkbox" data-key="{{key}}" value="yes" {{#if input_btn==='yes'}}checked{{/if}}></label>
			</div>
		</div>
	</div>
</div>
</textarea>

<{include file="./admin/activity/common_right.html"}>
<div style="clear:both;"></div>
</div>

<{include file="./admin/bottom.html"}>