编写一个简单的JQuery插件

lpe234

发布于 2020-07-27 17:14:36

3780

发布于 2020-07-27 17:14:36

一个简单的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>

最终效果如下：