之前我写过一篇文章是通过javascript获取光标的位置——javascript获取光标位置以及设置光标位置。由于产品需要在留言板的光标处上插入表情，这样就用到了javascript在光标位置插入内容的功能了~其实原理很简单，IE下可以通过document.selection.createRange();来实现，而Firefox（火狐）浏览器则需要首先获取光标位置，然后对value进行字符串截取处理。不多说了~直接上我写的一个jQuery在光标位置插入内容插件吧~
jQuery库的发展迅速（刚刚发布的jQuery的1.4），越来越多的人正在使用这个有用的JavaScript库。这意味着，需要越来越多的有用jQuery的提示，技巧和解决方案来提供。这就是为什么我创建了26个实用的jQuery的提示、技巧和解决方案的小清单。
$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
当鼠标获得焦点、失去焦点的时候，input输入框文字处理：
$(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($('input.text1')); }); function textFill(input){ //input focus text function var originalvalue = input.val(); input.focus( function(){ if( $.trim(input.val()) == originalvalue ){ input.val(''); } }); input.blur( function(){ if( $.trim(input.val()) == '' ){ input.val(originalvalue); } }); }
$(document).ready(function() { //Example 1: Every link will open in a new window $('a[href^="http://"]').attr("target", "_blank"); //Example 2: Links with the rel="external" attribute will only open in a new window $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); });// how to use
<a href="http://www.opensourcehunter.com" rel="external">open link</a>
今天看了一下cssrain的评论，都提出来了再IE6下wBox背景显示不全，不能完全覆盖页面的问题，在wBox开发中，IE6下的背景最初我是通过CSS hack来解决的，代码如下：
* html #wBox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }
但是这就造成了一个bug：当IE6下，页面高度不够的时候，就会出现背景不能完全覆盖整个页面的bug。
下午的时候，我及时的修改了这个bug，通过计算页面高宽以及window的高宽，取其最大值作为背景层的高宽，这样就解决了wBox在IE6 下背景显示不全的bug啦~
最新的wBox下载地址：http://code.google.com/p/follow5api/downloads/list
经过大约一周的时间，wBox终于跟大家见面啦，这是断桥残雪写的第一个jQuery插件，开发时间比较急促，所以有不足之处希望大家指出。
wBox——轻量级的弹出窗口jQuery插件，基于jQuery1.4开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面……
下面简单介绍下wBox的使用方法：
html代码如下：
<a href="#nosee" class='wBox'>这是一个隐藏wBox</a> <div id="nosee" style="display:none">这里是个隐藏的id为nosee的DIV</div> <a href='http://js8.in/wbox/001.jpg' class='wBox'>这是一个image wBox</a>
js代码如下：
$(".wBox").wBox();
这样就建立了一个最简单的wBox.
最近在做wBox开发中，需要做一个图片的幻灯片效果，为了方便加载速度，我使用了new Iamge的对象方法来预加载图片，当图片onLoad就运行一个函数来计算图片的大小尺寸，进行jQuery动画，以及切换图片src，在firefox下开发完成后，可是到了IE下进行调试总是不会触发onload事件，不管是IE8、IE7还是万恶的IE6，都不会触发onload事件，我很迷惑，后来在google上找到了解决的方法：一下为引用部分
最初的代码如下：
var img = new Image; img.src = "test.gif"; img.onload = function(){ alert ( img.width ); };
这段代码看着没什么问题，但是为什么onload没有被IE调用呢？因为IE会缓存图片，第2次加载的图片，不是从服务器上传过来的，而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢？我于是我测试了以下代码，成功了～
var img = new Image; img.onload = function(){ alert ( img.width ); }; img.src = "test.gif";
我把onload写到前面去，先告诉浏览器如何处理这张图片，再指定这张图片的源，这样就正常了。所以，不是IE没有触发onload事件，而是因为加载缓冲区的速度太快，以至于没有运行到img.onload的时候，onload事件已经触发了。这让我想到了Ajax，我们在写xmlhttp的时候，都是先指定onstatechange的回调函数，然后再send数据的，道理是一样的。
在360开发中，使用了我写的一个jQuery wBox插件，可是这个wBox只是根据项目需要进行的修改，没有加上拖拽功能，而我正在写新的wBox插件加上了简单的拖拽功能，wBox已经进行到最后样式修改、程序调试阶段，基本功能已经实现。言归正传，结合wBox部分源代码说说jQuery的拖拽功能实现。
jQuery wBox插件预览
要写一个拖拽效果，必须区分开mousedown，mouseup，mousemove 三个鼠标的不同状态，当mousedown的时候激发拖拽，表示拖拽开始，当mouseup的时候自然拖拽就结束，而mousemove的时候是拖拽的过程，这个过程就要不停的获取鼠标的位置，根据鼠标运动到得位置设置要拖拽的目标div的位置，具体就不解释啦，很简单的原理，很简单的代码，放出wBox drag部分的代码，希望对大家有用，C为拖拽的目标对象： 继续阅读全文……
今天我看见一个比较不错的jQuery幻灯片教程，比我之前的文章《两个简单的jQuery幻灯片实例》写的更为详细，并且有框架布局的演示图片，特地转载来，部分英文不翻译了，很简单的~
Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.
<div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#"><img src="reel_1.jpg" alt="" /></a> <a href="#"><img src="reel_2.jpg" alt="" /></a> <a href="#"><img src="reel_3.jpg" alt="" /></a> <a href="#"><img src="reel_4.jpg" alt="" /></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div>
css+jQuery实现滑动幻灯片实例教程
jQuery1.4已经发布接近一个月了，而最新的jQuery1.4.1也已经发布~今天在itFeed上发现已经出现了jQuery1.4.1的中文参考文档啦，迅速转载一下：
新鲜出炉，更新了大量内容，应该还有一些BUG，欢迎纠错：
http://code.google.com/p/jquery-api-zh-cn/downloads/list
本来更早出来的，结果半路又杀出1.4.1，而且发现bind、live还有ajax等方法有大量更新，所以重新翻译这三个方法，消耗了大把时间。所以今天才发出来。
jQuery1.4.1中文文档在线地址：http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml
继续阅读：《jQuery1.4正式版发布啦》、《jQuery Easing动画效果扩展》、《jQuery1.4正式版新功能及性能测试》、《jQuery1.4十五大新功能实例精讲》
Ajax应用中容易导致浏览器的前进后退按钮失效，不产生前进后退功能，在本文中断桥残雪就通过改变location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效的问题，此方法兼容IE6+，Firefox，chrome，Safari，Opera等浏览器。
在去年断桥残雪已经写了一篇使用iframe来解决Ajax前进后退的方法，也提到了通过改变hash的方法来解决这个问题，这也是比较方便的方法，而使用iframe实现Ajax前进后退可以在不改变浏览器地址栏地址的前提下通过iframe地址的变化来“欺骗”浏览器产生前进后退，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值使用最多的方式是 “返回顶部” 功能。
继续阅读全文……