實驗

這里是一些實驗性的擴展,或許它們哪天消失也說不定。要注意:它們并沒有整合在artDialog主文件里面。

搖頭效果

類似與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: '<p>"己所不欲"下一句是?</p>'
    	+ '<input id="demo-labs-input" style="width:15em; padding:4px" />',
    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, callback) {
	return artDialog({
		id: 'Alert',
		icon: 'warning',
		fixed: true,
		lock: true,
		content: content,
		ok: true,
		close: callback
	});
};


/**
 * 確認
 * @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: [
			'<div style="margin-bottom:5px;font-size:12px">',
				content,
			'</div>',
			'<div>',
				'<input value="',
					value,
				'" style="width:18em;padding:6px 4px" />',
			'</div>'
			].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: true
	})
    .content('<div style="padding: 0 1em;">' + content + '</div>')
	.time(time || 1);
};

調用范例:

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('成功!已經保存在服務器');

香港平码 德甲多特蒙德主场 广东南粤风采36选7最新开奖结果 同仁堂股票行情查询 九游棋牌app平台下载 王中王 心水 我爱南京麻将群 今日股市行情查询分 中国体育彩票飞鱼开奖汇总 安徽快3开奖结果今天开奖 捕鱼王游戏