文档章节

编写一个简单的JQuery插件

明天以后
 明天以后
发布于 2016/11/26 16:48
字数 176
阅读 91
收藏 1

一个简单的JQuery插件


功能比较简单的插件,代码如下:

/**
 * Created by lpe234 on 2016-11-26.
 */

"use strict";

(function ($) {

    // 默认参数
    var defaults = {
        timeout: 100
    };

    // 定义扩展函数
    $.fn.flashIt = function (option) {
        // 获取最终参数
        var options = $.extend(defaults, option);

        // 给元素绑定事件
        var timeout = options.timeout;

        var ele = this;
        ele.bind('click', function () {
            ele.hide();
            setTimeout(function () {
                ele.fadeIn();
            }, timeout);
        });

        // 修改样式
        ele.css('cursor', 'pointer');
    };
})(jQuery);

示例Html文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 id="tog">123</h1>

<script src="jquery-2.1.3.min.js"></script>
<script src="flashIt.js"></script>
<script>
    $('#tog').flashIt({
        timeout: 100
    });
</script>
</body>
</html>

最终效果如下: 插件效果

© 著作权归作者所有

上一篇: Spring MVC 学习
下一篇: 几个脚本
明天以后

明天以后

粉丝 76
博文 130
码字总数 87367
作品 0
昌平
程序员
私信 提问
jQuery零基础入门——(九)扩展

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 当我们使用jQuery对象的方法时,...

JandenMa
2018/08/12
9
0
如何编写一个Jquery插件(续)

在如何编写一个Jquery插件这篇文章中,最后只说到了编写一个jquery插件的三种方法的第一个:封装jquery对象方法的插件。 接下来把剩下的两种方法说一下: 封装全局函数的插件 这类插件是在j...

sfilyh
2012/05/04
115
0
你不需要 jQuery,但你需要一个 DOM 库

写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以另外一种形式...

叙帝利
03/27
0
0
Jquery不同版本共用的解决方案(插件编写)

最近在为某公司做企业内部UI库,经过研究分析和评审,决定基于Jquery开发,结合Bootstrap插件那简洁,优雅,高效的思想进行插件编写。 但是在编写的过程中遇到一个头疼的问题,就是正在编写的...

Eric_HSBC
2013/05/15
3.7K
2
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
36分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
38分钟前
7
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
41分钟前
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
47分钟前
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部