一、引用

<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. asp.net添加验证码

    1.新建一个aspx页面生成验证码图像 using System; using System.Data; using System.Configuration; using System.Collec ...

  2. BZOJ 1001 [BeiJing2006] 狼抓兔子(平面图最大流)

    题目大意 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的.而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形: ...

  3. 理解RxJava:(二)Operator,Operator

    在第一部分,我讲解了RxJava的基本结构,也介绍了map()操作.然而,我能理解你仍旧不会选择使用Rxjava--你仍然还有很多东西没有学到.但是这个情况将很快得到改变.Rxjava一大部分的能力是 ...

  4. Mono.Posix.dll文件

    http://www.mono-project.com/ 安装后,可以安装目录下找到

  5. 【迁移学习】2010-A Survey on Transfer Learning

    资源:http://www.cse.ust.hk/TL/ 简介: 一个例子: 关于照片的情感分析. 源:比如你之前已经搜集了大量N种类型物品的图片进行了大量的人工标记(label),耗费了巨大的人力物 ...

  6. 前端引擎初步设计稿 -通过配置生成动态页面 ,LandaSugar平台 .NET-C#-MVC

    公司准备开发出一款项目开发平台 LandaSugar,分为 前端引擎.工作引擎.数据引擎 三大块,开发人员只需要对三大模块进行相应的配置便能够完成一个定制项目的开发. 听起来貌似是异想天开,但是是否真 ...

  7. MvvmLight框架使用入门(一)

    MvvmLight是比较流行的MVVM框架,相对较为简单易用.可能正因为简单,对应的帮助文档不多,对初学者就不够友好了.这里会用几篇随笔,就个人对MvvmLight的使用经验,来做一个入门的介绍. 第 ...

  8. 我的WCF学习与强化系列文章

    1.WCF服务创建与使用(请求应答模式) 2.WCF服务创建与使用(双工模式) 3.WCF序列化 4.WCF实现方法重载 5.WCF会话(Session)与实例(Instance)管理 后面会继续更新 ...

  9. 一起Polyfill系列:Function.prototype.bind的四个阶段

    昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...

  10. Angular系列------AngularJS入门教程:导言和准备(转载)

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...