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");

巴特西

artDialog组件应用学习（二）

最新文章

热门文章