<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>故障详情</title>
|
<link rel="stylesheet" type="text/css" href="../pages/css/base.css">
|
<link rel="stylesheet" type="text/css" href="../jqueryui/jquery-ui.css">
|
<link rel="stylesheet" type="text/css" href="../src/css/layui.css">
|
<link rel="stylesheet" type="text/css" href="../pages/css/mylayui.css">
|
<style type="text/css">
|
#imgCarousel .carousel-item div {
|
text-align: center;
|
}
|
#imgCarousel img {
|
width: auto;
|
height: 100%;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="layui-page-container mrl8 mrr8">
|
<fieldset class="layui-elem-field">
|
<legend>问题描述</legend>
|
<div class="layui-field-box" id="detailsText">
|
|
</div>
|
</fieldset>
|
|
<div class="layui-carousel" id="imgCarousel" lay-filter="imgCarousel">
|
<div carousel-item="" class="carousel-item">
|
<div>条目1</div>
|
<div>条目2</div>
|
<div>条目3</div>
|
<div>条目4</div>
|
<div>条目5</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
|
<script type="text/javascript" src="../js/base.js"></script>
|
<script type="text/javascript" src="../jqueryui/jquery-ui.min.js"></script>
|
<script type="text/javascript" src="../src/layui.js"></script>
|
<script type="text/javascript" src="../pages/js/mylayui.js"></script>
|
<script type="text/html" id="detailImgs">
|
<div carousel-item="" class="carousel-item">
|
{{# layui.each(d.imgs, function(index, item){ }}
|
<div><img src="Deverror_recordAction!serchByInfo?json={num:{{ d.num }},note:{{ item }} }"></div>
|
{{# }); }}
|
</div>
|
</script>
|
<script type="text/javascript">
|
layui.use(['laytpl', 'carousel'], function() {
|
var carousel = layui.carousel;
|
var laytpl = layui.laytpl;
|
|
// 图片轮转配置项
|
var options = {
|
elem: '#imgCarousel',
|
arrow: 'always',
|
width: '100%',
|
height: '500px'
|
};
|
|
//常规轮播
|
var detailsImgs = carousel.render(options);
|
var detailImgsTpl = $('#detailImgs').html();
|
var imgs = parent.$('#detailImgs').data('data');
|
$('#detailsText').text(imgs.des);
|
// 添加模板
|
laytpl(detailImgsTpl).render(imgs, function(html) {
|
$('#imgCarousel').html(html);
|
detailsImgs.reload(options);
|
});
|
|
// 切换事件
|
carousel.on('change(imgCarousel)', function(obj) {
|
//console.info(obj);
|
});
|
});
|
</script>
|
</body>
|
</html>
|
