文档章节

编写一个简单的JQuery插件

明天以后
 明天以后
发布于 2016/11/26 16:48
字数 176
阅读 90
收藏 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 学习
下一篇: 几个脚本
明天以后
粉丝 71
博文 127
码字总数 85284
作品 0
昌平
程序员
私信 提问
如何编写一个Jquery插件(续)

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

sfilyh
2012/05/04
0
0
jQuery零基础入门——(九)扩展

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

JandenMa
08/12
0
0
Jquery不同版本共用的解决方案(插件编写)

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

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

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

红薯
2011/12/20
3.9K
4
教你如何创建自己的 jQuery 插件

在 编写插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了。困难的地方在于想一些其他人还没有做过的事情,并编写一些能真正完成某些操 作的 JavaScript 代码。由于插件结构简单...

红薯
2009/07/24
2.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

ORA 各种oraclesql错误

ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最大会话许可数 ORA-00020: 超出最大进程数 () ORA-00021: 会话附属于其它某...

青峰Jun19er
7分钟前
2
0
没错,老板让我写个 BUG!

前言 标题没有看错,真的是让我写个 bug! 刚接到这个需求时我内心没有丝毫波澜,甚至还有点激动。这可是我特长啊;终于可以光明正大的写 bug 了🙄。 先来看看具体是要干啥吧,其实主要就是...

crossoverJie
20分钟前
1
0
开源软件会被云杀死吗 ?

本文转载云头条,原作者:Michael Stiefel是Reliable Software公司的负责人,是一名软件架构和开发顾问。 文章要点 虽然开源开发不会消失,但商业开源厂商的未来不是很有希望。随着全面管理的...

linuxCool
53分钟前
5
0
OSChina 周三乱弹 —— 谈什么对象?睡什么觉?

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @胖达panda :最肯忘却古人诗,最不屑一顾是相思。分享童丽的单曲《红豆生南国》: 《红豆生南国》- 童丽 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
58分钟前
374
5
stylus

stylus基础教程,stylus实例教程,stylus语法总结

miaojiangmin
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部