artDialog使用方法

来源:互联网 发布:高校教务管理系统源码 编辑:程序博客网 时间:2024/05/21 05:17

传统参数版art.dialog
art.dialog(content,ok,cancel),参数:弹出框中的内容,点击“确定”按钮触发的事件,点击“取消”按钮触发的事件

art.dialog("artDialog", function () {    alert("点击了确定按钮");}, function () {    alert("点击了取消按钮");});

字面量参数版art.dialog

$("#btnArtDialog2").click(function () {    art.dialog({        title: "蝈蝈",        content: "字面量传参",        //以“skins/icons/”目录下的图标名作为参数名(不包含后缀名)        icon: "succeed",        lock: true,//是否锁定屏幕,默认是false        fixed: true,//静止在浏览器某个地方不动,不受滚动条拖动影响        time: 3,//如果有cancel方法的话会调用cancel方法        okVal: "ok",        ok: function () { alert("ok了"); },        cancelVal: "cancel",        cancel: function () { alert("cancel了"); }    });});

follow属性的使用

$(document).ready(function () {    //点击按钮时能弹出有跟随效果的提示框    //效果同简写形式的follow效果一样    $("#btnArtDialog3").click(function () {        art.dialog({            follow: document.getElementById('btnArtDialog3'),            title: "跟随效果",            content: "follow属性"        });    });    //不用点击按钮就会弹出有跟随效果的提示框    art.dialog({        follow: document.getElementById('btnArtDialog3'),        title: "跟随效果",        content:"follow属性"    });    //点击按钮的时候会出现有跟随效果的提示框    art('#btnArtDialog3').dialog({        title: "跟随效果",        content: "简写形式的follow属性"    });});

art.dialog.alert(content,ok),参数:弹出框的内容,用户点击“确定”按钮后执行的回发事件

$("#btnAlert").click(function () {    art.dialog.alert("alert弹出框", function () {        art.dialog.alert("点击确定按钮触发的事件");    });});

art.dialog.confirm(content,ok,cancel),参数:弹出框中的内容,
点击“确定”按钮触发的事件,点击“取消”按钮触发的事件

$("#btnConfirm").click(function () {    art.dialog.confirm('confirm弹出框', function () {        art.dialog.alert("点击确定按钮触发的事件");    }, function () {        art.dialog.alert("点击取消按钮触发的事件");    });});

art.dialog.prompt(content,ok(data),defaultValue),参数:弹出框中的内容,
点击“确定”按钮触发的事件,data表示用户输入的内容,输入框的中默认值

function PromptFunc() {    art.dialog.prompt('prompt弹出框', function (data) {        art.dialog.alert("data=" + data);    }, "请输入");}

art.dialog.notice()

function NoticeFunc() {    art.dialog.notice({        title: '蝈蝈',        // 必须指定一个像素宽度值或者百分比,        //否则浏览器窗口改变可能导致artDialog收缩        width: 220,         content: '尊敬的顾客朋友,您IQ卡余额不足10元,请及时充值',        icon: 'face-sad',        time: 5    });}

art.dialog.open(url,options,cache),参数: 地址, 配置参数, 缓存开关(默认true)

function OpenFunc() {    art.dialog.open("Login.aspx", {        title: "登录",        lock: true,        width: 400,        height: 300    },true);}

art.dialog.data(key,value),参数:键、值

function SetValue() {    //设置键值对    art.dialog.data('test', $('#demoInput').val());}function GetValueFunc() {    //根据键的名称获取对应的值    var data = art.dialog.data('test');    art.dialog.alert("data=" + data);}

跨页面传值,art.dialog.open与art.dialog.data组合使用
artDialog.aspx与iframeA.htm互相传值

//artDialog.aspx中的方法<script type="text/javascript">function OpenAndDataFunc() {    art.dialog.data('test', $('#demoInput').val());    var dialog = art.dialog.open('iframeA.htm', {        title: "iframeA",        lock: true,        width: 400,        height: 300,        close: function () {            //获取由iframeA.htm页面传递过来的数据            var data = art.dialog.data('fromIFrameA');            art.dialog.alert("data=" + data);        }    }, false);    //将弹出框设为键值对形式,在iframeA.htm中获取到该弹出框后,    //可以将其关闭    art.dialog.data("iFrameADialog", dialog);}</script>//iframeA.htm中的代码<script type="text/javascript">if (art.dialog.data('test')) {    // 获取由artDialog.aspx页面传递过来的数据    document.getElementById('aInput').value =     art.dialog.data('test'); };document.getElementById('btnSetValue').onclick = function () {    alert($('#aInput').val());    art.dialog.data('fromIFrameA', $('#aInput').val());};// 关闭并返回数据到主页面artDialog.aspxdocument.getElementById('exit').onclick = function () {    var origin = art.dialog.open.origin;//来源页面    //获取来源页面第二种写法    //var origin = artDialog.open.origin;    var aValue = document.getElementById('aInput').value;    var input = origin.document.getElementById('demoInput');    var iFrameADialog = art.dialog.data('iFrameADialog ');    //给来源页面中id=demoInput的控件赋值    input.value = aValue;    //选中id=demoInput的控件    input.select();    //关闭弹出框的两种方式    //art.dialog.close();//【方法一】    iFrameADialog .close();//【方法二】};</script>
1 0
原创粉丝点击