* 参数形式如下
* {
* HTML:''//自定义对话框的html代码
* }
*
* 自定义代码中必须包含下面三个id的元素
* ui_dialog_header
* ui_dialog_body
* ui_dialog_footer
*
* @namespace XN.ui
* @class dialog
* @constructor
* @param {Object} params
* @extends XN.ui.fixPositionElement
*/
XN.ui.dialog = function( params )
{
var This = this;
XN.ui.fixPositionElement.call( this , params );
this.container = $element( 'div' );
this.frame.appendChild( this.container );
if ( this.getConfig( 'HTML' ) )
{
this.setContent( this.getConfig( 'HTML' ) )
}
else
{
this.setContent( this.buildHTML() );
}
this.header = $( 'ui_dialog_header' );
this.body = $( 'ui_dialog_body' );
this.footer = $( 'ui_dialog_footer' );
this.closeButton = $( 'ui_dialog_close' );
this.header.addChild =
this.body.addChild =
this.footer.addChild = function( s )
{
XN.element.addChild( this , s );
setTimeout( function(){This.refresh();},0 );
};
this.header.removeAttribute( 'id' );
this.body.removeAttribute( 'id' );
this.footer.removeAttribute( 'id' );
this.closeButton.removeAttribute( 'id' );
if ( this.getConfig( 'showCloseButton' ) )
{
this.closeButton.show();
XN.event.addEvent( this.closeButton, 'click', function()
{
This.hide();
});
}
//lower than menu
this.frame.style.zIndex = 10000;
this.setWidth( this.getConfig( 'width' ) || 400 );
if ( this.getConfig( 'height' ) ) this.setHeight( this.getConfig( 'height' ) );
XN.array.each( [ 'header' , 'body' , 'footer' ] , function( i , v )
{
if ( This.getConfig( v ) ) This[ v ].setContent( This.getConfig( v ) );
} );
if ( this.getConfig( 'type' ) ) this.setType( this.getConfig( 'type' ) );
this._buttons = [];
XN.event.addEvent( this.footer , 'click' , function( e )
{
e = e || window.event;
This._parseButtonEvent( e );
} );
XN.util.hotKey.add( '27' , this._hotKeyEvent , this );
if ( this.getConfig( 'modal' ) )
{
XN.dom.disable();
}
};
XN.ui.dialog.prototype = $extend( {} , fixProto );
$extend( XN.ui.dialog.prototype ,
{
header : null,
body : null,
footer : null,
_iframe : null,
_buttons : null,
buildHTML : function()
{
return [
'| ', ' | ', ' | ', ' |
| ', ' | ',
'', '',
'',
'',
' ',
' | ',
'', ' |
| ', ' | ', ' | ', ' |
* 参数形式如下:
* {
* text : '',//按钮的文字
* onclick : callback//按钮onclick时触发的函数
* }
*
* @method addButton
* @param {Object} b
* @return {Object} this
*/
addButton : function( b )
{
var o = {
text : b.text,
_onclickForDialog : b.onclick
};
if ( b.className ) o.className = b.className;
var button = new XN.ui.button( o );
/*
* patch for panel
*/
button.frame.setAttribute( 'dialog' , '1' );
/*
* patch end
*/
this._buttons.push( button );
this.footer.addChild( button );
return this;
},
/**
* 从从对话框删除按钮，参数为按钮的文字
* @method delButton
* @param {String} b title of the button
* @return {Object} this
*/
delButton : function( b )
{
if ( isString( b ) ) b = this.getButton( b );
this.footer.delChild( b );
return this;
},
_preventHide : false,
/**
* 阻止对话框关闭，用于按钮的回调函数
*
* callBack=function()
* {
* this.preventHide();
* .....
* }
*
* @method preventHide
* @return {Object} this
*/
preventHide : function()
{
this._preventHide = true;
return this;
},
_parseButtonEvent : function( e )
{
var el = Event.element( e );
if ( el.tagName.toLowerCase() !== 'input' || el.type !== 'button' ) return;
if ( !el.getAttribute( 'dialog' ) ) return;
var button = this.getButton( el.value );
if ( button && button._onclickForDialog )
{
button._onclickForDialog.call( this );
}
if ( this._preventHide )
{
this._preventHide = true;
}
else
{
this.hide();
//XN.dom.enable();
}
},
_hotKeyEvent : function()
{
this.hide();
},
/**
* 设置对话框的样式'normal' or 'error' type
* @method setType
* @param {String} t
* @return {Object} this
*/
setType : function( t )
{
if ( t == 'normal' )
{
this.frame.delClass( 'errorDialog' );
}
else if ( t == 'error' )
{
this.frame.addClass( 'errorDialog' );
}
return this;
},
/**
* 设置对话框宽度
* @method setWidth
* @param {Int} w
* @return {Object} this
*/
setWidth : function( w )
{
if ( !w ) return this;
this.width = w;
this.frame.style.width = w + 'px';
this.refresh();
return this;
},
/**
* 设置对话框高度，一般是自动伸展
* @method setHeight
* @param {Int} h
* @return {Object} this
*/
setHeight : function( h )
{
if ( !h )return this;
this.hegith = h;
this.frame.style.height = h + 'px';
this.refresh();
return this;
},
/**
* resize
* @method resizeTo
* @param {Int} w
* @param {Int} h
* @return {Object} this
*/
resizeTo : function( w , h )
{
this.setWidth( w );
this.setHeight( h );
return this;
},
/**
* 清空对话框的内容
* @method clear
* @return {Object} this
*/
clear : function()
{
this.header.setContent( '' );
this.body.setContent( '' );
this.footer.setContent( '' );
this._buttons = [];
return this;
},
/**
* 设置对话框的标题
* @method setTitle
* @param {String} s
* @return {Object} this
*/
setTitle : function( s )
{
this.header.setContent( s );
return this;
},
/**
* 设置对话框的内容
* @method setBody
* @param {String} s
* @return {Object} this;
*/
setBody : function( s )
{
this.body.setContent( s );
return this;
},
remove : function()
{
XN.util.hotKey.del( '27' , this._hotKeyEvent );
XN.ui.element.remove.call( this );
return this;
},
refresh : function()
{
if ( this.visible() )
{
fixProto.show.apply( this , arguments );
}
else
{
this.hide();
}
return this;
},
show : function()
{
this._clearHideTimer();
fixProto.show.apply( this , arguments );
return this;
},
hide : function()
{
this._clearHideTimer();
fixProto.hide.apply( this , arguments );
XN.dom.enable();
return this;
},
_hideTimer : null,
_clearHideTimer : function()
{
if ( this._hideTimer )
{
clearTimeout( this._hideTimer );
this._hideTimer = null;
}
},
/**
* 自动关闭对话框
* @method autoHide
* @param {Int} t
* @return {Object} this
*/
autoHide : function( t )
{
var This = this;
this._hideTimer = setTimeout(function()
{
This.hide();
}, t * 1000 );
return this;
}
} );
})();
/*
* patch for old version
*/
XN.ui.panel = XN.ui.dialog;
XN.ui.dialog.prototype.setHeader = function( h )
{
if( h && h !== '')
{
this.header.addChild( h );
}
else
{
this.header.innerHTML = '';
}
};
XN.ui.dialog.prototype.setFooter = function( f )
{
if ( f && f !== '' )
{
this.footer.addChild( f );
}
else
{
this.footer.innerHTML = '';
}
};
/*
* patch end
*/
/**
* 菜单
*
* 参数形式如下
* {
* button : 'el',//触发元素的id
* hoverClass : 'classname',//菜单显示时button的样式
* event : 'mouseover',//事件类型，还可以是click,manual
* alignType : '4-1',//菜单对齐方式
* delay : 0.2,//延迟时间，用于mouseover
* useIframeInIE6 : true,//在ie6是否添加iframe
* addIframe : false,//是否强制添加iframe
* }
*
*
* @namespace XN.ui
* @class menu
* @constructor
* @param {Object} params
*/
XN.ui.menu = function( params )
{
var This = this;
this.config = {
alignType : '4-1',
barOnshowClass : '',
tagName : 'div',
disalbeButtonClickEvent : true,
fireOn : 'click',
keep : 0.2,
useIframeInIE6 : true,
effectTime : 50
};
$extend( this.config , params );
var frame;
if ( this.getConfig( 'text' ) )
{
this.frame = frame = $element( this.getConfig( 'tagName' ) );
frame.setContent( this.getConfig( 'text' ) );
}
else if ( this.getConfig( 'button' ) )
{
this.frame = frame = $( this.getConfig( 'button' ) );
}
else return false;
this._alignType = this.getConfig( 'alignType' );
if ( this.getConfig( 'menu' ) )
{
$( this.getConfig( 'menu' ) ).hide();
this.menu = new XN.ui.fixPositionElement(
{
id : this.getConfig( 'menu' ),
alignType : this._alignType,
alignWith : this.getConfig( 'alignWith' ) || this.frame,
addIframe : this.getConfig( 'addIframe' ),
useIframeInIE6 : this.getConfig( 'useIframeInIE6' )
});
this.container = this.menu.frame;
this._canAddSubMenu = false;
}
else
{
var dt = $element( 'div' );
dt.hide();
this.menu = new XN.ui.fixPositionElement(
{
//tagName : 'div',
id : dt,
alignType : this._alignType,
alignWith : this.getConfig( 'alignWith' ) || this.frame,
addIframe : this.getConfig( 'addIframe' ),
useIframeInIE6 : this.getConfig( 'useIframeInIE6' )
});
this.container = $element( 'div' );
this._menu.setContent( this.container );
}
this.menu.setIndex( 10001 );
XN.event.addEvent( this.menu.frame , 'click' , function( e )
{
e = e || window.event;
This._frameOnClick( e );
} , false );
this.menu.setOffsetX( this.getConfig( 'offsetX' ) || 0 );
this.menu.setOffsetY( this.getConfig( 'offsetY' ) || 0 );
var eventType = this.getConfig( 'event' );
if ( eventType == 'click' )
{
XN.event.addEvent( this.frame , 'click' , function( e )
{
This._buttonClick( e || window.event );
} );
XN.event.addEvent( document , 'click' , function( e )
{
This._documentClick( e || window.event );
} );
}
else if ( eventType == 'mouseover' )
{
XN.event.addEvent( this.frame , 'mouseover' , function( e )
{
This._frameMouseOver( e || window.event );
} );
if ( this.getConfig( 'disalbeButtonClickEvent' ) )
{
XN.event.addEvent( this.frame , 'onclick' , function( e )
{
XN.event.stop( e || window.event );
} );
}
XN.event.addEvent( this.frame , 'mouseleave' , function()
{
This._buttonMouseLeave();
});
XN.event.addEvent( this.menu.frame , 'mouseleave' , function()
{
This._menuMouseLeave();
});
XN.event.addEvent( this.menu.frame , 'mouseover' , function()
{
This._mouseOverMenu = true;
});
}
else if ( eventType == 'manual' )
{
}
XN.event.addEvent( window , 'resize' , function()
{
This.menu.refresh();
});
this.hide();
};
XN.ui.menu.prototype = $extend( {} , XN.ui.container );
$extend( XN.ui.menu.prototype ,
{
isShow : true,
menu : null,
_alignType : null,
_button : null,
_canAddSubMenu : true,
_delayTimer : null,
_mouseOverMenu : false,
_mouseOverButton : false,
_clearTimer : function()
{
if ( this._delayTimer )
{
clearTimeout( this._delayTimer );
this._delayTimer = null;
}
},
_buttonClick : function( e )
{
XN.event.stop( e );
if ( this.isShow )
this.hide();
else
this.show();
},
_documentClick : function( e )
{
this.hide();
},
_frameOnClick : function( e )
{
var This = this;
var el = XN.event.element( e );
var tag = el.tagName.toLowerCase();
if ( tag == 'a' ) return true;
if ( ( tag == 'input' && ( el.type == 'radio' || el.type == 'checkbox' ) ) || tag == 'label' )
{
this.isShow = false;
setTimeout( function()
{
This.isShow = true;
} , 20 );
return true;
}
while ( el != this.menu.frame && el.tagName && el.tagName.toLowerCase() != 'a' )
{
el = el.parentNode;
}
if ( el.tagName.toLowerCase() == 'a' ) return true;
XN.event.stop( e );
},
_frameMouseOver : function( e )
{
var This = this;
this._mouseOverButton = true;
this._clearTimer();
var delay = this.getConfig( 'delay' );
if ( delay )
{
this._delayTimer = setTimeout( function()
{
if ( This._mouseOverButton ) This.show();
} , delay * 1000 );
}
else
{
This.show();
}
XN.event.stop( e );
},
_buttonMouseLeave : function()
{
var This = this;
this._mouseOverButton = false;
this._clearTimer();
setTimeout( function()
{
if ( !This._mouseOverMenu ) This.hide();
} , this.getConfig( 'effectTime' ) );
},
_menuMouseLeave : function()
{
var This = this;
this._mouseOverMenu = false;
this._clearTimer();
setTimeout( function()
{
if ( !This._mouseOverButton ) This.hide();
} , this.getConfig( 'effectTime' ) );
},
getConfig : function( key )
{
var patch =
{
'hoverClass' : 'barOnshowClass',
'event' : 'fireOn',
'button' : 'bar',
'delay' : 'keep'
};
if ( patch[ key ] ) return this.config[ key ] || this.config[ patch[ key ] ];
return this.config[ key ];
},
/**
* 显示菜单
* @method show
* @return {XN.ui.menu} this
*/
show : function()
{
if ( this.isShow ) return this;
this.menu.show();
this.frame.addClass( this.getConfig( 'hoverClass' ) );
this.onShow();
this.isShow = true;
return this;
},
/**
* 设置菜单宽度
* @method setWidth
* @param {Int} width
* @return {XN.ui.menu} this
*/
setWidth : function( w )
{
this.menu.frame.style.width = w + 'px';
this.menu.refresh();
return this;
},
/**
* 隐藏菜单
* @method hide
* @return {XN.ui.menu} this
*/
hide : function()
{
if ( !this.isShow ) return this;
this.menu.hide();
this.frame.delClass( this.getConfig( 'hoverClass' ) );
this.isShow = false;
this.onHide();
return this;
},
/**
* 刷新菜单
* @method refresh
* @return {XN.ui.menu} this
*/
refresh : function()
{
if ( this.isShow )
{
this.menu.show();
}
return this;
},
onShow : XN.func.empty,
onHide : XN.func.empty
} );
XN.event.enableCustomEvent( XN.ui.menu.prototype );
/**
* 自动完成
*
* 参数如下:
* {
* input:id,//要使用自动完成的input元素
* searchDelay:num,//输入与搜索之间的延迟
* DS:obj,//搜索用的数据源,参见XN.util
* enableCache:true,//是否使用缓存
* maxCache:10//最大缓存长度
* }
*
*
* @namespace XN.ui
* @class autoComplete
* @constructor
* @param {Object} p
* @extends XN.ui.element
*/
XN.ui.autoComplete = function( p )
{
var This = this;
this.config = this.config || {};
$extend( this.config ,
{
inputTip : null,
searchDelay : 0.2,
DS : null,
enableCache : true,
maxCache : 10
});
$extend( this.config , p );
if ( this.getConfig( 'enableCache' ) )
{
this.cache = new XN.util.cache({
cacheLength : this.getConfig( 'maxCache' )
});
}
if ( this.getConfig( 'input' ) )
{
var input = this.input = $( this.getConfig( 'input' ) );
}
else
{
var input = this.input = $element( 'input' );
input.type = 'text';
input.addClass( 'input-text' );
}
this.frame = input;
XN.event.addEvent( input , 'focus' , function( e )
{
This._startCheck();
This.fireEvent( 'focus' );
});
XN.event.addEvent( input , 'blur' , function( e )
{
This._endCheck();
This.fireEvent( 'blur' );
});
this.addEvent( 'focus' , function()
{
var v = this.input.value;
if ( v == '' || v == this.getConfig( 'inputTip' ) )
{
this.fireEvent( 'noinput' );
}
});
this.addEvent( 'blur' , function()
{
this._lastInput = null;
});
XN.event.addEvent( input , 'click' , function( e )
{
XN.event.stop( e || window.event );
});
XN.event.addEvent( input , 'keydown' , function( e )
{
This._userInput = true;
e = e || window.event;
if ( e.keyCode == 13 ) XN.event.stop( e );
This.fireEvent( 'keydown' , e );
});
input.setAttribute( 'AutoComplete' , 'off' );
this.DS = this.getConfig( 'DS' );
};
XN.ui.autoComplete.prototype = $extend( {} , XN.ui.element );
$extend( XN.ui.autoComplete.prototype,
{
input : null,
cache : null,
_userInput : false,
_lastInput : null,
getConfig : function( key )
{
if ( key == 'input' ) return this.config[ 'input' ] || this.config[ 'id' ];
return this.config[ key ];
},
_startCheck : function()
{
var This = this;
this._inputTimer = setInterval(function()
{
if( This._userInput )
{
This._userInput = false;
return;
}
This._checkInput();
},this.getConfig( 'searchDelay' ) * 1000);
},
_endCheck : function()
{
clearInterval( this._inputTimer );
this._inputTimer = null;
},
_checkInput : function()
{
var This = this;
var cv = this.input.value;
if( XN.string.isBlank( cv ) )
{
if ( this._lastInput === '' )
{
return;
}
this._lastInput = '';
this.fireEvent( 'noinput' );
return;
}
if( cv == this._lastInput )
{
return;
}
this._lastInput = cv;
this.fireEvent( 'searchbegin' );
if( this.cache )
{
var result = this.cache.get( cv );
if( result )
{
this.fireEvent( 'searchover' , result );
return;
}
}
if ( !this.DS )
{
XN.log( 'no ds' );
this.fireEvent( 'NO_DS' );
return;
}
this.DS.query( cv , function( r )
{
if( This.cache ) This.cache.add( cv , r );
This.fireEvent( 'searchover' , r );
});
}
});
XN.event.enableCustomEvent( XN.ui.autoComplete.prototype );
(function()
{
var completeMenus = {};
getCompleteMenu = function( id )
{
return completeMenus[ id ];
};
/**
* 自动完成菜单
* @namespace XN.ui
* @class autoCompleteMenu
* @constructor
* @param {Object} p
* @extends XN.ui.autoComplete
*/
XN.ui.autoCompleteMenu = function( p )
{
var This = this;
this._MID = XN.util.createObjID();
completeMenus[ this._MID ] = this;
this.config = this.config || {};
$extend( this.config ,
{
ulClassName : '',
liClassName : '',
liHoverClass : 'm-autosug-hover',
aClassName : '',
noResult : '没有匹配结果',
dataLoading : '正在加载数据...',
noInput : null,
autoSelectFirst : false
} );
XN.ui.autoComplete.call( this , p );
var input = this.input;
var m = $element('div');
m.innerHTML = this.getConfig( 'wrapper' ) || this._wrapper();
this._menuList = m.firstChild;
this._ul = this._menuList.getElementsByTagName( 'ul' )[0];
this.menu = new XN.ui.menu(
{
button : input,
menu : this._menuList,
fireOn : 'manual'
});
this.addEvent( 'keydown' , this._inputOnkeydown );
XN.event.addEvent( this._ul , 'mousedown' , function( e )
{
This._menuOnclick( e || window.event );
});
/*
XN.event.addEvent( this._ul , 'mousemove' , function( e )
{
return This._menuOnmouseover( e || window.event );
});
*/
/*XN.event.addEvent( document , 'click' , function(){
This.menu.hide();
} , false );*/
XN.event.addEvent( input, 'blur', function()
{
This.menu.hide();
});
this.menu.hide();
/*
* 没有输入时关闭菜单
*/
this.addEvent( 'noinput' , function()
{
var tip = this.getConfig( 'noInput' );
if( !tip )
{
this.menu.hide();
return;
}
this._ul.innerHTML = '
* 参数形式如下
* {
* idInputName:'ids',//生成的id字段input的name属性
* nameInputName:'names',//生成的name字段input的name属性
* url:'/friendsSelector.do',//初始化的url
* initParam:{},//初始化参数
* param:{},//查询好友的额外参数
* maxNum:0//最大数量限制，超出时会触发'overMaxNum'事件
* }
*
* @namespace XN.ui
* @class multiFriendSelector
* @constructor
* @param {Object} params
*/
XN.ui.multiFriendSelector = function(params)
{
var This = this;
//ID_PRE ++;
this._ID = XN.util.createObjID();
this.config = this.config || {};
$extend( this.config ,
{
inputName : 'ids',
nameInputName : 'names',
url : '/friendsSelector.do',
initParam : {},
param : {},
noInput : false,
maxNum : -1
});
$extend( this.config , params );
this.frame = $element('div');
var div = $element( 'div' );
div.hide();
document.body.appendChild( div );
div.appendChild( this.frame );
this.frame.innerHTML = [
'' + r.name + '
'; }; this.autoComplete.setMenuWidth(129); this.autoComplete.addEvent( 'keydown' ,function( e ) { This._onInputKeydown(e); }); this.autoComplete.addEvent( 'select' , function( r ) { XN.log( this.input ); this.input.value = ''; This.selectFriend( r ); }); if ( this.getConfig( 'noInput' ) ) { this.input.hide(); } this.fireEvent( 'init' ); }; var proto = XN.ui.multiFriendSelector.prototype = $extend( {} , XN.ui.element ); $extend( proto , { //_friendsContainer : null, //_inputContainer : null, /** * 选择器是否就绪 * @method isReady * @return {Boolean} */ isReady : function() { return this.autoComplete.isReady(); }, isLoading : function() { return this.autoComplete.isLoading(); }, /** * 加载好友数据 * @method loadFriends */ loadFriends : function() { this.autoComplete.loadFriends(); }, /** * 跟据用户id得到一个用户对象 * @method getUserByID * @param {String} id * @return {Object} */ getUserByID : function( id ) { id = String( id ); var rt = null; XN.array.each( this._allFriends , function( i , v ) { if ( String( v.id ) == id ) { rt = v; return false; } } ); return rt; }, getConfig : function( key ) { if ( key == 'inputName' ) return this.config[ 'idInputName' ] || this.config[ 'inputName' ]; return this.config[ key ]; }, getID : function( id ) { return 'mfs_' + this._ID + id; }, getFriendID : function( id ) { return this.getID( 'friend_' + id ); }, getFriendEl : function( id ) { return $( this.getFriendID( id ) ); }, getEl : function( id ) { return $( this.getID( id ) ); }, getFriendsNum : function() { return this.getEl( 'friendsContainer' ).getElementsByTagName( 'a' ).length; }, /** * 获取已选好友的id * @method getSelectedFriends * @return {Array} */ getSelectedFriends : function() { var rt = []; var a = XN.array.build( this.getEl( 'friendsContainer' ).getElementsByTagName( 'a' ) ); XN.array.each( a , function( i , v ) { rt.push( v.uid + '' ); }); return rt; }, /** * 重设选择器 * @method reset */ reset : function() { this.deselectAll(); }, /** * 取消全选 * @method deselectAll */ deselectAll : function() { var els = XN.array.build( this.getEl( 'friendsContainer' ).getElementsByTagName( 'a' ) ); XN.array.each( els , function( i , v ) { XN.element.remove( v ); }); this.fireEvent( 'deselectAll' , this.getIds() ); }, /** * 选择一组好友 * @method selectFriends * @param {Array} a */ selectFriends : function( fs ) { var This = this; XN.array.each( fs , function( i , v ) { This.select( v ); } ); }, /** * 反选一组好友 * @method deselectFriends * @param {Array} a */ deselectFriends : function( fs ) { var This = this; XN.array.each( fs , function( i , v ) { This.deselect( v ); } ); }, /** * 选择一个好友 * @method select * @param {String} id */ select : function( o ) { XN.log( 'mfs select' ); var maxNum = this.getConfig( 'maxNum' ); if ( maxNum !== -1 ) { if ( this.getFriendsNum() == maxNum ) { this.fireEvent( 'overMaxNum' , maxNum ); return; } } if ( isString( o ) ) { o = { id : o, name : this.getUserByID( o ).name }; } if ( this.getFriendEl( o.id ) ) return; this.getEl( 'friendsContainer' ).insertBefore( this.createFriendHTML( o.id , o.name ) , this.getEl( 'inputContainer' ) ); this.fireEvent( 'select' , o.id ); }, /** * 反选一个好友 * @method deselect * @param {String} id */ deselect : function( uid ) { if ( !this.getFriendEl( uid ) )return; this.getFriendEl( uid ).remove(); this.fireEvent( 'deselect' , uid ); }, _parseClickEvent : function( e ) { var el = XN.event.element( e ); XN.event.stop( e ); if ( el && el.getAttribute( 'action' ) ) { this.deselectFriend( el.getAttribute( 'uid' ) ); } }, createFriendHTML : function( uid , uname ) { var a = $element( 'a' ); a.id = this.getFriendID( uid ); a.uid = uid; a.href = '#nogo'; a.className = 'token'; a.tabindex = '-1'; a.innerHTML = [ '\n\n\n\n\n', '\n', uname, '\n\n\n\n\n' ].join( '' ); return a; }, _onInputKeydown : function( event ) { var i = this.getEl( 'inputContainer' ), pa = i.previousSibling, na = i.nextSibling, input = this.input, c = this.getEl( 'friendsContainer' ); if ( event.keyCode == 8 && this.input.value =='' ) { if( pa ) { c.removeChild( pa ); this.deselectFriend( pa.aid ); } return true; } else if ( event.keyCode == 37 && this.input.value == '' ) { if ( pa && pa.tagName.toLowerCase() == 'a' ) { i.parentNode.removeChild( i ); c.insertBefore( i , pa ); setTimeout( function(){input.focus();} , 0 ); } return true; } else if ( event.keyCode == 39 && this.input.value == '' ) { if ( na && na.tagName.toLowerCase() == 'a' ) { i.parentNode.removeChild( i ); XN.dom.insertAfter( i , na ); setTimeout( function(){input.focus();} , 0 ); } return true; } return false } }); XN.event.enableCustomEvent( proto ); /* * patch for old version */ proto.deSelectAll = proto.deselectAll; proto.deSelectFriend = proto.deselectFriend = proto.deselect; proto.selectFriend = proto.select; proto.getSelectedFriendsID = proto.getSelectedFriends; proto.getIds = proto.getSelectedFriends; /* * patch end */ })(); XN.ui.friendSelectorWithMenu = function( p ) { var selector = new XN.ui.friendSelector( p ); var menu = new XN.ui.friendSelectorMenu({ url : selector.getConfig( 'url' ), param : selector.getConfig( 'param' ), multi : false , alignType:p.alignType, offsetX:p.offsetX, offsetY:p.offsetY }); var div = $element( 'div' ); //selector.frame.parentNode.appendChild( div ); div.addChild( selector ); div.addChild( menu ); selector.frame = div; //XN.ui.friendSelectorSynchronous( selector , menu ); selector.addEvent( 'focus' , function() { menu.menu.hide(); }); menu.addEvent( 'select' , function( p ) { var This = this; setTimeout( function() { This.menu.hide(); },30); selector.fireEvent( 'select' , this.getUserByID( p ) ); }); if ( XN.browser.Gecko ) { menu.menu.menu.setOffsetY( 1 ); } return selector; }; XN.ui.multiFriendSelectorWithMenu = function( p ) { var selector = new XN.ui.multiFriendSelector( p ); var menu = new XN.ui.friendSelectorMenu({ url : selector.getConfig( 'url' ), param : selector.getConfig( 'param' ), multi : true }); selector.menuContainer.setContent( menu ); XN.ui.friendSelectorSynchronous( selector , menu ); return selector; }; (function( ns ) { //var ID_PRE = 0; var DEBUG = false; var addEvent = XN.event.addEvent; var log = function( s ) { if ( DEBUG ) XN.log ( isString( s ) ? 'ui.tabView:' + s : s ); return s; }; /** * tabview * @namespace XN.ui * @class tabView * @constructor * @param {Object} params */ ns.tabView = function( params ) { this.config = { selectedClass : 'select', event : 'click', alwaysReload : false, mouseOverDelay : 0.2 }; $extend( this.config , params ); this.init(); }; ns.tabView.prototype = { _tabs : null, _currentTab : null, _idPre : null, _tabIndex : 0, init : function() { this._idPre = XN.util.createObjID(); this._tabs = []; }, getConfig : function( key ) { if ( key == 'activeClass' ) return this.config[ 'activeClass' ] || this.config[ 'selectedClass' ]; return this.config[ key ]; }, _getID : function( el ) { log( '_getID start' ); log( 'param:' ); log( el ); if ( isString( el ) ) return log( el ); if ( el.id ) return log( el.id ); log( 'do not have id' ); this._tabIndex ++; el.setAttribute( 'id' , 'tabview_' + this._idPre + '_' + this._tabIndex ); return log( el.id ); }, //get tab obj by key or element id or element refer _getTab : function( id ) { log( '_getTab start' ); log( 'param:id' ); log( id ); if ( !id ) return log( id ); if ( id.label ) return log( id ); var key = this._getID( id ); log( 'key:' + key ); var tabs = this._tabs; log( 'all tabs' ); log( tabs ); for ( var i = tabs.length - 1 ; i >= 0 ; i -- ) { if ( tabs[ i ].key == key ) { log( '_getTab end' ); return log( tabs[ i ] ); } } log( '_getTab end' ); return log( null ); }, /** * @method getCurrentTab * @return {Object} */ getCurrentTab : function() { return this._getTab( this._currentTab ); }, /** * @method setCurrentTab * @param {String} tab id * @param {Boolean} forceReload * @return {Object} this */ setCurrentTab : function( tab , forceReload ) { log ( 'setCurrentTab start' ); var oldC = this.getCurrentTab(); var nowC = this._getTab( tab ); log ( 'old current:' ); log( oldC ); log( 'now current:' ); log( nowC ); if ( oldC && oldC.key == nowC.key && !forceReload ) return; if ( oldC ) this._deactiveTab( oldC ); this._activeTab( nowC ); this._setCurrentTab( nowC ); log( 'setCurrentTab end' ); this.fireEvent( 'change' , nowC ); return this; }, /** * @method reset * @return {Object} this */ reset : function() { var tab = this.getCurrentTab(); if ( tab ) { this._deactiveTab( tab ); } this._setCurrentTab( null ); return this; }, _activeTab : function( tab ) { log( '_activeTab:' ); log( tab ); tab.getEl( 'label' ).addClass( this.getConfig( 'activeClass' ) ); if ( tab.content ) tab.getEl( 'content' ).show(); tab.onActive( tab ); log( '_activeTab end' ); }, _deactiveTab : function( tab ) { //防止元素被销毁 if ( tab.getEl( 'label' ) ) { tab.getEl( 'label' ).delClass( this.getConfig( 'activeClass' ) ); } if ( tab.content ) tab.getEl( 'content' ).hide(); tab.onInactive( tab ); }, _setCurrentTab : function( tab ) { log( '_setCurrentTab start' ); tab = this._getTab( tab ); log( 'currentTab:' ); log( tab ); this._currentTab = tab ? tab.key : null; log( 'this._currentTab' ); log( this._currentTab ); log( '_setCurrentTab end' ); }, /** * @method addTab * @param {Object} t * @return {Object} this */ addTab : function( t ) { log( 'addTab start' ); log( 'params:' ); log( t ); var This = this; var tab = { onActive : XN.func.empty, onClick : XN.func.empty, onInactive : XN.func.empty, onInit : XN.func.empty, getEl : function( key ) { return $( this[ key ] ); }, active : false }; t.label = this._getID( t.label ); log( 'get label id:' + t.label ); t.key = t.key || t.label; log( 'get key:' +t.key ); if ( t.content ) { t.content = this._getID( t.content ); log( 'get content id:' + t.content ); } $extend( tab , t ); this._tabs.push( tab ); log( 'all tabs' ); log( this._tabs ); if ( tab.active && this._currentTab === null ) { if ( tab.content ) tab.getEl( 'content' ).show(); tab.getEl( 'label' ).addClass( this.getConfig( 'activeClass' ) ); this._setCurrentTab( tab ); } else { if ( tab.content ) tab.getEl( 'content' ).hide(); } var ev = this.getConfig( 'event' ); if ( ev == 'click' ){ addEvent( tab.getEl( 'label' ) , 'click' , function( e ) { e = e || window.event; XN.event.stop( e ); This._eventHander( e , tab.getEl( 'label' ) ); } , false ); } else if ( ev == 'mouseover' ) { var isMouseOn = true; var timer = null; addEvent( tab.getEl( 'label' ) , 'mouseover' , function( e ) { var el = this; isMouseOn = true; timer = setTimeout( function() { if ( !isMouseOn ) return; e = e || window.event; This._eventHander( e , tab.getEl( 'label' ) ); } , This.getConfig( 'mouseOverDelay' ) * 1000 ); } , false ); addEvent( tab.getEl( 'label' ) , 'mouseleave' , function( e ) { isMouseOn = false; if ( timer ) clearTimeout( timer ); } , false ); } tab.onInit( tab ); log( 'addTab end' ); return this; }, _eventHander : function( e , el ) { log( 'on click,el:' ); log( el ); log( 'get tab form by el:' ); var tab = this._getTab( el ); if ( this.getConfig('alwaysReload') ) { this.setCurrentTab( tab, true ); } else { this.setCurrentTab( tab ); } tab.onClick( e , tab ); }, /** * @method refresh * @return {Object} this */ refresh : function() { this._activeTab( this.getCurrentTab() ); return this; }, //patch for old version showTab : function( id , forceReload ) { this.setCurrentTab( id , forceReload ); }, hideAll : function() { this.reset(); } }; XN.event.enableCustomEvent( ns.tabView.prototype ); })( XN.ui ); /** * 强制页面重新渲染 * @method refreshAll */ XN.ui.refreshAll = function() { document.body.style.zoom = 1.1; document.body.style.zoom = 1; }; /** * effect * @class effect * @namespace XN * @static */ XN.effect = { fadeIn:function( element,callBack ) { if(element.fadetimer)return; callBack = callBack || XN.FUNC.empty; var op = 0; element.setOpacity(0); element.style.display = ''; element.fadetimer = setInterval(function(){ XN.Element.setOpacity(element,(op += 0.20)); if(op >= 1){ clearInterval(element.fadetimer); element.fadetimer = null; callBack(element); } },60); }, fadeOut:function(element,callBack){ if(element.fadetimer)return; callBack = callBack || XN.FUNC.empty; var op =1; element.setOpacity(1); element.fadetimer = setInterval(function(){ XN.Element.setOpacity(element,(op -= 0.20)); if(op <= 0){ clearInterval(element.fadetimer); element.fadetimer = null; callBack(element); element.setOpacity(1); } },60); }, gradient:function(element,r,g,b,callBack){ if(element.gradientTimer)return; callBack = callBack || XN.FUNC.empty; element.style.backgroundColor = '#fff'; element.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'; element.gradientTimer = setInterval(function(){ b += 10; element.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + (b >255 ? 255 : b) + ')'; if(b > 255){ clearInterval(element.gradientTimer); element.gradientTimer = null; callBack(element); } },60); }, slideOpen:function(element){ if(element.slidetimer)return; if(!element.slideHeight){ var _position = element.getStyle('position'); element.setStyle('position:absolute;left:-99999px;top:-99999px;'); element.show(); element.slideHeight = element.offsetHeight; element.hide(); element.setStyle('position:' + _position + ';left:auto;top:auto;'); } var eh = element.slideHeight,h = 0; var step = parseInt(eh / 10); element.style.height = '0px'; element.style.display = ''; element.style.overflow = 'hidden'; element.slidetimer = setInterval(function(){ element.style.height = (h += step) + 'px'; if(h >= eh){ clearInterval(element.slidetimer); element.slidetimer = null; element.style.height = eh; element.style.overflow = element.slideOverflow; } },50); }, slideClose:function(element){ if(element.slidetimer)return; var eh = element.offsetHeight,h = eh; element.slideHeight = eh; element.slideOverflow = element.getStyle('overflow'); element.style.overflow = 'hidden'; var step = parseInt(eh / 10); element.slidetimer = setInterval(function(){ element.style.height = (h -= step) + 'px'; if(h <= 0){ clearInterval(element.slidetimer); element.slidetimer = null; element.style.display = 'none'; element.style.height = eh; element.style.overflow = element.slideOverflow; } },50); }, scrollTo:function(element,speed,callBack){ if(element.scrolltimer)return; speed = speed || 10; callBack = callBack || XN.FUNC.empty; var d = element.realTop(); var i = XN.EVENT.winHeight(); var h = document.body.scrollHeight; var a = XN.EVENT.scrollTop();; var offsetTop = null; if(d > a){ if(d + element.offsetHeight < i + a )return; element.scrolltimer = setInterval(function(){ a +=Math.ceil((d-a) / speed) || 1; window.scrollTo(0,a); if(a == d){ clearInterval(element.scrolltimer); element.scrolltimer = null; } },10); }else{ element.scrolltimer = setInterval(function(){ a += Math.ceil((d-a) / speed) || -1; window.scrollTo(0,a); if(a == d){ clearInterval(element.scrolltimer); element.scrolltimer = null; } },10); } } }; /* * patch for old version */ XN.EFFECT = XN.Effect = XN.effect; /** * Motion - 动画组件 * * @author mingcheng