jQuery插件开发入门

======2014-5-27 更新=======

Require.js中使用jQuery 插件请查看http://www.css88.com/archives/4826

感谢,huugle的留言;

======================

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。

入门

编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称:

jQuery.fn.myPlugin = function(){

  //你自己的插件代码

};

用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递给一个自我执行的封闭程序,jQuery在此程序中映射为$符号,这样可以避免$号被其他库覆写。

(function ($) {
    $.fn.m​​yPlugin = function () {
        //你自己的插件代码
    };
})(jQuery);

在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。

环境

现在,我们可以开始编写实际的插件代码。 但是,在这之前,我们必须得对插件所处的环境有个概念。 在插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 这里容易产生一个普遍的误区,因为在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中,如下所示。

(function ($) {
    $.fn.m​​yPlugin = function () {

        //此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。
        //$(this)等同于 $($('#element'));

        this.fadeIn('normal', function () {

            //此处callback函数中this关键字代表一个DOM元素

        });

    };
})(jQuery);

$('#element').myPlugin();

继续阅读

jQuery imgareaselect 插件中文文档

抽空翻译了一下jquery imgareaselect 插件中文文档。主要的一些参数和方法说明都有了,主要是后期项目中肯能会使用这个插件,翻译出来供大家查阅,欢迎斧正错误!

imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑功能,等等。

文档模板套用了Twitter Bootstrap的文档模板,PS:中文真难看,悲剧啊。

jquery imgareaselect 插件中文文档地址:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html

jQuery旋转插件—rotate

网上发现一个很有意思的jQuery旋转插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。

调用和方法:

rotate(angle)

angle参数:[Number] – 默认为 0 – 根据给定的角度旋转图片

例如:

1
$("#img").rotate(45);

rotate(parameters)

parameters参数:[Object] 包含旋转参数的对象。支持的属性: 继续阅读

[jQuery插件]Pause 暂停

jQuery 本身的动画只有停止的功能,一但停止(stop)后就无法自动接着做未做完的动画内容。 因此Pause插件扩充了animate() 的功能,让它可以支持暂停(pause)及恢复(resume)动画。
这个插件覆盖jQuery的默认的animate()方法,任何加载了这个插件的动画都将支持Pause暂停。两个新的不带任何参数的方法被添加到每一个jQuery对象:pause()和resume()。
例如:
$box.hover(function() {
$box.pause();
}, function() {
$box.resume();
});

demo演示地址:http://tobia.github.com/Pause/

项目地址:https://github.com/tobia/Pause

[jQuery插件]图片居中裁切效果

同事啄米鸟前段时间分装的一个方法,见:http://blog.dmtuan.com/?p=486,改了一下做成jQuery插件:

大家在做相册列表的时候可能会遇到这样的情况,用户上传的图片大小不一,长宽不一,然而需求的列表却是固定宽高的如图:

此脚本拟达到以下需求

  1. 当图片高或宽超过父容器时截取中间部分显示。
  2. 当图片宽高小于父容器时,居中显示。
  3. 插件中”width”和”height”两个参数可以设定图片实际输出的宽度。
  4. 可以通过样式设置图片的偏移位置,例如.themes2 li a img{ margin-top: -5px; margin-left: -5px};
  5. 第3点和第4点结合可以尽可能的解决一个问题,就是解决图片边缘模糊是造成视觉上的不爽。

demo页面:http://www.css88.com/demo/VMiddleImg/

 

[jQuery插件] jQuery Color Animations颜色动画插件

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

[code=”html”]

测试元素

[/code]

我们写一行这样的代码:

[code=”javascript”]

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

[/code]

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

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

所有用于动画的属性必须是数字的(除了如下所示);这些属性如果不是数字的将不能使用基本的jQuery功能。(举个例子,widthheight或者left可以执行动画,但是background-color不能。)属性值被当作一个像素单位的数字,除非另有说明。单位em 和 %需要指定使用。就是说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/

 

【jQuery插件】autoTextarea-文本框根据输入内容自适应高度

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

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

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

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

【jQuery插件】slideImg-广告轮播,焦点图效果

感谢 留痕 网友提交的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.当鼠标经过右下角图片选择的控制点上加了延时,避免在用户不经意划过这些控制点的时候切换图片。

具体插件代码:

[code=”javascript”]
/**
* @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=$(“

    “,{
    “class”:”flash_item”,
    html:function(){
    var $selItemHTML=””;
    if(size==1){
    return;
    }else if(size>1){
    for(var i=0;i‘+(i+1)+”:$selItemHTML+=’

  • ‘+(i+1)+’
  • ‘;
    }
    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);

    [/code]

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

    【jQuery插件】insertContent-在文本框光标位置插入内容并选中

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

    IE下可以通过document.selection.createRange();获取光标位置,代码也很简单:
    [code=”javascript”]
    if (document.selection) {
    pos = document.selection.createRange();
    pos.text = “要插入的字符串”;
    }
    [/code]

    Firefox浏览器则稍微负责一点,需要首先获取光标位置,然后对value进行字符串截取处理。
    [code=”javascript”]
    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 += “要插入的字符串”;
    }
    [/code]

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

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