wfeditor
Version:
editor create by wfQuery
261 lines (259 loc) • 8.93 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>插入视频</title>
<link rel="stylesheet" href="../../../libs/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../libs/fontawesome/4.2.0/css/font-awesome.min.css">
<script src="../../../libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
<script src="../../../libs/require.js/2.1.11/require.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.panel {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
}
#searchList {
width: 570px;
overflow: auto;
zoom: 1;
height: 270px;
}
.groupList {
width: 545px;
padding: 10px 0 10px 5px;
border-bottom: 1px solid #c8dcf0;
position: relative;
min-height: 80px;
}
.groupList .image-con {
width: 80px;
float: left;
margin-top: 8px;
}
.groupList .txt-con {
width: 400px;
float: left;
}
.groupList .opa-con {
width: 45px;
float: left;
position: absolute;
right: 0;
bottom: 5px;
}
.clear {
clear: both;
}
.groupList .txt-con p {
padding-left: 20px;
color: #888;
line-height: 18px;
}
.groupList .txt-con .des-channel {
width: 80px;
}
.groupList .txt-con .des-name, .groupList .txt-con .des-channel {
white-space: nowrap;
overflow: hidden;
display: inline-block;
zoom: 1;
text-overflow: ellipsis;
}
.groupList .txt-con .des-name {
width: 300px;
}
.groupList .txt-con p label {
color: #5FB6F4;
}
.groupList .opa-con .btn-choose {
background-color: #24ce2c;
border: 1px;
color: #fff;
height: 20px;
cursor: pointer;
}
.panel table td {
vertical-align: middle;
}
#videoSearchTxt {
background: #FFF;
width: 200px;
height: 21px;
line-height: 21px;
border: 1px solid #d7d7d7;
}
#videoSearchBtn, #videoSearchReset {
/* width: 80px;*/
height: 25px;
line-height: 25px;
background: #eee;
border: 1px solid #d7d7d7;
cursor: pointer;
padding: 0 5px;
}
.tabhead span.focus {
background: #fff;
color: #00b6aa;
font-size: 12px;
}
.tabhead span {
display: inline-block;
padding: 0 5px;
height: 30px;
border: 1px solid #00b6aa;
background: #00b6aa;
text-align: center;
line-height: 30px;
cursor: pointer;
color: #fff;
}
.loading {
border: 1px solid #c8dcf0;
text-align: center;
margin-top: 5px;
background-color: #e3eef8;
padding: 5px 0;
font-size: 14px;
}
p {
font-size: 12px;
}
.groupList .opa-con .btn-cancel {
background-color: #e10501;
border: 1px;
color: #fff;
height: 20px;
cursor: pointer;
}
/**分页样式开始*/
.page {
text-align: center;
}
.fm-pager {
line-height: 24px;
font-size: 12px;
margin-top: 16px;
}
.fm-pager a {
color: #333333;
}
.fm-pager .pagination-spec, .fm-pager .pagination-curr {
display: inline-block;
padding: 0 .8em;
margin: 0 4px;
}
.fm-pager .pagination-next, .fm-pager .pagination-prev, .fm-pager .pagination-start, .fm-pager .pagination-end {
display: inline-block;
padding: 0 .8em;
text-align: center;
border: 1px solid #cbcbcb;
}
.fm-pager .pagination-spec, .fm-pager .pagination-next, .fm-pager .pagination-prev {
cursor: pointer;
}
.fm-pager .pagination-curr, .fm-pager a:hover {
background: #2cac93;
color: #ffffff;
}
</style>
</head>
<body>
<div id="tabHeads" class="tabhead">
<span tabsrc="videoSearch" class="focus">
搜索视频
</span>
</div>
<div id="videoSearch" class="panel">
<table style="margin-top: 5px;">
<tbody>
<tr>
<td>
<input id="videoSearchTxt" type="text" placeholder="请输入关键字">
</td>
<td>
<input id="videoSearchBtn" type="button" value="检索视频">
</td>
</tr>
</tbody>
</table>
<div id="searchList" class="my-pager">
</div>
<div class="pager" data-page="my-list" id="page">
<div id="my-pager" class="fm-pager">
</div>
</div>
<script type="text/html" id="int-video" data-target="#searchList" data-method="get" data-pagination="#my-pager">
{{#if content.length}}
{{#each content}}
<div class="groupList" data-id="{{docId}}">
<div class="image-con">
<img style="visibility: visible;" src="{{titleImg}}" height="59" width="80">
</div>
<div class="txt-con">
<p>
<span class="des-channel"><label>id：</label>{{docId}}</span><span class="des-name"><label>名称：</label><a title="{{docName}}" target="_blank" href="{{pubUrl}}">{{docName}}</a></span>
</p>
<p>
<span><label>描述：</label>{{description}}</span>
</p>
</div>
<div class="opa-con">
<input type="button" class="btn-choose" value="选用">
</div>
<div class="clear">
</div>
</div>
{{/each}}
<span class="currentPage">{{ pageNo }}</span>
<span class="totalPage">{{ division totalcount 10 }}</span>
{{else}}
{{/if}}
</script>
</div>
<script type="text/javascript">
require.config({
baseUrl: "../../",
paths: {
"wf": "../node_modules/wfquery/js/wfQuery"
}
});
var searchUrl = '/xhCNS/search.htm?noDomain=true';
require(["wf", "util/template-init"], function($, T){
$('#videoSearchBtn').on("click", function() {
T.init({
tmpl: '#int-video',
sourceUrl: searchUrl,
page: {
size: 'pageSize',
to: 'pageNo'
},
sourceData: function() {
return {
keyword: encodeURIComponent($("#videoSearchTxt").val()),
retype: "json",
usefor: "admin",
typeId: 2
}
},
callback: function() {
$('.opa-con input[type=button]').click(function() {
var className = $(this).attr('class');
if (className == 'btn-choose') {
$(this).removeClass('btn-choose').addClass('btn-cancel').val('取消').parents('.groupList').addClass('vidActive');
} else {
$(this).removeClass('btn-cancel').addClass('btn-choose').val('选择').parents('.groupList').removeClass('vidActive');
}
});
}
});
});
});
</script>
</body>
</html>