通过JSONP实现完美跨域

以前我经常在博客说JSONP，例如我的WordPress天气插件就是通过JSONP来调用的天气数据，今天就说说通过JSONP实现跨域的应用~

什么是JSONP

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用 html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

对于上面的解释，我们可以简单这样理解：JSONP就是可以通过JavaScript文件进行跨域通讯的方式，例如：现在各大网站风靡的搜索提示，搜狗云输入法
注意：JSONP服务器端代码需要充分做好安全措施。

前端开发

more >>

IE onchange事件触发bug？

今天遇到了IE一个onchange事件的bug，此bug存在于IE所有的版本（6,7,8）不知道是不是bug，还是IE故意这样设计的？姑且不做评价，我们来看看IE onchange事件的重现过程：

给input等控件添加onchange事件，例如input的checkbox（radio等），在IE下点击选中，并没有触发onchange事件，而需要再次失去焦点（点击页面的任何地方）的时候才可以触发onchange事件，而在Firefox下是点击选中checkbox既可以触发onchange事件的~

bug重现代码

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>IE onchange event bug</title></head>
<body>
<input type="checkbox" value="1" onchange="alert(this.value);" id="demo1"/>
<label for="demo1">demo1</label>
<input type="checkbox" value="2" onchange="alert(this.value);" id="demo2"/>
<label for="demo2">demo2</label>
</body></html>

解决方法

  1. 在jQuery1.4.2中绑定change事件是完全可以解决的，而在jQuery1.3.2中绑定change事件是不行的，我们可以通过click事件来绑定
  2. 如果不怕麻烦也不介意绑定两次事件，可以使用IE自带的onpropertychange事件绑定change事件，断桥残雪测试是可以的，不过这样子在IE下就绑定了两次change事件，不推荐这个方法，如果是checkbox，radio等还是使用click事件来处理吧
前端开发

jQuery弹出框插件wBox 1.0正式发布

jQuery插件wBox 1.0正式发布——经过一系列的wBox需求分析，进行了wBox的代码重构，去除了一些鸡肋的功能~根据公司项目的需要进行了功能的调整，并且在界面上进行了美化处理~

wBox截图

查看wBox代码实例wBox1.0下载

wBox新功能及其变化

  1. 优化代码~
  2. 美化界面~
  3. 默认可拖动，drag为false关闭
  4. 新增wBox关闭方法：wBox.close()
  5. 新增wBox打开方法：wBox.showBox()
  6. 新增wBox定时关闭设置：通过参数timeout设置定时关闭时间
  7. 新增在不触发click事件的前提，显示wBox，$(s).wBox({show:true})
  8. 去除灯箱功能（准备做一个单独的jQuery灯箱插件）
  9. 去除设置窗口位置
前端开发

more >>

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));//部分变黑白效果
前端开发

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