2010年1月 文章归类

今天是2010年2月一号，是什么东西审查cn域名的日子，本以为我的2fool.cn的域名已经不复存在，没想到什么东西还做了一件好事，也许是漏网之鱼，也许是时辰未到，不过能坚持多久坚持多久吧，我对cn域名已经不抱有希望了，幸好自己注册了一个js8.in的域名。

周末想了很久关于爱墙字条排序的问题，看《少年包青天3》的时候就在思考这个问题，最后想到了“回”字方法，代码写完，现在的爱墙已经可以随着不同的窗口大小的变化，自动排着整齐的队伍拉~哈哈~爱墙许愿送祝福，现在的用户体验应该比QQ爱墙好，同事要我开源，我还没想好呢~毕竟后台管理程序还没写，目前管理页面是跟WordPress后台绑定的，就是没事做的一个WordPress爱墙管理后台，效果还是不错的~

感兴趣的童鞋记得来踩两脚，发条祝福哦~：爱墙许愿送祝福

今天同事问一个关于光标移动到输入框最后的问题，问题得到了解决（详情请见《Javascript获取光标位置以及设置光标位置》），并且兼容IE、Firefox、Opera，可是又有了新问题：假如输入的内容过多，而Input已经不能显示最后部分的内容，光标即使移动到了最后，也是不能显示出来的。他要的效果是，类似于输入那种效果，当输入文字之后，内容往左走，这样光标就一直在最后显示，而不会出现光标虽然出现在输入框最后可是不能显示出来的现象。

原理

在Firefox我想的方法是模拟一次键盘事件：
如先建立document.createEvent(”KeyboardEvent”)，然后光标移动到输入框最后，然后输入一个空格，在删除空格，这样子光标就会有在输入框最后不出现变为出现了~详细方法请见：Mozilla Developer Center

JS代码

函数setCaretPosition代码如下：
继续阅读全文……

在项目开发中经常遇到input等设置光标位置到最后的问题，今天我查了一下Google，找到了在IE、Firefox、Opera等主流浏览器的获取光标位置（getCursortPosition）以及设置光标位置（setCursorPosition）的函数。

function getCursortPosition (ctrl) {//获取光标位置函数
	var CaretPos = 0;	// IE Support
	if (document.selection) {
	ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;
	return (CaretPos);
}

继续阅读全文……

如果你是一个像我一样的WordPress用户，那么你可能会对WordPress的默认的管理界面感到厌倦。虽然WordPress的用户界面是很好的，但总是有改进的余地。 据消息称，WordPress背后支持公司已决定举办一次WordPress开放源码的设计比赛，用于美化WordPress的用户界面。在本文中，我们将使用一些WordPress插件来替代的默认的WordPress的用户界面，使用户管理界面更加友好美观。

1. Ozh’s Admin Drop Down Menu

Admin Drop Down Menu

Admin Drop Down Menu是最好的WordPress用户界面的插件之一，改变WordPress的管理方面的默认的用户界面。该插件替换所有的管理连接为超漂亮的CSS横向下拉菜单。该插件还可以节省不必要的点击次数，扩大菜单，提高您的效率。 继续阅读全文……

Ajax应用中容易导致浏览器的前进后退按钮失效，不产生前进后退功能，在本文中断桥残雪就通过改变location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效的问题，此方法兼容IE6+，Firefox，chrome，Safari，Opera等浏览器。

在去年断桥残雪已经写了一篇使用iframe来解决Ajax前进后退的方法，也提到了通过改变hash的方法来解决这个问题，这也是比较方便的方法，而使用iframe实现Ajax前进后退可以在不改变浏览器地址栏地址的前提下通过iframe地址的变化来“欺骗”浏览器产生前进后退，hash的方法则是直接改变浏览器地址栏地址，从而使浏览器产生前进后退。

hash导致浏览器产生前进后退原理

浏览器URL的hash值，指的是URL地址之后的#hash部分，我们可以通过JavaScript的location对象的location.hash方法来获得或者改变，但是IE中，不能设置，好像是IE中只能通过连接来实现hash的改变，不过我们可以通过jQuery插件hashchange中的$.locationHash函数来解决这个问题。

比如一个页面的地址是：http://js8.in/#top，那么这个页面的location.hash=”#top”，如果要改变这个地址的hash，可以给location.hash赋值，如：location.hash=”#home”，在IE下可以使用hashchange函数中$.locationHash(hash)给hash赋值。在日常我们常见的使用hash应用中，hash值使用最多的方式是 “返回顶部” 功能。
继续阅读全文……

昨天一个新来的同事关于iframe中进行DOM操作的问题，我说只要是不存在跨域的问题，是可以进行iframe 之间的DOM操作的。并且拿了以前写的两篇文章给新同事进行参考——《用document.domain+iframe实现Ajax跨子域》、《于Ajax在浏览器中产生前进后退的实现方法》。其中关于使用iframe进行跨域的demo，由于更换了新域名js8.in，导致了demo不能使用了，昨天紧急修改了一下，总算是可以使用啦~窃喜~

今天就写个完整的使用JavaScript进行iframe DOM操作的文章啦~跟大家讨论下IE和Firefox下iframe DOM操作的差异，然后写一个父窗口操作子窗口DOM，子窗口操作父窗口DOM，子窗口操作子窗口DOM的实例。经测试，断桥残雪写的iframe DOM操作实例，不仅仅只是在IE和Firefox下使用正常，而是可以兼容所有浏览器的。本文只是借IE和Firefox在iframe DOM操作的不同，进行分析说明JavaScript在DOM操作中两者的不同。

IE和Firefox对iframe document对象的差异性

在IE6、IE7中，我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象，可是这是不符合W3C标准的写法，也是IE下独有的方法，在Firefox下却不可以使用，Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法，今天我在写实例的时候，通过IE8进行测试，IE8也是使用的符合W3C标准的 document.getElementById(ID).contentDocument 方法。所以我们可以写一个在IE和Firefox下通用的获取iframe document对象的函数—getIFrameDOM：

function getIFrameDOM(id){
	return document.getElementById(id).contentDocument || document.frames[id].document;
}

P.S.:如果我们要获取iframe的window对象，而不是document对象，可以使用document.getElementById(ID).contentWindow的方法。这样我们就可以使用子窗口中的window对象了，比如子窗口中的函数。
继续阅读全文……

上周的手脑会议我为了演示jQuery动画的强大功能，顺手做了两个简单的jQuery幻灯片实例，其中一个是运用的fadeIn、fadeOut，另外一个使用的是滚动的效果。因为是给公司内部CSS人员做jQuery动画演示，所以也没有做什么美化，今天顺手放出来，算是凑一篇文章吧~

淡入淡出幻灯片效果

首先我们建一个DIV，里面包括5张img，其中主要css部分代码如下：

#slider1{
	margin:20px auto;
	height:240px;
	width:740px;
	position:relative;
	}	 
