artDialog组件应用学习（二）

一.没有操作选项的对话框

预览：

html前台引入代码：（之后各种效果对话框引入代码致，调用方法也一样，就不一一写入）

<script type="text/javascript" src="/Scripts/Arale/sea-modules/sea.js"></script>
<script type="text/javascript">
    seajs.config({
        alias: {
            "jquery": "jquery-1.10.2"
        }
    });
</script>

提示框编写代码：

//为了让对话框自动消失，自行定义的方法
function DieOut(d, time) {
    setTimeout(function () {
        d.close().remove();
    }, time);
}

//自动关闭对话框
function SelfCloseTip(msg, width, height) {
    seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
        var d = dialog({
            content: msg,
            quickClose: true
        });
        d.width(width);
        d.height(height);
        d.show();
        DieOut(d, 5000);
    });
}

在前台页面调用方法：SelfCloseTip("5s后我会自动消失",300,150);

属性：

content:　　   string类型，对话框显示内容

quickClose:     boolean,点击对话框外围空白处，是否快速关闭对话框，true：关闭 false：不关闭

方法：

width(value):　　number类型，对话框宽度

height(value):     number类型，对话框高度

show():　　　　  显示普通对话框

close():               关闭（隐藏）对话框

remove():           销毁对话框,会从Dom元素中移除对话框相关节点，无法恢复

二.气泡浮层对话框

预览：

提示框编写代码：

//气泡浮层效果
function FollowBottomTip(message, follow) {
    seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
        var d = dialog({
            align: "bottom left",
            padding:8,
            content: message,
            quickClose: true,
        });
        d.show(follow);
    });
}

属性：

align:　　        string类型，浮层对齐方式，默认bottom left，支持："top left", "top", "top right", "right top", "right", "right bottom", "bottom right",

"bottom", "bottom left", "left bottom", "left", "left top"(show()传入HTML对象方可生效)

padding:         number类型，浮层里内容距所在容器距离（控制浮层高度）

参数follow是浮层显示位置的对象，注意，这个对象只能用javascript来获取，jquery获取无效。

var follow = document.getElementById("followid");