$.messager.show(“<font
color=’red’>提示信息</font>”,”<a
href=’);

String.prototype.trim = function () {
return this .replace(/^\s\s*/, ” ).replace(/\s\s*$/, ” );
}

//变量定义
var listBox=iBase.GetByClass(‘js’,’div’);
var
navItem=iBase.Id(‘demo’).getElementsByTagName(‘h2’);//此处将jQ区块中的h2也取到了,所以页面会有个小小的错误
var
icoItem=null,boxItem=null,boxDisplay=null,elemIndex=null,elemParent=null;
//初始化展开第一个
for(var i=0; i < listBox.length;i++){
iBase.GetByClass(‘box’,’div’,listBox[i])[0].style.display=’block’;
listBox[i].getElementsByTagName(‘span’)[0].innerHTML=’-‘;
}
//遍历所有点击项
for(var i=0; i < navItem.length;i++){
navItem[i].onclick=function(){
elemParent=iBase.Parents(this,’js’);//获取当前点击所在区块
navItem=elemParent.getElementsByTagName(‘h2’);//获取当前区块下的点击项
icoItem=elemParent.getElementsByTagName(‘span’);//获取当前区块下的展开关闭
boxItem=iBase.GetByClass(‘box’,’div’,elemParent);//获取需要控制的区块
elemIndex=iBase.Index(this,navItem);//获取当前点击在当前区块点击项中的索引
//切换展开关闭图标
icoItem[elemIndex].innerHTML= icoItem[elemIndex].innerHTML==’-‘ ?
‘+’ : ‘-‘;
if(iBase.AttrStyle(boxItem[elemIndex],’display’)==’block’){
//控制项展开状态下,隐藏当前,展开其他的第一项
//此处有个展开0/1的判断,因为当点击第一个时是不能再展开第一个的
boxItem[elemIndex].style.display=’none’;
if(elemIndex==0){
boxItem[1].style.display=’block’;
icoItem[1].innerHTML=’-‘
}else{
boxItem[0].style.display=’block’
icoItem[0].innerHTML=’-‘
}
}else{
//控制项展开状态下,展开当前,隐藏其他项
boxItem[elemIndex].style.display=’block’;
for(var k=0;k < boxItem.length; k++){
if(k!=elemIndex){
boxItem[k].style.display=’none’;
icoItem[k].innerHTML=’+’;
}
}
}
}
}

1.$.messager.lays(width,
height);

复制代码 代码如下:

}

该方法主要定义窗口以什么样的方式和速度呈现。

String.prototype.trim = function () {
var str = this ,
whitespace = ‘
\n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000’
;
for ( var i = 0,len = str.length; i < len; i++) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(i);
break ;
}
}
for (i = str.length – 1; i >= 0; i–) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(0, i + 1);
break ;
}
}
return whitespace.indexOf(str.charAt(0)) === -1 ? str : ” ;
}

//遍历所有的点击项
_navItem.each(function(i){
$(this).click(function(){
//找到当前点击父元素为listbox(单个区块)的元素
_parents=$(this).parents(‘.listbox’);
_navItem=_parents.find(‘h2’);//此区块中的点击项
_icoItem=_parents.find(‘span’);//此区块中的展开关闭图标
_boxItem=_parents.find(‘div.box’);//此区块中展开关闭项
_index=_navItem.index(this);//取得当前点击在当前区块下点击项中的索引值
if(_boxItem.eq(_index).is(‘:visible’)){
//若当前点击项下的展开关闭项是显示的,则关闭,同时展开另外项中的第一个
_boxItem.eq(_index).hide().end().not(‘:eq(‘+_index+’)’).first().show();
_icoItem.eq(_index).text(‘+’).end().not(‘:eq(‘+_index+’)’).first().text(‘-‘);
}else{
//若当前点击项下的展开关闭项是隐藏的,则展开,同时隐藏其他项
_boxItem.eq(_index).show().end().not(‘:eq(‘+_index+’)’).hide();
_icoItem.eq(_index).text(‘-‘).end().not(‘:eq(‘+_index+’)’).text(‘+’);
}
});
});
});

如果使用默认的标题,则将title设置为0,另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭消息框,可将time设置为0。

String.prototype.trim = function () {
var str = this ,
str = str.replace(/^\s+/, ” );
for ( var i = str.length – 1; i >= 0; i–) {
if (/\S/.test(str.charAt(i))) {
str = str.substring(0, i + 1);
break ;
}
}
return str;
}

需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块.
要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏,
则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时,
展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定.
但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素,
再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本,
用同样的思路写了个jQ版本. 时间关系, 写的也比较零散, 就没有封装. 其实,
对这种思路也不是很满意, 感觉太散了, 哪位大师有更好的思路请赐教.
澳门微尼斯人手机版 1
jQ版区块的标题, 会有一个Js错误, 那是因为获取Js版下的h2时, 我偷了个懒,
把jQ的也遍历进去了. 我想, 实际应用中, 也不会有人同一个效果,
一边用Js一边用jQ吧. 核心代码点此查看样例

$.messager.show(0,
“这是一个提示框”,5000);

这次是用懒惰匹配顶替非捕获分组,在火狐中得到改善,IE没有上次那么疯狂。
实现10

