//-------------------- mContentLoader.js
/**//*
* Ajax的辅助对象，执行所有与Ajax处理相关的工作
*
*/
var net = new Object();
net.READY_STATE_UNINITIALIZED= 0;
net.READY_STATE_LOADING = 1;
net.READY_STATE_LOADED = 2;
net.READY_STATE_INTERACTIVE = 3;
net.READY_STATE_COMPLETE = 4;
/**//*
* 构造函数
* component指定这个辅助所提供的对象，并假定component有一个ajaxUpdate()方法处理响应，一个handleError()方法处理错误
* url指定这个辅助从服务器端获取数据时调用的url
* mothd指定HTTP请求方法，有效值有GET和POST
* requestParams以key=value格式的字符串组形势指定一组传递给请求的请求参数
*/
net.ContentLoader = function( component, url, method, requestParams ) 
{
this.component = component;
this.url = url;
this.requestParams = requestParams;
this.method = method;
}
net.ContentLoader.prototype = {
getTransport: function() {
var transport;
if ( window.XMLHttpRequest )
transport = new XMLHttpRequest();
else if ( window.ActiveXObject ) {
try {
transport = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(err) {
transport = new ActiveXObject('Microsoft.XMLHTTP');
}
}
return transport;
},
sendRequest: function() {
//if ( window.netscape && window.netscape.security.PrivilegeManager.enablePrivilege)
// netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
var requestParams = []
for ( var i = 0 ; i < arguments.length ; i++ )
requestParams.push(arguments[i]);
var oThis = this;
var request = this.getTransport();
request.open( this.method, this.url, true );
request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function() { oThis.handleAjaxResponse(request) };
request.send( this.queryString(requestParams) );
},
queryString: function(args) {
var requestParams = [];
for ( var i = 0 ; i < this.requestParams.length ; i++ )
requestParams.push(this.requestParams[i]);
for ( var j = 0 ; j < args.length ; j++ )
requestParams.push(args[j]);
var queryString = "";
if ( requestParams && requestParams.length > 0 ) {
for ( var i = 0 ; i < requestParams.length ; i++ )
queryString += requestParams[i] + '&';
queryString = queryString.substring(0, queryString.length-1);
}
return queryString;
},
handleAjaxResponse: function(request) {
if ( request.readyState == net.READY_STATE_COMPLETE ) {
if ( this.isSuccess(request) )
this.component.ajaxUpdate(request);
else
this.component.handleError(request);
}
},
isSuccess: function(request) {
return request.status == 0
|| (request.status >= 200 && request.status < 300);
}
};
//-------------------- mTextSuggest.js
/**//*
* 输入前提示组件，可重用在大部分需要这些功能的应用中，为此考虑一下特征
* 1.不修改HTML标记，只简单修改head部分来注入组件行为
* 2.组件能够使用不同的URL，并为所有配置选项提供合理的默认值
* 3.组件不引入任何全局变量，防止全局变量混乱
* 4.组件使用开源框架，以减少编码工作量，并提高方案的质量和健壮性
*/
/**//*
************************************创建TextSuggest***********************************************
*/
TextSuggest = Class.create();
TextSuggest.prototype = {
/**//*
* 构造函数
* andId：要附加提示行为的文本字段的ID
* url：处理请求的服务器URL
* options：options对象为组件的每一个配置参数提供一个属性
*/
initialize: function(anId, url, options) {
this.id = anId;
this.textInput = $(this.id);
//检测浏览器类型
var browser = navigator.userAgent.toLowerCase();
this.isIE = browser.indexOf("msie") != -1;
this.isOpera = browser.indexOf("opera")!= -1;
this.suggestions = [];
this.setOptions(options);
this.initAjax(url);
this.injectSuggestBehavior();
},
/**//*
* 为options每个属性都指定一个默认值
* 然后，使用在构造时传入的options对象调用Prototype库的extend()方法，来覆盖默认值
* 最后结果是一个合并的options对象，包含默认值和指定的覆盖值
*/
setOptions: function(options) {
this.options = {
suggestDivClassName: 'suggestDiv', //指定用来保存提示的生成div元素的css类名
suggestionClassName: 'suggestion', //指定用来保存每一条提示的生成span元素的css类名
matchClassName : 'match', //指定用来保存匹配用户输入内容的提示部分的span元素的css类名
matchTextWidth : true, //用来指示为提示生成的div是否需要将自身大小设置为与它附加到的文本字段的宽度匹配
selectionColor : '#b1c09c', //为选中的提示的背景颜色指定一个十六进制值
matchAnywhere : false, //指定匹配是只查找字符串的开始位置，还是查找任意位置
ignoreCase : false, //指定匹配是否是区别大小写的
count : 10 //显示最大提示数量
}.extend(options || {});
},
/**//*
************************************支持Ajax***********************************************
*/
//-----------------------文本提示--发送Ajax请求
/**//*
* 发送请求限制
* 如果没有正在处理的请求，就调用callRicoAjaxEngine()来发送请求，反之不发送
* 通过设置一个内部布尔属性this.pendingRequest实现，当Ajax请求发送时值为true，当返回的请求被处理后值为false
* 用来基于服务器的处理速度限制事件的发送速度
*/
sendRequestForSuggestions: function() {
if ( this.handlingRequest ) {
this.pendingRequest = true;
return;
}
this.handlingRequest = true;
this.callRicoAjaxEngine();
},
/**//*
* 使用Rico提供的一个出色的Ajax处理函数
* ajaxEngine这个API支持为请求注册逻辑名，和注册知道如何处理Ajax响应的对象
* ajaxEngine.registerRequest()为一个(可能很长或很怪的)URL注册逻辑名，在发送请求时可以使用这个逻辑名
* ajaxEngine.registerAjaxObject()用来注册一个Ajax处理对象
*/
initAjax: function(url) {
ajaxEngine.registerRequest( this.id + '_request', url );
ajaxEngine.registerAjaxObject( this.id + '_updater', this );
},
/**//*
* 发送请求
* 先将对象的内部状态和options对象的特定属性存入数组callParms
* 再将外部请求参数存入数组callParms
* 通过ajaxEngine.sendRequest.apply( ajaxEngine, callParms )发送
* apply()方法见最后注释
*/
callRicoAjaxEngine: function() {
var callParms = [];
callParms.push( this.id + '_request');
callParms.push( 'id=' + this.id);
callParms.push( 'count=' + this.options.count);
callParms.push( 'query=' + this.lastRequestString);
callParms.push( 'match_anywhere=' + this.options.matchAnywhere);
callParms.push( 'ignore_case=' + this.options.ignoreCase);
var additionalParms = this.options.requestParameters || [];
for( var i=0 ; i < additionalParms.length ; i++ )
callParms.push(additionalParms[i]);
ajaxEngine.sendRequest.apply( ajaxEngine, callParms );
},
//-----------------------文本提示--处理Ajax请求
/**//*
* 处理请求
* 224 先通过createSuggestions()方法将响应解析成提示在内存中的表现形式，保存在suggestions属性中
* 226 如果没找到提示，将探出框隐藏，并清空隐藏字段中的内部值
* 230 如果找到提示，创建下拉框的UI元素，使用提示组装，并显示给用户
* 236 最后将this.handlingRequest重新设置为false，表示响应处理完成
*/
ajaxUpdate: function( ajaxResponse ) {
this.createSuggestions( ajaxResponse );
if ( this.suggestions.length == 0 ) {
this.hideSuggestions();
$( this.id + "_hidden" ).value = "";
}
else {
this.updateSuggestionsDiv();
this.showSuggestions();
this.updateSelection(0);
}
this.handlingRequest = false;
if ( this.pendingRequest ) {
this.pendingRequest = false;
this.lastRequestString = this.textInput.value;
this.sendRequestForSuggestions();
}
},
createSuggestions: function(ajaxResponse) {
this.suggestions = [];
var entries = ajaxResponse.getElementsByTagName('entry');
for ( var i = 0 ; i < entries.length ; i++ ) {
var strText = this.getElementContent(entries[i].getElementsByTagName('text')[0]);
var strValue = this.getElementContent(entries[i].getElementsByTagName('value')[0]);
this.suggestions.push( { text: strText, value: strValue } );
}
},
/**//*
************************************事件处理***********************************************
*/
//行为注入
injectSuggestBehavior: function() {
if ( this.isIE )
this.textInput.autocomplete = "off"; //关闭IE自动完成
var keyEventHandler = new TextSuggestKeyHandler(this); //创建控制器
//Insertion.After由Prototype库提供，添加一个不可见文本字段来防止回车键提交表单
new Insertion.After( this.textInput,
'<input type="text" id="'+this.id+'_preventtsubmit'+'" style="display:none"/>' );
new Insertion.After( this.textInput,
'<input type="hidden" name="'+this.id+'_hidden'+'" id="'+this.id+'_hidden'+'"/>' );
this.createSuggestionsDiv(); //创建UI
},
//TextSuggest的选择处理方法
moveSelectionUp: function() {
//selectedIndex: select对象中当前被选option的下标
if ( this.selectedIndex > 0 ) {
this.updateSelection(this.selectedIndex - 1);
}
},
moveSelectionDown: function() {
if ( this.selectedIndex < (this.suggestions.length - 1) ) {
this.updateSelection(this.selectedIndex + 1);
}
},
updateSelection: function(n) {
var span = $( this.id + "_" + this.selectedIndex );
if ( span ){
span.style.backgroundColor = ""; //清除之前的选择
}
this.selectedIndex = n;
var span = $( this.id + "_" + this.selectedIndex );
if ( span ){
span.style.backgroundColor = this.options.selectionColor;
}
},
//文本输入处理函数
handleTextInput: function() {
var previousRequest = this.lastRequestString; //上次请求的值
this.lastRequestString = this.textInput.value; //现在请求的值
if ( this.lastRequestString == "" )
this.hideSuggestions();
else if ( this.lastRequestString != previousRequest ) {
this.sendRequestForSuggestions(); //数据的Ajax请求
}
},
setInputFromSelection: function() {
var hiddenInput = $( this.id + "_hidden" );
var suggestion = this.suggestions[ this.selectedIndex ];
this.textInput.value = suggestion.text; //更新可见的值
hiddenInput.value = suggestion.value; //更新隐藏的值
this.hideSuggestions();
},
/**//*
************************************提示的弹出框界面***********************************************
*/
//创建DIV
createSuggestionsDiv: function() {
this.suggestionsDiv = document.createElement("div"); //创建DIV
this.suggestionsDiv.className = this.options.suggestDivClassName; //设置样式
var divStyle = this.suggestionsDiv.style; //添加行为样式
divStyle.position = 'absolute';
divStyle.zIndex = 101;
divStyle.display = "none";
this.textInput.parentNode.appendChild(this.suggestionsDiv); //插入到文档中
},
//定位弹出框
positionSuggestionsDiv: function() {
//通过Rico提供的toDocumentPosition()方法来计算文本字段的绝对位置
var textPos = RicoUtil.toDocumentPosition(this.textInput);
var divStyle = this.suggestionsDiv.style;
divStyle.top = (textPos.y + this.textInput.offsetHeight) + "px";
divStyle.left = textPos.x + "px";
if ( this.options.matchTextWidth )
divStyle.width = (this.textInput.offsetWidth- this.padding()) + "px";
},
//计算左边和右边的填充值
padding: function() {
try{
var styleFunc = RicoUtil.getElementsComputedStyle;
var lPad = styleFunc( this.suggestionsDiv, "paddingLeft", "padding-left" );
var rPad = styleFunc( this.suggestionsDiv, "paddingRight", "padding-right" );
var lBorder = styleFunc( this.suggestionsDiv, "borderLeftWidth", "border-left-width" );
var rBorder = styleFunc( this.suggestionsDiv, "borderRightWidth", "border-right-width" );
lPad = isNaN(lPad) ? 0 : lPad;
rPad = isNaN(rPad) ? 0 : rPad;
lBorder = isNaN(lBorder) ? 0 : lBorder;
rBorder = isNaN(rBorder) ? 0 : rBorder;
return parseInt(lPad) + parseInt(rPad) + parseInt(lBorder) + parseInt(rBorder);
}catch (e){
return 0;
}
},
//创建弹出框的内容
updateSuggestionsDiv: function() {
this.suggestionsDiv.innerHTML = ""; //除去以前的内容
var suggestLines = this.createSuggestionSpans(); //创建新内容
for ( var i = 0 ; i < suggestLines.length ; i++ )
this.suggestionsDiv.appendChild(suggestLines[i]);
},
//创建提示列表的条目
createSuggestionSpans: function() {
var regExpFlags = "";
if ( this.options.ignoreCase )
regExpFlags = 'i';
var startRegExp = "^";
if ( this.options.matchAnywhere )
startRegExp = '';
var regExp = new RegExp( startRegExp + this.lastRequestString, regExpFlags );
var suggestionSpans = [];
for ( var i = 0 ; i < this.suggestions.length ; i++ )
suggestionSpans.push( this.createSuggestionSpan( i, regExp ) )
return suggestionSpans;
},
//创建列表的条目span
createSuggestionSpan: function( n, regExp ) {
var suggestion = this.suggestions[n];
var suggestionSpan = document.createElement("span");
suggestionSpan.className = this.options.suggestionClassName;
suggestionSpan.style.width = '100%';
suggestionSpan.style.display = 'block';
suggestionSpan.id = this.id + "_" + n;
suggestionSpan.onmouseover = this.mouseoverHandler.bindAsEventListener(this);
suggestionSpan.onclick = this.itemClickHandler.bindAsEventListener(this);
var textValues = this.splitTextValues( suggestion.text,
this.lastRequestString.length,
regExp );
var textMatchSpan = document.createElement("span");
textMatchSpan.id = this.id + "_match_" + n;
textMatchSpan.className = this.options.matchClassName;
textMatchSpan.onmouseover = this.mouseoverHandler.bindAsEventListener(this);
textMatchSpan.onclick = this.itemClickHandler.bindAsEventListener(this);
textMatchSpan.appendChild( document.createTextNode(textValues.mid) );
suggestionSpan.appendChild( document.createTextNode( textValues.start ) );
suggestionSpan.appendChild( textMatchSpan );
suggestionSpan.appendChild( document.createTextNode( textValues.end ) );
return suggestionSpan;
},
splitTextValues: function( text, len, regExp ) {
var startPos = text.search(regExp);
var matchText = text.substring( startPos, startPos + len );
var startText = startPos == 0 ? "" : text.substring(0, startPos);
var endText = text.substring( startPos + len );
return { start: startText, mid: matchText, end: endText };
},
//列表条目的鼠标事件处理函数
mouseoverHandler: function(e) {
var src = e.srcElement ? e.srcElement : e.target;
var index = parseInt(src.id.substring(src.id.lastIndexOf('_')+1));
this.updateSelection(index);
},
itemClickHandler: function(e) {
this.mouseoverHandler(e);
this.hideSuggestions();
this.textInput.focus();
},
//显示和隐藏弹出框
showSuggestions: function() {
var divStyle = this.suggestionsDiv.style;
if ( divStyle.display == '' )
return;
this.positionSuggestionsDiv();
divStyle.display = '';
},
hideSuggestions: function() {
this.suggestionsDiv.style.display = 'none';
},
getElementContent: function(element) {
return element.firstChild.data;
}
}
//---------------控制器对象，用来担任事件的代理
TextSuggestKeyHandler = Class.create();
TextSuggestKeyHandler.prototype = {
/**//*
* 构造方法
* 控制器保存提示组件的引用和HTML标单的输入字段，通过this.addKeyHandling()为输入字段添加处理函数
*/
initialize: function( textSuggest ) {
this.textSuggest = textSuggest;
this.input = this.textSuggest.textInput;
this.addKeyHandling();
},
//bindAsEventListener()是prototype库提供的一个闭包机制，该机制允许处理函数调用控制器的方法
addKeyHandling: function() {
this.input.onkeyup = this.keyupHandler.bindAsEventListener(this);
this.input.onkeydown = this.keydownHandler.bindAsEventListener(this);
this.input.onblur = this.onblurHandler.bindAsEventListener(this);
if ( this.isOpera )
this.input.onkeypress = this.keyupHandler.bindAsEventListener(this);
},
//处理按下按键
keydownHandler: function(e) {
var upArrow = 38; //上箭头
var downArrow = 40; //下箭头
if ( e.keyCode == upArrow ) {
this.textSuggest.moveSelectionUp();
setTimeout( this.moveCaretToEnd.bind(this), 1 );
}
else if ( e.keyCode == downArrow ){
this.textSuggest.moveSelectionDown();
}
},
//处理放开按键
keyupHandler: function(e) {
if ( this.input.length == 0 && !this.isOpera )
this.textSuggest.hideSuggestions();
if ( !this.handledSpecialKeys(e) )
this.textSuggest.handleTextInput();
},
//几个特殊 按键
handledSpecialKeys: function(e) {
var enterKey = 13; //上箭头
var upArrow = 38; //下箭头
var downArrow = 40; //回车键
if ( e.keyCode == upArrow || e.keyCode == downArrow ) {
return true;
}
else if ( e.keyCode == enterKey ) {
this.textSuggest.setInputFromSelection();
return true;
}
return false;
},
//修改上箭头在文本字段中使光标后退的默认行为
moveCaretToEnd: function() {
var pos = this.input.value.length;
if (this.input.setSelectionRange) {
this.input.setSelectionRange(pos,pos);
}
else if(this.input.createTextRange){
var m = this.input.createTextRange();
m.moveStart('character',pos);
m.collapse();
m.select();
}
},
onblurHandler: function(e) {
if ( this.textSuggest.suggestionsDiv.style.display == '' )
this.textSuggest.setInputFromSelection();
this.textSuggest.hideSuggestions();
}
};
posted on 2007-09-24 09:08
赵曦 阅读(619)
评论(1) 编辑 收藏