#slider1 img{
	position: absolute; 
	top: 0px; 
	left: 0px;
	display:none;
}

原理分析：通过间隔一定时间来改变下一张图片的z-index，实现淡入淡出的幻灯片效果，具体js部分代码如下：

      var now=0;
      setInterval(function (){
          pre=now===0?2:now-1;
          nxt=now===4?0:now+1;
          var div=$("#slider1").children();
          div.eq(now).fadeOut(0,function(){   
		      div.css('z-index',1);       
              div.eq(nxt).css("z-index",6).fadeIn(600);
              div.eq(pre).css("z-index",4);
              div.eq(now).css("z-index",5);
              now=nxt;
          });
      },3000);

继续阅读全文……

哎，天朝要查CN域名的注册信息，本来断桥残雪的信息是正确的，就因为一个字多写了一个三点水，估计我的域名不会通过天朝的审核。而且2fool.cn，9月份刚刚狠心花了50多的银子来续费，本想支持下天朝的域名事业，可是不曾想，天朝竟然因为手机淫秽网站开始大肆封杀cn域名，工信部在广电总局面前变得是那样的不堪一击！

今天看到互联时空的通知，立即联系了客服，客服表现的也是很无奈，我本以为自己的解析已经改到了美国的dreamhost，可是客服说，CNNIC会不让解析！完善信息没有门了，更改信息更是没门，新网更是变态，转个域名有时填表又是快递，还要摁手印！感觉就像杨白劳要卖身一样。本想要客服帮忙，大不了多给点银子就可以过去，没想到在天朝也会出现银子不管用的那天！你说你做个孔子学院竟然3520万，做个中国工会网670万，而你要我们草根站长怎么办？？天理何在，原来在天朝做网站是不需要技术的，是靠关系的！典型的只准州官放火，不准百姓点灯！！

面对天朝的淫威，中国的草根站长只有乖乖的缴械投降，断桥残雪部落格也不例外！于是乎，断桥残雪痛下决心，换域名——JS8.in！js8好记，in有潮人的感觉，很in~

请记住断桥残雪的部落格新域名——JS8.in，懂js的童鞋可能会过目不忘哦~感谢大家的支持，由于订阅地址采用的是feedburner的地址，所以订阅地址不需要更改，再次感谢大家对断桥残雪部落格的支持！再次痛骂天朝的淫威！再再次痛骂工信部的无能+瘪三！！！

今天同事给我一个URL，打开一看，甚是震惊，一个不入流的，没有技术含量的政府网站竟然花费670万！要腐败，要作假也别这样明显啊！当人傻子！断桥残雪很怒！更加可气的是中标的公司（北京中软宏大信息技术有限公司）的技术真的不敢恭维，打开在chrome，FF下他们的首页（http://www.csshd.com/）竟然全乱套！在IE8下也是！就这水平，纳税人的钱就这样白白的扔了！670万！交给一个这么“高科技”的公司做一个不入流、没技术的政府网站！中国政府太有钱了！群众监督哪里去了！我无语啦！

中国工会网扩建项目一期工程（网站改版、内容管理、站内检索、统计分析）成交结果公告TC099R72
采购人名称：中国工会网络中心
采购项目名称：中国工会网扩建项目一期工程（网站改版、内容管理、站内检索、 统计分析）
招标编号：TC099R72
成交结果确定日期：2009年12月25日
成交金额：670万元
成交供应商名称：北京中软宏大信息技术有限公司
成交供应商地址：北京市海淀区学院南路55号中软大厦A座2层，10081

招标采购代理机构：中招国际招标有限公司
项目联系人：陆欣
电话：010-62108160

继续阅读全文……