artdialog对话框 三种样式 网址:http://www.planeart.cn/demo/artDialog/_doc/labs.html

2020-11-16 00:10

阅读:765

标签:style   http   java   os   数据   width   

摇头效果

类似与wordpress登录失败后登录框可爱的左右晃动效果

// 2011-07-17 更新
artDialog.fn.shake = function (){
    var style = this.DOM.wrap[0].style,
        p = [4, 8, 4, 0, -4, -8, -4, 0],
        fx = function () {
            style.marginLeft = p.shift() + ‘px‘;
            if (p.length 0) {
                style.marginLeft = 0;
                clearInterval(timerId);
            };
        };
    p = p.concat(p.concat(p));
    timerId = setInterval(fx, 13);
    return this;
};

调用示例:

var dialog = art.dialog({
    content: 

"己所不欲"下一句是?

+ , fixed: true, id: ‘Fm7‘, icon: ‘question‘, okVal: ‘回答‘, ok: function () { var input = document.getElementById(‘demo-labs-input‘); if (input.value !== ‘\u52ff\u65bd\u4e8e\u4eba‘) { this.shake && this.shake();// 调用抖动接口 input.select(); input.focus(); return false; } else { art.dialog({ content: ‘恭喜你,回答正确!‘, icon: ‘succeed‘, fixed: true, lock: true, time: 1.5 }); }; }, cancel: true }); dialog.shake && dialog.shake();// 调用抖动接口

 

右下角滑动通知

artDialog.notice = function (options) {
    var opt = options || {},
        api, aConfig, hide, wrap, top,
        duration = 800;
        
    var config = {
        id: ‘Notice‘,
        left: ‘100%‘,
        top: ‘100%‘,
        fixed: true,
        drag: false,
        resize: false,
        follow: null,
        lock: false,
        init: function(here){
            api = this;
            aConfig = api.config;
            wrap = api.DOM.wrap;
            top = parseInt(wrap[0].style.top);
            hide = top + wrap[0].offsetHeight;
            
            wrap.css(‘top‘, hide + ‘px‘)
                .animate({top: top + ‘px‘}, duration, function () {
                    opt.init && opt.init.call(api, here);
                });
        },
        close: function(here){
            wrap.animate({top: hide + ‘px‘}, duration, function () {
                opt.close && opt.close.call(this, here);
                aConfig.close = $.noop;
                api.close();
            });
            
            return false;
        }
    };	
    
    for (var i in opt) {
        if (config[i] === undefined) config[i] = opt[i];
    };
    
    return artDialog(config);
};

调用示例:

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

 

简单交互对话框

注意:artDialog iframeTools扩展已经包含这些扩展了

/**
 * 警告
 * @param	{String}	消息内容
 */
artDialog.alert = function (content) {
    return artDialog({
        id: ‘Alert‘,
        icon: ‘warning‘,
        fixed: true,
        lock: true,
        content: content,
        ok: true
    });
};


/**
 * 确认
 * @param	{String}	消息内容
 * @param	{Function}	确定按钮回调函数
 * @param	{Function}	取消按钮回调函数
 */
artDialog.confirm = function (content, yes, no) {
    return artDialog({
        id: ‘Confirm‘,
        icon: ‘question‘,
        fixed: true,
        lock: true,
        opacity: .1,
        content: content,
        ok: function (here) {
            return yes.call(this, here);
        },
        cancel: function (here) {
            return no && no.call(this, here);
        }
    });
};


/**
 * 提问
 * @param	{String}	提问内容
 * @param	{Function}	回调函数. 接收参数:输入值
 * @param	{String}	默认值
 */
artDialog.prompt = function (content, yes, value) {
    value = value || ‘‘;
    var input;
    
    return artDialog({
        id: ‘Prompt‘,
        icon: ‘question‘,
        fixed: true,
        lock: true,
        opacity: .1,
        content: [
            
‘, content,
,
‘, ,
].join(‘‘), init: function () { input = this.DOM.content.find(‘input‘)[0]; input.select(); input.focus(); }, ok: function (here) { return yes && yes.call(this, input.value, here); }, cancel: true }); }; /** * 短暂提示 * @param {String} 提示内容 * @param {Number} 显示时间 (默认1.5秒) */ artDialog.tips = function (content, time) { return artDialog({ id: ‘Tips‘, title: false, cancel: false, fixed: true, lock: false }) .content(
‘ + content +
) .time(time || 1.5); };

调用范例:

art.dialog.alert(‘人品越来越不那么稳定了,请检查!‘);

 

art.dialog.confirm(‘你确定要删除这掉消息吗?‘, function () {
    art.dialog.tips(‘执行确定操作‘);
}, function () {
    art.dialog.tips(‘执行取消操作‘);
});

 

art.dialog.prompt(‘请输入图片网址‘, function (val) {
    art.dialog.tips(val);
}, ‘http://‘);

 

art.dialog.tips(‘数据正在提交..‘, 2);
// [more code..]
art.dialog.tips(‘成功!已经保存在服务器‘);

artdialog对话框 三种样式 网址:http://www.planeart.cn/demo/artDialog/_doc/labs.html,搜素材,soscw.com

artdialog对话框 三种样式 网址:http://www.planeart.cn/demo/artDialog/_doc/labs.html

标签:style   http   java   os   数据   width   

原文地址:http://www.cnblogs.com/M-D-Luffy/p/3699478.html


评论


亲,登录后才可以留言!