WEB前端开发

转载自：http://www.splashnology.com/article/50-new-jquery-plugins-for-web-developers/4141/

In spite of the fact that jQuery was released in January 2006 it still holds its position and it’s not surprising, because of its ability to add various elements without the necessity to write bulky and heavy code. Also, it’s getting even much more easier as the community of developers constantly releases plugins that allow web developers to enhance their projects. And to make your task simpler, in order you could just visit our site and choose some of these useful plugins, we’ve picked the best and the newest jQuery pluginsand listed them below.

Textualizer.js

A jQuery plug-in which transitions through blurbs of text, animating each character.

Download

Impress.js

Impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Download

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. 继续阅读：50 New jQuery Plugins For Web Developers»

jQuery  doTimeout插件是延迟执行代码的插件，主要包括延迟，阻止重复执行，支持jQuery的链式调用。

插件主页：http://benalman.com/projects/jquery-dotimeout-plugin/

照着写了几个例子：http://www.css88.com/demo/dotimeout/

jQuery的animate方法对颜色无法做动画效果，例如有个test元素：

<div id="test" style="border: 3px solid #CDCDCD; width: 500px; height: 500px; background-color: #FFFFFF"> 测试元素</div>

我们写一行这样的代码：

$("#test").animate({"backgroundColor":"#FF3300","height":200},5000);

我们可以看到test元素高度会缓慢的变小，而该元素的背景颜色却毫无变化，假设你去对边框做颜色变化的动画效果，也是无法实现的。

再看一下API：http://www.css88.com/jqapi/#p=animate

所有用于动画的属性必须是数字的（除了如下所示）；这些属性如果不是数字的将不能使用基本的jQuery功能。（举个例子，

, 

或者

可以执行动画，但是

不能。）属性值被当作一个像素单位的数字,除非另有说明。单位

 和 

需要指定使用。就是说color，background-color，border-left-color等等这些颜色属性是不能执行动画效果的。

jQuery ui中Effects有一个Color Animation效果（见：http://jqueryui.com/demos/animate/）这里分明能改变文本颜色和背景颜色，看了一下jquery.effects.core.js这个源码，并且抽出源码，改了一个jQuery Color Animations颜色动画插件，对’backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’这几个属性做了动画支持。

见demo页面：http://www.css88.com/demo/Color_Animations/

更多阅读：

http://jquery.offput.ca/highlightFade/

http://www.bitstorm.org/jquery/color-animation/

在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高，这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候，文本框的高度就自动撑高了，大大改善了体验，这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。如图：

新浪微博：@feiwen8772(我的新浪微博，顺便做个广告，^_^)

腾讯微博：@feiwen8772(我的腾讯微博，顺便做个广告，^_^)

这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件-autoTextarea： 继续阅读：【jQuery插件】autoTextarea-文本框根据输入内容自适应高度»

上个月研究学习了《js判断一个元素是否为另一个元素的子元素》，感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展：

//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便：

$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

或者：

$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (".floatLayer"));
});

查看demo：http://www.css88.com/demo/isParent/index1.html

感谢 留痕 网友提交的bug，bug主要原因是我忽视了多个广告轮播和样式重名的问题；经简单的修改已经修复该问题。谢谢 留痕 网友。
==============华丽的分割线================
广告轮播，焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455

这次这个插件主要解决了两个问题:

1.当焦点图只有一张的时候不滚动；

2.当鼠标经过右下角图片选择的控制点上加了延时，避免在用户不经意划过这些控制点的时候切换图片。

具体插件代码：

/**
 * @author 愚人码头
 * User: feiwen
 * Date: 11-7-11
 * Time: 下午4:30
 * Settings:{
 *     speed:滚动速度
 *     timer:滚动的时间间隔
 * }
 */
