一、引用

<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. POJ 2078 Matrix

    Matrix Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 3239   Accepted: 1680 Descriptio ...

  2. 从function前面的!想到的

    最近没事喜欢看看,一些js库的源码,结果发现库前不是加一个!就是加+或者一个(),心中猜出个大概知道这个是让函数自动执行,可是这么多符号达到同一个目的,原理是什么呢,下面做一下剖析: 先从IIFE开始 ...

  3. Guardian of Decency(二分图)

    Guardian of Decency Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submi ...

  4. ruby -- 进阶学习(九)定制错误跳转404和500

    在开发阶段,如果发生错误时,都会出现错误提示页面,比如:RecordNotFound之类的,虽然这些错误方便开发进行debug,但是等产品上线时,如果还是出现这些页面,对于用户来说是很不友好的. 所以 ...

  5. ruby -- 进阶学习(十六)ckeditor去除“浏览服务器”按钮

     FROM:http://blog.163.com/zjc_8886/blog/static/2408175201011222590967/ 实现方法: 由于ckeditor中的"上传图片& ...

  6. sqlserver -- 学习笔记(七)获取同组数据的前两条记录

    不啰嗦,直接上图,大概实现效果如下: 有上面这样一份数据,将他们按照userAccount和submitTime进行分组,然后提前每组数据的前两条记录 提取后数据如下: 实现的SQL如下: selec ...

  7. EF Attach时已存在的处理方式

    如果我们在先前的步骤中读取过数据,如 var list = db.Model.ToList(); 之后再,附加 var o = new Model { Id = 1 }; db.Model.Attac ...

  8. 【转载】利用shell脚本获取一个文件的绝对路径readlink

    转载自:http://os.chinaunix.net/a2007/1118/976/000000976787.shtml #! /bin/bash echo "Path to $(base ...

  9. cmd 窗口配置mysql数据库

    1.运行-cmd 进入command 窗口 首先cd 到mysql目录下的bin的 路运行-cmd 进入command 窗口 首先cd 到mysql目录下的bin的路径.注意cd D盘时直接输入D:就 ...

  10. 分享一个ASP.NET 文件压缩解压类 C#

    需要引用一个ICSharpCode.SharpZipLib.dll using System; using System.Collections.Generic; using System.Linq; ...