AloneJs.albumBox() —— 相册对话框

时间:2021-01-31 13:21:36

一、引用

<link href="https://cdn.suziyun.com/alonejs.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.suziyun.com/alonejs.min.js"></script>

二、调用示例

AloneJs.albumBox(function (images) {    // todo});

三、函数原型

AloneJs.albumBox = function (fnOK) {    iBox.show({        title: "选择图片",        width: 705,        height: 425,        modal: true,        content: function (e) {            var $el = e.$scope; //获取对话框的jQuery对象            AloneJs($el).showLoader(); //显示加载进度条            $.ajax({                url: '/product/album.html',                type: 'GET',                data: {                    m: false                },                success: function (data) {                    if (data) {                        $el.html(data); //将异步请求的html内容显示在对话框中                        e.window.adjustPosition(); //重新调整对话框的位置                    }                    AloneJs($el).closeLoader(); //关闭进度条                }            });        },        buttons: [            {                text: "取消"            },            {                text: "确定",                focus: true,                fn: function (e) {                    var $win = e.$scope,                        images = []; //定义数组记录选中的图片地址                    //获取选中的图片                    $win.find('.sl-album-photolist .photo-item-mask').each(function () {                        var image = $(this).parent().attr("data-image");                        if (image && image.length > 0) {                            images.push(image);                        }                    });                    if (images.length > 0) {                        //执行回调函数,并将选中的图片数组作为参数传入回调函数                        if ($.type(fnOK) == "function") {                            fnOK(images);                        }                    } else {                        iBox.msgbox("请选择一张图片!", { autoClose: 1200, modal: true });                        return false;                    }                }            }        ]    });};

AloneJs.albumBox() —— 相册对话框

其中,异步请求“/product/album.html”页面的内容即为下图内容:

AloneJs.albumBox() —— 相册对话框