layer组件拓展模块

拓展模块，即extend/layer.ext.js所包含的功能块，它完全依赖于layer核心代码，当你需要使用它时，你有两种方式选择。第一种是直接script引入layer.ext.js，第二种是通过layer.use('extend/layer.ext.js')载入。下面主要针对其中功能较为复杂的模块做介绍。

一、图片相册层

方法：layer.photos(options)、layer.photosPage(options)

不妨先小试牛刀

1、layer.photos(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>
点击查看相册

2、layer.photosPage(options)

该方法实际上是对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>