拓展模块,即extend/layer.ext.js所包含的功能块,它完全依赖于layer核心代码,当你需要使用它时,你有两种方式选择。第一种是直接script引入layer.ext.js,第二种是通过layer.use('extend/layer.ext.js')载入。下面主要针对其中功能较为复杂的模块做介绍。
方法:layer.photos(options)、layer.photosPage(options)
不妨先小试牛刀
该方法是图片相册模块的核心接口,它有两种模式选择,一种是获取图片的json数据,一种是直接获取页面指定区域的图片。其中参数options是一个对象。它允许配置参数如下:
{ html: '' //自定义的html,显示在层右侧 tab: function(obj){}, //图片切换操作的回调,obj返回了图片pid和name json: { //您服务端接口需严格按照下述格式返回 "status": 1, //请求的状态,1表示成功,其它表示失败 "msg": "", //状态提示语 "title": "", //相册标题 "id": number型, //相册id "start": 0, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "name": "", //图片名 "pid": number型, //图片id "src": "", //原图地址 "thumb": "", //缩略图地址 "area": [638, 851] //原图宽高 } ] }, page: { //直接获取页面指定区域的图片,他与上述异步不可共存,只能择用其一。 parent: '' //图片的父元素选择器,如'#imsbox', start: 0, //初始显示的图片序号,默认0 title: '' //相册标题 } }
<div id="seephotos">点击查看相册</div> <script> $('#seephotos').on('click', function(){ $.getJSON('test/photos.json', {}, function(json){ layer.photos({ html: '这里传入自定义的html,也可以不传', json: json }); }); }); </script>点击查看相册
该方法实际上是对layer.photos的二次封装,它自带事件,可更方便地通过获取页面指定区域的图片从而展现相册。同样地。options是一个对象,可配置参数如下:
<div id="imgs" class="imgs">
<img src="缩略图" layer-img="大图地址" alt="图片名">
<img src="缩略图" layer-img="大图地址" alt="图片名">
<img src="缩略图" layer-img="大图地址" alt="图片名">
<img src="缩略图" layer-img="大图地址" alt="图片名">
</div>
<script>
//点击图片即可触发
layer.photosPage({
parent: '#extimgs',
title: '直接获取页面元素包含的所有图片',
id: 112 //相册id,可选
});
</script>