一、引用

<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;                    }                }            }        ]    });};

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

AloneJs.albumBox() —— 相册对话框的更多相关文章

  1. AloneJs —— 简洁高效的JavaScript UI库

    以前做项目时用了一些第三方的JS UI库,项目比较low的时候用还行,一旦项目要求比较高,特别是交互比较复杂时,某些第三方UI库就显得无能为力,用起来也不顺手,改也不好改,所以我就自己基于jQuery ...

  2. 转:绝对干货--WordPress自定义查询wp_query所有参数详细注释

    <?php /** * WordPress 查询综合参考 * 编译:luetkemj - luetkemj.com * * 官方文档: http://codex.wordpress.org/Cl ...

  3. WordPress自定义查询WP_Query使用方法大全

    自定义调用文章在网站建设中很常用,wordpress也很人性化,用新建查询new WP_Query就能实现相关功能.WP_Query怎么用呢?随ytkah一起来看看吧 我们知道wordpress的主循 ...

  4. 转载:Android调用相册、拍照实现缩放、切割图片

    好几天没有写博客了,感觉都有点懈怠了.笔者参加了大学生第二届软件设计大赛,这几天 一直在弄大赛的事情,没有花些时间来整理博客.好在经过一些时日比赛的东西也弄得差不多了, 接下来就是将这段时间学习里面有 ...

  5. 56相册视频(土豆相册视频 激动相册视频 QQ动感影集等)——下载教程

    由于目前流行的相册视频或影集大多是由Flash.音乐和图片组合而成的动画,不属于完整视频,所以不能用常规的解析方法下载. 鉴于很多朋友希望可以下载自己精心制作的相册,故在本教程中,我们将以图文并茂的方 ...

  6. Android 拍照或者从相册获取图片的实现

    我们常常会用到上传头像,或者发帖子的时候选择本地图片上传的功能.这个很常见 今天因为app的需求我研究了下.现在分享下. 其实不论是通过拍照还是从相册选取都会用到Intent 这是系统提供给我们用来调 ...

  7. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  8. Web---自己写的一个简单云相册~

    实现的功能是: 用户可以一次上传一个至多个文件. 用户可以下载其他人上传的图片. 用户可以查看其他所有人的图片. 用户只能删除通过自己IP上传的图片. 用到的技术: 文件上传下载.设计模式.Dom4j ...

  9. Bmob云IM实现头像更换并存入Bmob云数据库中(1.拍照替换,2.相册选择)

    看图效果如下: 1.个人资料界面 2.点击头像弹出对话框 3.点击拍照 4.切割图片,选择合适的部分 5.点击保存,头像替换完毕,下面看从相册中选择图片. 6.点击相册 7.任选一张图片 8.切割图片 ...

随机推荐

  1. 多线程调用WebClient速度变慢的问题

    设置 System.Net.ServicePoint 对象所允许的最大并发连接数 System.Net.ServicePoint 对象允许的最大并发连接数.默认值为 2 System.Net.Serv ...

  2. mycat配置日志

    1: 1: MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' ...

  3. Linux/Ubuntu sudo不用输入密码的方法

    通常我们并不以root身份登录,但是当我们执行某些命令 (command)时需要用到root权限,我们通常都是用"sudo command"来执行command.由于使用Ubunt ...

  4. 哇塞,原来自己写 Google Chrome 浏览器扩展(插件)这么容易!

    1. 首先新建一个记事本,命名为 manifest.json,这是写 Google Chrome 浏览器扩展必须的文件 { "manifest_version": 2, " ...

  5. WPF小记——DockPanel使用不当引起界面显示问题

    使用以下代码,当TextBlock文本过长,引起Button的显示位置在可见区域以外: <Window x:Class="WpfApplication11.MainWindow&quo ...

  6. 快乐的JS正则表达式(二)

    在上一篇中介绍了一个test方法,在本文中将使用另外一个,exec方法可以找到匹配的结果并且返回结果以及位置.exec("正则"): 简单测试: var str = "{ ...

  7. Spring中加载ApplicationContext.xml文件的方式

    Spring中加载ApplicationContext.xml文件的方式 原文:http://blog.csdn.net/snowjlz/article/details/8158560 1.利用Cla ...

  8. 左倾堆(一)之 图文解析 和 C语言的实现

    概要 本章介绍左倾堆,它和二叉堆一样,都是堆结构中的一员.和以往一样,本文会先对左倾堆的理论知识进行简单介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现:实现的语言虽不同,但是原理 ...

  9. 【转载】Debian 6安装小记

    转载自:http://unix-cd.com/vc/www/22/2011-06/18022.html 今天终于装上了 debian6,代号叫squeeze是吧?前几天的时候在Microhu’s Bl ...

  10. Tools - Windows

    1)文本操作 Ctrl + C / Ctrl + V / Ctrl + X / Ctrl + Z / Ctrl + A:复制/粘贴/剪贴/撤销/全选. 2)窗口左右分屏 Win + 方向键:上(最大化 ...