amazeui / dialog Goto Github PK

View Code? Open in Web Editor NEW

16.0 6.0 12.0 18 KB

Amaze UI Modal HTML 模板封装

Home Page: http://amazeui.github.io/dialog/

License: MIT License

JavaScript 100.00%

dialog's Introduction

Amaze UI dialog

Amaze UI Modal 插件 HTML 模板封装。

使用示例

使用说明：

获取 Amaze UI dialog

直接下载
使用 NPM: npm install amazeui-dialog

在 Amaze UI 样式之后引入 dialog 样式（dist 目录下的 CSS）：

Amaze UI dialog 依赖 Amaze UI 样式。

<link rel="stylesheet" href="path/to/amazeui.min.css"/>

引入 dialog 插件（dist 目录下的 JS）：

<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.min.js"></script>
<script src="path/to/amazeui.dialog.min.js"></script>

调用 dialog:

AMUI.dialog.alert({
    title: '错误提示',
    content: '你的家还好吧',
    onConfirm: function() {
        console.log('close');
      }
});

AMUI.dialog.confirm({
    title: '错误提示',
    content: '正文内容',
    onConfirm: function() {
      console.log('onConfirm');
    },
    onCancel: function() {
      console.log('onCancel')
    }
});

var $loading = AMUI.dialog.loading();
setTimeout(function() {
    $loading.modal('close');
}, 3000);

