<!--_meta 作为公共模版分离出去-->
{include file="admin/_meta"}
<style>
/*img container class*/
.row{
width:98%;
margin: 0 auto;
}
.row > .img-block{
float:left;
width:20%;
margin: 0 auto 15px auto;
}
.row > .img-block > .thumbnail{
padding:10px 0;
width:92%;
height:170px;
text-align:center;
-webkit-box-shadow:0 0 10px #ddd;
-moz-box-shadow:0 0 10px #ddd;
box-shadow:0 0 10px #ddd;
border:1px solid #fff;
border-top-width: 2px;
border-bottom-width: 2px;
}
.row > .img-block > .thumbnail > img{
max-width:100%;
max-height:100px;
margin:0 auto;
border-radius: 3px;
}
.row > .img-block > .img-oprator-layer{
max-width:100%;
height:40px;
position: absolute;
margin-left: 10px;
margin-top: 135px ;
z-index:2;
}
.row > .img-block > .img-oprator-layer a{
text-decoration: none;
}
.img-hover > .thumbnail{
-webkit-box-shadow:0 0 10px #a1a3a6!important;
-moz-box-shadow:0 0 10px #a1a3a6!important;
box-shadow:0 0 10px #a1a3a6!important;
}
.img-checked{
border-color:#1879FF!important;
}
.ml100{margin-left:100px;}
</style>
<title>图片列表</title>
</head>
<body>
<div class="wap-container">
<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
首页
<span class="c-gray en">/</span>
图片管理
<span class="c-gray en">/</span>
图片列表
<a class="btn btn-success f-r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a>
</nav>
<article class="Hui-admin-content clearfix">
<div class="panel">
<div class="panel-body">
<div class="text-c"> 日期范围：
<input type="text" id="search-datetime-start" class="input-text datetimepicker-input" style="width:120px;">
-
<input type="text" id="search-datetime-end" class="input-text datetimepicker-input" style="width:120px;">
<input type="text" name="" id="" placeholder=" 图片名称" style="width:250px" class="input-text">
<button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 搜图片</button>
</div>
</div>
</div>
<div class="panel mt-20">
<div class="panel-body">
<div class="clearfix">
<span class="f-l">
<a id="btn-delete" style="margin-left: 10px;" href="javascript:;" onclick="" class="btn btn-danger "><i class="Hui-iconfont"></i> 批量删除</a>
<a href="javascript:;" onclick="image_upload('上传图片','picture_upload')" class="btn btn-primary "><i class="Hui-iconfont"></i> 添加图片</a>
</span>
<span style="margin-right: 20px;" class="r">共有数据：<strong>54</strong> 条</span>
</div>
<!-- 在这个div里添加图片 -->
<div style="margin-top: 20px;" class="mt-20 clearfix row" id="container"></div>
</div>
</div>
</article>
</div>
<!--_footer 作为公共模版分离出去-->
{include file="admin/_footer"}
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/hadmin/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/static/business/js/main.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/common.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/config.js"></script>
<script type="text/javascript">
/** 图片管理器 */
var cn = 'img-block';
var ic = 'img-checked';
var imgManger = {
//<a href="javascript:;" onclick="datadel()" class="btn btn-danger "><i class="Hui-iconfont"></i> 批量删除</a>
render: function(data){
var html = '';
for (var i=0; i<data.length; i++){
html += '<div class="img-block" id="img-block-id-'+ data[i].id+'" >'+
' <div class="img-oprator-layer"><a onclick="" ><i class="Hui-iconfont" ></i></a> <a onclick="" ><i class="Hui-iconfont" ></i></a></div>'+
' <div class="thumbnail" dataid="'+data[i].id+'">'+
' <img src="'+data[i].path+'" alt="...">'+
' <div class="caption">'+
' <h6>'+data[i].tag+'</h6>'+
' </div>'+
' </div>'+
'</div>';
};
document.getElementById("container").innerHTML = html;
},
getImgs: function(){
var ids = [];
var ckd = document.getElementsByClassName(ic);
for (var i=0; i<ckd.length; i++){
ids.push(ckd[i].attributes.dataid.value);
};
return ids;
},
init: function(){
var self = this;
var imgObjs = document.getElementsByClassName(cn);
for (var i = 0; i < imgObjs.length; i++) {
imgObjs[i].onclick = self.imgClick;
imgObjs[i].onmouseenter = self.imgHover;
imgObjs[i].onmouseleave = self.imgOut;
};
},
imgClick: function(){
var tb = this.getElementsByClassName('thumbnail')[0];
if (tb.className.indexOf(ic) == -1){
tb.className += ' '+ic;
}else{
var classes = tb.className.split(' ');
for (var i=0; i<classes.length; i++){
if (classes[i]==ic){
delete classes[i];
};
};
tb.className = classes.join(' ');
};
},
imgHover: function(){
var ih = 'img-hover';
if (this.className.indexOf(ih) == -1){
this.className += ' '+ih;
};
},
imgOut: function(){
var ih = 'img-hover';
if (this.className.indexOf(ih) > -1){
this.className = cn;
};
console.log(this.className) ;
}
};
/** 测试数据dd **/
dd = [
{
'img':'https://image7.benlailife.com/ProductImages/000/000/013/256/big/d0e76253-47ff-43f8-84f7-8b65a23b5f4e.jpg',
'tag':'新疆库尔勒',
'id':1
},
{
'img':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586589247556&di=665851d605947f88fb2931e9eb7e3e8b&imgtype=0&src=http%3A%2F%2Fwww.huaxia.com%2Ftslj%2Fflsj%2Fwh%2Fimages%2F2017%2F05%2F10%2F1597401.png',
'tag':'哈萨克斯坦',
'id':2
}
];
$(function(){
runDatetimePicker();
/* =====列表页的业务脚本可参考article-list.html 这个页面 ====== */
var imgM = imgManger;
//imgM.init()
$('#btn-delete').click(function(){
var actionType = this.id.replace("btn-","");
var ids = imgM.getImgs();
if (ids.length==0){
alert('请至少选择一个项目！');
return false;
};
//console.log(ids);
//选中的id值组
for(i = 0 ; i<ids.length ; i++){
$('#img-block-id-'+ids[i]).remove();
}
});
//这里应该有请求 , 请求数据成功之后赋值给dd参数，渲染
//imgM.render(dd);
//imgM.init();
});
/************************* 功能 **************************/
/*图片-上传管理*/
function image_upload(title,url){
var index = layer.open({
type: 2,
title: title,
content: url,
area: ['800px', '400px']
});
}
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
网友评论