javascript在光标位置插入内容

之前我写过一篇文章是通过javascript获取光标的位置——javascript获取光标位置以及设置光标位置。由于产品需要在留言板的光标处上插入表情，这样就用到了javascript在光标位置插入内容的功能了~其实原理很简单，IE下可以通过document.selection.createRange();来实现，而Firefox（火狐）浏览器则需要首先获取光标位置，然后对value进行字符串截取处理。不多说了~直接上我写的一个jQuery在光标位置插入内容插件吧~

jQuery在光标位置插入内容插件代码

前端开发

more >>

通过javascript实现整站黑白效果

前天是哀悼日，急急忙忙的写了一篇关于通过CSS使网站实现黑白效果的文章（悼念地震，网站变灰CSS代码），可是这个方法使用的是IE的滤镜，具有一定的局限性。今天在网上看到有人推荐的一个不错的方法，试了一下，效果还是可以的，可以自定义让网页的某一部分变成灰度颜色(黑白)，演示效果：http://james.padolsey.com/demos/grayscale/。并且支持Firefox，chrome，IE6+。

使用方法：

  1. 首先在网页中引入grayscale.js文件。
  2. 执行grayscale函数即可。
grayscale(document.body);  //整站变成黑白效果
grayscale(getElementById(el));//部分变黑白效果
前端开发

悼念地震，网站变灰CSS代码

为了悼念地震中遇害的同胞，国家规定明天开始悼念日~下面贴出来使用CSS的IE滤镜代码实现网站变灰白的效果代码，只在IE下有效~
首先确定贵网站使用的是标准的doctype头，下面是html开头代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

<html xmlns="http://www.w3.org/1999/xhtml">

然后使用下面的CSS代码

html {
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

如果贵网站有Flash，那么请在<object>和<&/object>之间插入一下代码：

<param value=”false” name=”menu”/>
<param value=”opaque” name=”wmode”/>
前端开发

25大实用的jQuery技巧和解决方案

jQuery库的发展迅速（刚刚发布的jQuery的1.4），越来越多的人正在使用这个有用的JavaScript库。这意味着，需要越来越多的有用jQuery的提示，技巧和解决方案来提供。这就是为什么我创建了26个实用的jQuery的提示、技巧和解决方案的小清单。

1. 去除页面的右键菜单

$(document).ready(function(){  
    $(document).bind("contextmenu",function(e){  
        return false;  
    });  
});

2、搜索输入框文字的消失

当鼠标获得焦点、失去焦点的时候，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); }  
    });  
}

3、新窗口打开页面

$(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 

[open link](http://www.opensourcehunter.com)
前端开发

more >>

jQuery插件--wBox发布

经过大约一周的时间，wBox终于跟大家见面啦，这是断桥残雪写的第一个jQuery插件，开发时间比较急促，所以有不足之处希望大家指出。

wBox——轻量级的弹出窗口jQuery插件，基于jQuery1.4开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面……

  1. 背景透明度可以根据实际情况进行调节，甚至不设置背景
  2. 可以根据需要添加wBox标题
  3. 支持设置窗口位置，默认为在中心显示
  4. 支持callback函数
  5. 支持html内容自定义
  6. img灯箱看图功能
  7. 支持在wBox显示#ID的内容
  8. 支持Ajax页面内容
  9. 支持设置背景，不设置背景
  10. 支持wBox拖拽功能
  11. ESC键，或者在背景上双击即可关闭wBox
  12. .wBoxClose的内容click可以关闭wBox，无论是组装的html，还是隐藏的html，甚至于iframe的内容中的.wBoxClose
    下面简单介绍下wBox的使用方法：

最简单的使用方法

  1. 首先下载wBox文件，然后将wBox中的
  2. 引入wbox.js文件
  3. 引入wbox.css文件
  4. 注意：wBox源代码文件夹中的图片要跟js，css放在相同的目录下,loading.gif要跟你页面放在同一个目录
    html代码如下：
[这是一个隐藏wBox](#nosee)
<div id="nosee" style="display:none">这里是个隐藏的id为nosee的DIV</div>
[这是一个image wBox](http://js8.in/wbox/001.jpg)

js代码如下：

$(".wBox").wBox();

这样就建立了一个最简单的wBox.


前端开发

more >>

IE中Image.onload失效的问题

最近在做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数据的，道理是一样的。

前端开发

jQuery实现拖拽功能

在360开发中，使用了我写的一个jQuery wBox插件，可是这个wBox只是根据项目需要进行的修改，没有加上拖拽功能，而我正在写新的wBox插件加上了简单的拖拽功能，wBox已经进行到最后样式修改、程序调试阶段，基本功能已经实现。言归正传，结合wBox部分源代码说说jQuery的拖拽功能实现。
jQuery wBox插件预览

要写一个拖拽效果，必须区分开mousedown，mouseup，mousemove 三个鼠标的不同状态，当mousedown的时候激发拖拽，表示拖拽开始，当mouseup的时候自然拖拽就结束，而mousemove的时候是拖拽的过程，这个过程就要不停的获取鼠标的位置，根据鼠标运动到得位置设置要拖拽的目标div的位置，具体就不解释啦，很简单的原理，很简单的代码，放出wBox drag部分的代码，希望对大家有用，C为拖拽的目标对象：

前端开发

more >>

使用CSS设置文字反选的背景颜色

在计算机操作中经常会有反选出现，系统一般会根据选择区域的颜色，显示出补色。但windows默认的文字选择时，背景为蓝色，前景色为白色，如果背景是深色，则文字为蓝色，背景变成白色。如下图所示：

反选默认样式

能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。查看示例(请在非IE浏览器下查看)

从博客里可以看到PPK给出了如下的CSS代码：

::-moz-selection{    /*针对Firefox*/
    background:#cc0000;
    color:#fff;
}

::selection {
    background:#cc0000;
    color:#fff;
}

code::-moz-selection {  /*code是标签选择器，可以换成p或span等*/
    background: #333333;
}

code::selection {
    background: #333333;
}

通过以上代码可以看出，你完全可以给不同的容器定义不同的反选背景颜色，

前端开发