标签为: "jquery" 的文章

javascript在光标位置插入内容

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

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

阅读更多…

2010年5月13日  断桥残雪
6  条评论
JavaScript ,

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

<a href="http://www.opensourcehunter.com" rel="external">open link</a>

阅读更多…

2010年3月17日  断桥残雪
1  条评论
JavaScript

最新版wBox 解决IE6 背景太小bug

今天看了一下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

2010年3月11日  断桥残雪
4  条评论
JavaScript, 更新公告 , , ,

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代码如下：

<a href="#nosee" class='wBox'>这是一个隐藏wBox</a>
<div id="nosee" style="display:none">这里是个隐藏的id为nosee的DIV</div>
<a href='http://www.js8.in/wbox/001.jpg' class='wBox'>这是一个image wBox</a>

js代码如下：

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

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

阅读更多…

2010年3月8日  断桥残雪
7  条评论
JavaScript , ,

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

2010年3月8日  断桥残雪
2  条评论
JavaScript, 网络技术 , ,

jQuery实现拖拽功能

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

jQuery wBox插件预览

jQuery wBox插件预览

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

2010年3月5日  断桥残雪
没有评论
JavaScript ,