美空网JQuery技术

1、tool1.js其实就是jquery.js，版本为1.6.4，变更的地方在文件末尾，定义了全局变量jQuery1。

var jQuery1 = jQuery;
//js String 对象扩展 trim 方法
String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, "");
}

2、jui.js其实包含了jquery-ui.js，版本为1.8.13，以及artDialog.js，版本为4.1.0。

3、弹出层接口，是对artDialog进行封装。

/*
 * MOKO 弹出层接口，对artDialog 进行的封装
 *
 * 
 * 使用说明：
 * 
 * 1.Ajax 请求一个页面:
 * 
 * $(document).ready(function(){
 *		//Ajax 请求一个页面
 * 		jQuery1.mokoDialog({url:'/jsps/project/ProjectAddAlertView.jsp'});
 * 	}
 *
 * 2.Ajax请求回调函数
 *
 * $(document).ready(function(){
 *		//指定宽度width ，回调函数initFn
 * 		jQuery1.mokoDialog({url:urlString,width:1090,initFn:function(){
 *			alert('OK');
 *		}});
 * 	}
 *
 * 3.Ajax请求带有参数
 *
 * var param = jQuery1.param({'username':'mokoman'});
 * jQuery1.mokoDialog({url:'/jsps/face/FaceShowModPoPList.jsp?'+param});
 * 或者 (新增方法)
 * jQuery1.mokoDialog({url:'/jsps/face/FaceShowModPoPList.jsp',param:{'username':'mokoman'}});
 *
 *
 * 4.定时关闭弹出层并禁止Esc 关闭弹出层
 *
 * jQuery1.mokoDialog({url:'/jsps/item/ItemMusicSetOkAlert.jsp',time:2,esc:false});
 *
 * 5.关闭弹出层
 *
 * jQuery1.mokoDialog.close();
 * <a onclick="jQuery1.mokoDialog.close();">关闭</a>
 * 或者
 * <a class="moko-Dialog-close">关闭</a>
 *
 * 6.html内容弹出层
 *
 * jQuery1.mokoDialog({content:'<p>html内容弹出层</p><button class="moko-Dialog-close">x</button>,time:2});
 *
 * 7.弹出多个层需要指定id
 *
 * jQuery1.mokoDialog({url:'/jsps/item/ItemMusicSetOkAlert.jsp',id:'newDialog'});
 * 关闭时也需要指定id
 * <a onclick="jQuery1.mokoDialog.close('newDialog');">关闭</a>
 *
 * 8.指定弹出层位置 left、top
 *
 * jQuery1.mokoDialog({url:'/jsps/item/ItemMusicSetOkAlert.jsp',left:30,top:30});
 */
(function($) {
    $(function() {
        $('.moko-Dialog-close').live('click',function() {
            _close();
        });
    });
    var settings = {};
    $.mokoDialog = function(options) {
        settings = $.extend({
            title: false,
            border: false,
            lock: true,
            fixed: true,
            id: 'mokoDialog',
			noFn : false,
			padding : '0',
			background : '#000',
			opacity: .1,
			param:{}
        },options);
        if (settings.url != undefined) {
            _load();
        } else {
            _html();
        }
        return this;
    };
	//Ajax 请求数据显示
    var _load = function() {		
		$.get(settings.url,settings.param,function(data) {
			settings.content = data;
			_html();
		});
    },
	//显示html
    _html = function() {
        $.dialog(settings);
    },
	//关闭弹出层
    _close = $.mokoDialog.close = function(dialogId) {
        if (dialogId == undefined) 
			dialogId = 'mokoDialog';
		if($.dialog({id:dialogId}) != undefined)
			$.dialog({id:dialogId}).close();
    };
})(jQuery1);

4、moko-dialog.css，其实就是artDialog的样式文件，载入图标的位置进行了变更。

.aui_loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(icons/loading.gif) no-repeat center center; }
/*现在位置*/
.aui_loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(../images/loading.gif) no-repeat center center; }