//原生Js版本 ***** start
window.onload=function(){
//共用函数区
var iBase={
//document.getElementById
Id: function(name){return document.getElementById(name)},
//通过class获取元素
GetByClass: function(name,tagName,elem){
var c=[];
var re=new RegExp(‘(^|\\s)’+name+'(|\\s$)’);
var e=(elem || document).getElementsByTagName(tagName || ‘*’);
for(var i=0; i < e.length; i++){
if(re.test(e[i].className)){
c.push(e[i]);
}
}
return c;
},
//获取样式属性
AttrStyle: function(elem,attr){
if(elem.attr){
return elem.style[attr];
}else if(elem.currentStyle){
return elem.currentStyle[attr];
}else if(document.defaultView &&
document.defaultView.getComputedStyle){
attr=attr.replace(/([A-Z])/g,’-$1′).toLowerCase();
return
document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
},
//获取祖辈元素中符合指定样式的元素
Parents: function(elem,name){
var r=new RegExp(‘(^|\\s)’+name+'(|\\s$)’);
elem=elem.parentNode;
if(elem!=null){
return r.test(elem.className) ? elem : iBase.Parent(elem,name) ||
null;
}
},
//取索引值
Index: function(cur,obj){
for(var i=0; i < obj.length; i++){
if(obj[i]==cur){
return i;
}
}
}

2.$.messager.anim(type,speed);

//String.prototype使用
//批量替换,比如:str.ReplaceAll([/a/g,/b/g,/c/g],[“aaa”,”bbb”,”ccc”])
String.prototype.ReplaceAll=function (A,B) {
澳门微尼斯人手机版,var C=this;
for(var i=0;i<A.length;i++) {
C=C.replace(A[i],B[i]);
};
return C;
};
// 去掉字符两端的空白字符
String.prototype.Trim=function () {
return this.replace(/(^[\t\n\r]*)|([\t\n\r]*$)/g,”);
};
// 去掉字符左边的空白字符
String.prototype.LTrim=function () {
return this.replace(/^[\t\n\r]/g,”);
};
// 去掉字符右边的空白字符
String.prototype.RTrim=function () {
return this.replace(/[\t\n\r]*$/g,”);
};
// 返回字符的长度,一个中文算2个
String.prototype.ChineseLength=function()
{
return this.replace(/[^\x00-\xff]/g,”**”).length;
};
// 判断字符串是否以指定的字符串结束
String.prototype.EndsWith=function (A,B) {
var C=this.length;
var D=A.length;
if(D>C)return false;
if(B) {
var E=new RegExp(A+’$’,’i’);
return E.test(this);
}else return (D==0||this.substr(C-D,D)==A);
};
// 判断字符串是否以指定的字符串开始
String.prototype.StartsWith = function(str)
{
return this.substr(0, str.length) == str;
};
// 字符串从哪开始多长字符去掉
String.prototype.Remove=function (A,B) {
var s=”;
if(A>0)s=this.substring(0,A);
if(A+B<this.length)s+=this.substring(A+B,this.length);
return s;
};

演示地址:
打包下载:
本人来自Mr.Think的博客

该方法主要定义窗口显示的内容,以及窗口显示多长时间后进行隐藏。

复制代码 代码如下:

//jQuery版本 ***** start
$(function(){
//变量定义区
var _listBox=$(‘.jq’);
var _navItem=$(‘.jq>h2’);
var _boxItem=null, _icoItem=null, _parents=null, _index=null;

$.messager.anim(“show”,1000);
//以show的动画方式显示

String.prototype.trim = function () {
return this .replace(/^\s*(\S*(\s+\S+)*)\s*$/, ‘$1’ );
}

复制代码 代码如下:

$(function () {
$.messager.lays(200, 200);
$.messager.anim(‘fade’, 1000);
$.messager.show(“提示信息”, “<a
href=’);
});

和实现1很相似,但稍慢一点,主要原因是它最先是假设至少存在一个空白符。Prototype.js使用这种实现,不过其名字为strip,因为Prototype的方法都是力求与Ruby同名。
实现3

, 同一个页面, 有多组(不固定),
每组区块数量不一定一样的小区块. 要求每次只展开一个区块.
实现原理其实很简单, 点击导航, 若它的…

3.最后显示的效果如下图。
澳门微尼斯人手机版 2 
在线演示地址
插件下载:jquery.message.js打包下载地址

复制代码 代码如下:

//初始化第一个展开
_listBox.each(function(i){
$(this).find(‘div.box’).eq(0).show();
$(this).find(‘h2>span’).eq(0).text(‘-‘);
});

复制代码 代码如下:

String.prototype.trim = function () {
var str = this ;
str = str.match(/\S+(?:\s+\S+)*/);
return str ? str[0] : ” ;
}

}

$.messager.anim(“fade”,1000);
//以fadeIn的动画方式显示

String.prototype.trim = function () {
return this .substring(Math.max( this .search(/\S/), 0), this
.search(/\S\s*$/) + 1);
}

, height);
该方法主要用来定义弹出窗口的宽度和高度。 2.$.messager.anim(type,speed);
该方法主要定义窗口以什么样的方式和速度…

String.prototype.trim = function () {
return this .replace(/^\s+/, ” ).replace(/\s+$/, ” );
}

   在明白了message插件中每个方法的作用后,使用起来就很简单了,具体操作如下:

实现10与实现11在写法上更好的改进版,注意说的不是性能速度,而是易记与使用上。和它的两个前辈都是零毫秒级别的,以后就用这个来工作与吓人。
下面是老外给出的比较结果,执行背景是对Magna Carta
这文章(超过27,600字符)进行trim操作。
实现 Firefox 2 IE 6
trim1 15ms < 0.5ms
trim2 31ms < 0.5ms
trim3 46ms 31ms
trim4 47ms 46ms
trim5 156ms 1656ms
trim6 172ms 2406ms
trim7 172ms 1640ms
trim8 281ms < 0.5ms
trim9 125ms 78ms
trim10 < 0.5ms < 0.5ms
trim11 < 0.5ms < 0.5ms
trim12 < 0.5ms < 0.5ms

发表评论

电子邮件地址不会被公开。 必填项已用*标注