文档章节

编写一个简单的JQuery插件

明天以后
 明天以后
发布于 2016/11/26 16:48
字数 176
阅读 88
收藏 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>

最终效果如下: 插件效果

© 著作权归作者所有

共有 人打赏支持
明天以后
粉丝 71
博文 124
码字总数 82816
作品 0
昌平
程序员
jQuery零基础入门——(九)扩展

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

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

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

sfilyh
2012/05/04
0
0
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
06/28
0
0
Jquery不同版本共用的解决方案(插件编写)

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

Eric_HSBC
2013/05/15
0
2
优秀的jQuery自动补齐插件和多值输入插件推荐

让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件)。在过去的4年中,我已经Google了很多次这个组合了。然而结果并没有变化多少。这里有很多的选择,但是没有哪一个让我能...

早起的菜鸟
2011/09/18
0
1

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
1
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
2
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
1
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
1
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部