(function($) {
    $.fn.slideImg = function(settings) {
        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };

    $.fn.slideImg.scllor = function($this, settings) {
        var index = 0;
        var scllorer=$(".img-box li",$this);
        var size=scllorer.size();
        var slideH=scllorer.outerHeight();
        var $selItem=$("<ul></ul>",{
            "class":"flash_item",
            html:function(){
                var $selItemHTML="";
                if(size==1){
                    return;
                }else if(size>1){
                    for(var i=0;i<size ;i++){
                        i==0?$selItemHTML+='<li class="on">'+(i+1)+'':$selItemHTML+='<li class="">'+(i+1)+'</li>';
                    }
                    return  $selItemHTML;
                }
            }
        }).appendTo($this);
        var li = $(".flash_item li",$this);
        var showBox = $(".img-box",$this);
        var intervalTime=null;
        li.hover(function() {
            var that=this;
            if (intervalTime) {
                clearInterval(intervalTime);
            }
            intervalTime = setTimeout(function() {
                index = li.index(that);
                ShowAD(index);
            }, 200);
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        showBox.hover(function() {
            if (intervalTime) {
                clearInterval(intervalTime);
            }
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        function interval(){
            intervalTime = setInterval(function() {
                ShowAD(index);
                index++;
                if (index == size) {
                    index = 0;
                }
            }, settings.timer);
        }
        interval();
        var ShowAD = function(i) {
            showBox.animate({ "top": -i * slideH }, settings.speed);
            li.eq(i).addClass("on").siblings().removeClass("on");
        };
    };
})(jQuery);

demo演示地址：http://www.css88.com/demo/slide1/

在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。

IE下可以通过document.selection.createRange();获取光标位置，代码也很简单：

if (document.selection) {
    pos = document.selection.createRange();
    pos.text = "要插入的字符串";
}

Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。

if (obj.selectionStart || obj.selectionStart == '0') { //obj是文本框对象
    var startPos = obj.selectionStart;
    var endPos = obj.selectionEnd;
    obj.value = obj.value.substring(0, startPos) + "要插入的字符串" + obj.value.substring(endPos, obj.value.length);
    obj.selectionStart = startPos + myValue.length;
    obj.selectionEnd = startPos + myValue.length;
} else {
    obj.value += "要插入的字符串";
}

这些可以查看Javascript在光标位置插入内容；

现在微博很火，我们可以尝试一下插入话题，你点击话题，在光标位置就会插入：#请在这里输入自定义话题#，注意，“请在这里输入自定义话题”这几文字是被选中，你可以直接敲打键盘编辑文本。
在火狐下先对比较简单，我们只要在上面的代码中插入一句就可以了：
obj.setSelectionRange(startPos-t,obj.selectionEnd+t);
t是根据数值选中插入文本内容两边的边界数值，如：0是表示插入文字全部选择，-1表示插入文字两边各少选中一个字符。 继续阅读：【jQuery插件】insertContent-在文本框光标位置插入内容并选中»

PS:此插件存在性能问题，请慎用！敬请期待新插件，预计6月发布！

项目中有一个类似于新浪腾讯微博文本域字符数判断，就是想腾讯微博和新浪微博那样，判断文本框中最多嫩输入140个字，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。如果超出就提示！并且实时提示可是输入的文字数。

去年也曾经写过类似一个脚本（http://www.css88.com/archives/2027），只是将上次的代码封装成了jquery插件，做了一点点的性能优化，主要是在文本域获取焦点的时候触发setInterval，文本域失去焦点就clearInterval。
调用方式： 继续阅读：【jQuery插件】chackTextarea-类似于新浪腾讯微博文本域字符数判断»

公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果，例如：

这个在很早以前其实已经写过，请移步：http://www.css88.com/archives/1943

当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了，position：fixed，可以在IE7+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，使用position：absolute属性代替，重新计算top值。

具体代码如下：

/**
 * @author 愚人码头
 * 类似于新浪微博新消息提示的定位框
 * 更多http://www.css88.com/archives/3515
 */
(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);

        var FixedFun = function(element) {
            var top = opts.top;
            var right = ($(window).width()-opts.pageWidth)/2+opts.right;
            element.css({
                "right":right,
                "top":top
            });
            $(window).resize(function(){
                var right = ($(window).width()-opts.pageWidth)/2+opts.right;
                element.css({
                    "right":right
                });
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {

                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
	right : 100,//相对于页面宽度的右边定位
        top:100,
        pageWidth : 960
	};
})(jQuery)

调用：

$("#float").capacityFixed({
	right : 100,//相对于页面宽度的右边定位
        top:100,
        pageWidth : 960
	});

查看demo：http://www.css88.com/demo/capacityFixed/

本插件自己打印链接中指定的页面，可以通过以下方式和参数传递：

$(select).printPage(
{attr : “href”,//链接的href属性
url : false,//特定的url，
message: “请稍后，真正为您准备文档…” }
);

demo页面：http://www.css88.com/demo/jQuery-printPage-plugin/

注意：在IE下打印页面，背景图片和背景颜色默认不打印
解决方案：
在IE的工具里，Internet选项–>高级–>打印（打印背景颜色和图像）选中即可