292 lines
7.4 KiB
HTML
292 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>미디어삽입 미리보기 -kimsQ Rb 2.0</title>
|
|
|
|
<style type="text/css">
|
|
.hide {display:none;}
|
|
.container {padding-top:15px;margin-bottom:15px;}
|
|
.preview-box {float:left;width:100px;height:70px;margin:0 11px 20px 0;border:#dfdfdf solid 5px;cursor:pointer;}
|
|
.preview-box div {text-align:center;font-size:12px;font-weight:bold;color:#666;padding-top:20px;}
|
|
.preview-box div span {display:block;font-size:11px;font-weight:normal;font-family:dotum;padding-top:5px;color:#888;}
|
|
.active {border:#428BCA solid 5px;}
|
|
</style>
|
|
|
|
<script>
|
|
var select_tpl = '__tpl__1000';
|
|
function tplcheck(num,obj)
|
|
{
|
|
select_tpl = '__tpl__' + num;
|
|
|
|
var rbody = document.getElementById('rb-body');
|
|
var x = rbody.children[0];
|
|
var n = rbody.children[0].children.length;
|
|
var i;
|
|
|
|
for (i = 0; i < n; i++)
|
|
{
|
|
if (x.children[i].className != 'hide')
|
|
{
|
|
x.children[i].style.border = '#dfdfdf solid 5px';
|
|
}
|
|
}
|
|
|
|
obj.style.border = '#428BCA solid 5px';
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
|
|
|
|
<body id="rb-body">
|
|
|
|
<div class="container">
|
|
|
|
|
|
<!-- 전체비디오-->
|
|
<div class="preview-box" onclick="tplcheck('all',this);">
|
|
<div>전체비디오<span>일열출력</span></div>
|
|
</div>
|
|
<div id="__tpl__all" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 1개(1000)-->
|
|
<div class="preview-box active" onclick="tplcheck('1000',this);">
|
|
<div>1개</div>
|
|
</div>
|
|
<div id="__tpl__1000" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-0]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 2개(2000)-->
|
|
<div class="preview-box" onclick="tplcheck('2000',this);">
|
|
<div>2개<span>(2열)</span></div>
|
|
</div>
|
|
<div id="__tpl__2000" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-0]</div>
|
|
<div class="col-sm-12">[VOD-1]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 2개(0101)-->
|
|
<div class="preview-box" onclick="tplcheck('0101',this);">
|
|
<div>2개<span>(2행)</span></div>
|
|
</div>
|
|
<div id="__tpl__1010" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-6">[VOD-0]</div>
|
|
<div class="col-sm-6">[VOD-1]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 3개(0201)-->
|
|
<div class="preview-box" onclick="tplcheck('0201',this);">
|
|
<div>3개<span>(좌1/우2)</span></div>
|
|
</div>
|
|
<div id="__tpl__0201" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-7">[VOD-0]</div>
|
|
<div class="col-sm-5">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-0]</div>
|
|
<div class="col-sm-12">[VOD-1]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 3개(2010)-->
|
|
<div class="preview-box" onclick="tplcheck('2010',this);">
|
|
<div>3개<span>(상2/하1)</span></div>
|
|
</div>
|
|
<div id="__tpl__2010" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-0]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">[VOD-1]</div>
|
|
<div class="col-sm-6">[VOD-2]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 4개(1030)-->
|
|
<div class="preview-box" onclick="tplcheck('1030',this);">
|
|
<div>4개<span>(상1/하3)</span></div>
|
|
</div>
|
|
<div id="__tpl__1030" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-0]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4">[VOD-1]</div>
|
|
<div class="col-sm-4">[VOD-2]</div>
|
|
<div class="col-sm-4">[VOD-3]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 4개(0301)-->
|
|
<div class="preview-box" onclick="tplcheck('0301',this);">
|
|
<div>4개<span>(좌1/우3)</span></div>
|
|
</div>
|
|
<div id="__tpl__0301" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-6">[VOD-0]</div>
|
|
<div class="col-sm-6">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-1]</div>
|
|
<div class="col-sm-12">[VOD-2]</div>
|
|
<div class="col-sm-12">[VOD-3]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 4개(1111)-->
|
|
<div class="preview-box" onclick="tplcheck('1111',this);">
|
|
<div>4개<span>(좌2/우2)</span></div>
|
|
</div>
|
|
<div id="__tpl__1111" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-6">[VOD-0]</div>
|
|
<div class="col-sm-6">[VOD-1]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">[VOD-2]</div>
|
|
<div class="col-sm-6">[VOD-3]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 4개(121)-->
|
|
<div class="preview-box" onclick="tplcheck('121',this);">
|
|
<div>4개<span>(상1/중2/하1)</span></div>
|
|
</div>
|
|
<div id="__tpl__121" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-0]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">[VOD-1]</div>
|
|
<div class="col-sm-6">[VOD-2]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-3]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 5개(23)-->
|
|
<div class="preview-box" onclick="tplcheck('23',this);">
|
|
<div>5개<span>(상2/하3)</span></div>
|
|
</div>
|
|
<div id="__tpl__23" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-6">[VOD-0]</div>
|
|
<div class="col-sm-6">[VOD-1]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4">[VOD-2]</div>
|
|
<div class="col-sm-4">[VOD-3]</div>
|
|
<div class="col-sm-4">[VOD-4]</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 5개(0302)-->
|
|
<div class="preview-box" onclick="tplcheck('0302',this);">
|
|
<div>5개<span>(좌2/우3)</span></div>
|
|
</div>
|
|
<div id="__tpl__0302" class="hide">
|
|
<div class="rb-insert-media">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-0]</div>
|
|
<div class="col-sm-12">[VOD-1]</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="row">
|
|
<div class="col-sm-12">[VOD-2]</div>
|
|
<div class="col-sm-12">[VOD-3]</div>
|
|
<div class="col-sm-12">[VOD-4]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rb-caption">[CAPTION-0]</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|