var $actions = AMUI.dialog.actions({
    title: '标题啊',
    items: [
      {content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'},
      {content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'},
      {content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'}
    ],
    onSelected: function(index, target) {
      console.log(index);
      $actions.close();
    }
});

$actions.show();

AMUI.dialog.popup({title: '标题', content: '正文'});

dialog's People

Stargazers

Watchers

Forkers

chadwicklee jiafenggit cubbon hu19891110 makegoodsecret xuzhou530 xsl303 zhiweihwang zhaodifangsi 2536960099 modleiory yanxin88

dialog's Issues

Ajax 交互时会导致遮罩层消失

$('#login').click(function(){
    var $loading = AMUI.dialog.loading();
    $.ajax({
        url: 'http://baidu.com/a',
        complete:function(){
            $loading.modal('close');
        },
        error:function(jqXHR){
            AMUI.dialog.alert()
        }
    });
});

比如这样，请求一个 404 的链接，很快就返回了，loading 关闭后，alert 打开没有遮罩层。

return $(html.join('')).appendTo('body').modal({
onConfirm: function() {
options.onConfirm();
},
onCancel: function() {
options.onCancel();
}
}).on('closed.modal.amui', function() {
$(this).remove();
});
好像是onConfirm多带了个参数options

amazeui.dialog.js:62 Uncaught TypeError: options.onConfirm is not a function

这样改造下更方便用，已经上项目

`
/*! amazeui-dialog v0.0.2 | by Amaze UI Team | (c) 2016 AllMobilize, Inc. | Licensed under MIT | 2016-06-22T10:19:33+0800 */
(function e(t, n, r) {
function s(o, u) {
if (!n[o]) {
if (!t[o]) {
var a = typeof require == "function" && require;
if (!u && a)return a(o, !0);
if (i)return i(o, !0);
var f = new Error("Cannot find module '" + o + "'");
throw f.code = "MODULE_NOT_FOUND", f
}
var l = n[o] = {exports: {}};
t[o][0].call(l.exports, function (e) {
var n = t[o][1][e];
return s(n ? n : e)
}, l, l.exports, e, t, n, r)
}
return n[o].exports
}

var i = typeof require == "function" && require;
for (var o = 0; o < r.length; o++)s(r[o]);
return s

})({
1: [function (dereq, module, exports) {
(function (global) {
/**
* Created by along on 15/8/12.
*/

        'use strict';

        var $ = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
        var UI = (typeof window !== "undefined" ? window['AMUI'] : typeof global !== "undefined" ? global['AMUI'] : null);

        var dialog = dialog || {};

        dialog.tip = function (options) {
            options = options || {};
            options.tip = options.tip || '提示';
            options.timeout = options.timeout || 2000;

            var html = [];
            html.push('<div class="am-modal am-modal-no-btn" tabindex="-1">');
            html.push('<div class="am-modal-dialog" style="width: auto;background-color: rgba(0,0,0,.6);color: #fff;border-radius: 4px">');
            html.push('<div class="am-modal-bd" style="width: auto">' + options.tip + '</div>');
            html.push('</div>');
            html.push('</div>');

            var am_model_tip = $(html.join(''))
                .appendTo('body')
                .modal({'dimmer': false})
                .on('closed.modal.amui', function () {
                    $(this).remove();
                });

            setTimeout(function () {
                am_model_tip.modal('close');
            }, options.timeout);

            return true;
        };

        dialog.alert = function (options) {
            options = options || {};
            options.title = options.title || '提示';
            options.content = options.content || '提示内容';
            options.onConfirm = options.onConfirm || function () {
                };
            var html = [];
            html.push('<div class="am-modal am-modal-alert" tabindex="-1">');
            html.push('<div class="am-modal-dialog">');
            html.push('<div class="am-modal-hd">' + options.title + '</div>');
            html.push('<div class="am-modal-bd">' + options.content + '</div>');
            html.push('<div class="am-modal-footer"><span class="am-modal-btn">确定</span></div>');
            html.push('</div>');
            html.push('</div>');

            return $(html.join(''))
                .appendTo('body')
                .modal()
                .on('closed.modal.amui', function () {
                    $(this).remove();
                    options.onConfirm.call();
                });
        };

        dialog.confirm = function (options) {
            options = options || {};
            options.title = options.title || '确认';
            options.content = options.content || '是否确定？';
            options.onConfirm = options.onConfirm || function () {
                };
            options.onCancel = options.onCancel || function () {
                };

            var html = [];
            html.push('<div class="am-modal am-modal-confirm" tabindex="-1">');
            html.push('<div class="am-modal-dialog">');
            html.push('<div class="am-modal-hd">' + options.title + '</div>');
            html.push('<div class="am-modal-bd">' + options.content + '</div>');
            html.push('<div class="am-modal-footer">');
            html.push('<span class="am-modal-btn" data-am-modal-cancel>取消</span>');
            html.push('<span class="am-modal-btn" data-am-modal-confirm>确定</span>');
            html.push('</div>');
            html.push('</div>');
            html.push('</div>');

            return $(html.join('')).appendTo('body').modal({
                onConfirm: options.onConfirm,
                onCancel: options.onCancel
            }).on('closed.modal.amui', function () {
                $(this).remove();
            });
        };

        dialog.prompt = function (options) {
            options = options || {};
            options.title = options.title || '请输入';
            options.onConfirm = options.onConfirm || function () {
                };
            options.onCancel = options.onCancel || function () {
                };

            var html = [];
            html.push('<div class="am-modal am-modal-prompt" tabindex="-1">');
            html.push('<div class="am-modal-dialog">');
            html.push('<div class="am-modal-hd">' + options.title + '</div>');
            html.push('<div class="am-modal-bd"><input type="text" class="am-modal-prompt-input"></div>');
            html.push('<div class="am-modal-footer">');
            html.push('<span class="am-modal-btn" data-am-modal-cancel>取消</span>');
            html.push('<span class="am-modal-btn" data-am-modal-confirm>确定</span>');
            html.push('</div>');
            html.push('</div>');
            html.push('</div>');

            return $(html.join('')).appendTo('body').modal({
                onConfirm: options.onConfirm,
                onCancel: options.onCancel
            }).on('closed.modal.amui', function () {
                $(this).remove();
            });
        };

        dialog.loading = function (options) {
            options = options || {};
            options.title = options.title || '正在载入...';

            var html = [];
            html.push('<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">');
            html.push('<div class="am-modal-dialog">');
            html.push('<div class="am-modal-hd">' + options.title + '</div>');
            html.push('<div class="am-modal-bd">');
            html.push('<span class="am-icon-spinner am-icon-spin"></span>');
            html.push('</div>');
            html.push('</div>');
            html.push('</div>');

            return $(html.join('')).appendTo('body').modal()
                .on('closed.modal.amui', function () {
                    $(this).remove();
                });
        };

        dialog.actions = function (options) {
            options = options || {};
            options.title = options.title || '请选择';
            options.items = options.items || [];
            options.onSelected = options.onSelected || function () {
                    $acions.modal('close').remove();
                };
            var html = [];
            html.push('<div class="am-modal-actions">');
            html.push('<div class="am-modal-actions-group">');
            html.push('<ul class="am-list">');
            html.push('<li class="am-modal-actions-header">' + options.title + '</li>');
            options.items.forEach(function (item, index) {
                html.push('<li data-index="' + index + '">' + item + '</li>');
            });
            html.push('</ul>');
            html.push('</div>');
            html.push('<div class="am-modal-actions-group">');
            html.push('<button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>');
            html.push('</div>');
            html.push('</div>');

            var $acions = $(html.join('')).appendTo('body').modal('open');

            $acions.find('.am-list>li').bind('click', function (e) {
                $acions.modal('close').remove();
                options.onSelected($(this).attr('data-index'), this);
            });

            return {
                show: function () {
                    $acions.modal('open');
                },
                close: function () {
                    $acions.modal('close').remove();
                }
            };
        };

        dialog.popup = function (options) {
            options = options || {};
            options.title = options.title || '标题';
            options.content = options.content || '正文';
            options.onClose = options.onClose || function () {
                };

            var html = [];
            html.push('<div class="am-popup">');
            html.push('<div class="am-popup-inner">');
            html.push('<div class="am-popup-hd">');
            html.push('<h4 class="am-popup-title">' + options.title + '</h4>');
            html.push('<span data-am-modal-close  class="am-close">&times;</span>');
            html.push('</div>');
            html.push('<div class="am-popup-bd">' + options.content + '</div>');
            html.push('</div> ');
            html.push('</div>');
            return $(html.join('')).appendTo('body').modal()
                .on('closed.modal.amui', function () {
                    $(this).remove();
                    options.onClose();
                });
        };

        module.exports = UI.dialog = dialog;

    }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
}, {}]

}, {}, [1]);

//加载
function amDialog_loading(title, timeout) {
timeout = timeout || 10000;
var am_model_loading = AMUI.dialog.loading({title: title});
setTimeout(function () {
am_model_loading.modal("close");
}, timeout);
}

//提示
function amDialogTip(tip, timeout) {
AMUI.dialog.tip({tip: tip, timeout: timeout});
}

//提示/警告
function amDialogAlert(content, onConfirm, title) {
AMUI.dialog.alert({title: title, content: content, onConfirm: onConfirm});
}

//确认
function amDialogConfirm(content, onConfirm, onCancel, title) {
AMUI.dialog.confirm({title: title, content: content, onConfirm: onConfirm, onCancel: onCancel});
}

//Prompt
function amDialogPrompt(title, onConfirm, onCancel) {
AMUI.dialog.prompt({title: title, onConfirm: onConfirm, onCancel: onCancel});
}

//选择
function amDialogSelect(items, onSelected, title) {
AMUI.dialog.actions({items: items, onSelected: onSelected, title: title});
}

//窗口
function amDialogPopup(title, content, onClose) {
AMUI.dialog.popup({title: title, content: content, onClose: onClose});
}

能不能改下没有传递title的话就不显示标题栏呢

现在默认显示“提示”，但我现在不想显示标题栏，更简洁一些。

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.