前端系列之jQuery(jQuery插件)

最新推荐文章于 2022-10-14 12:16:41 发布

众拾达人

最新推荐文章于 2022-10-14 12:16:41 发布

阅读量532

点赞数

分类专栏：前端文章标签： jquery jquery插件前端

本文链接：https://blog.csdn.net/wtdask/article/details/79216884

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

jQuery的插件机制

jQuery主要有两种使用方式：
1、在jQuery集合对象上调用方法
2、直接调用jQuery方法

扩展jQuery对象上的方法：jQuery.fn.extend()
扩展jQuery工具方法：jQuery.extend()//给jQuery本身的类添加新的方法

如何寻找自己需要的插件

http://plugins.jquery.com/

这里写图片描述

此网站已经停止维护，官方的说明是在NPM上面进行插件的使用

这里写图片描述

建议使用Star数量比较多的（大于1000的就比较好了），维护频繁，文档齐全的插件。

如何使用插件

1.引入插件：

这里写图片描述

2.查看并实现示例代码

3.阅读文档

以jquery.easing插件为例

这里写图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    .panel {
        width: 300px;
        margin: 50px 0 0 50px;
        box-shadow: 0 0 10px #999;
        line-height: 1.8;
        text-align: center;
        font-size: 20px;
        color: #fff;
    }

    .title {
        background-color: #c7731f;
    }

    h1 {
        margin: 0;
        padding: 0;
    }

    .body {
        padding: 30px 10px;
        background-color: #5298c7;
    }
    </style>
</head>

<body>
    <div class="panel">
        <div class="title">
            <h1>唐诗一首</h1>
        </div>
        <div class="body">
            <p>
                白日依山尽，
                <br> 黄河入海流。
                <br> 欲穷千里目，
                <br> 更上一层楼。
                <br>
            </p>
        </div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script src="../../../vendor/jquery.easing.js"></script>
    <script>
    $(function() {

        $('.title').click(function() {

            $(this).siblings('.body').slideUp(1000, 'easeInOutCirc');
        });

    });
    </script>
</body>

</html>

slick插件示例

<html>

<head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
</head>

<body>
    <div class="your-class">
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
    </div>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.your-class').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
    });
    </script>
</body>

</html>

几个实用的插件使用

chosen:选择框
https://github.com/harvesthq/chosen

这里写图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn.bootcss.com/chosen/1.6.2/chosen.css" rel="stylesheet">
</head>

<body>
    <select name="demo" id="demo" style="width: 300px">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <br>
    <br>
    <select name="demo2" id="demo2" multiple data-placeholder="请选择...">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <script src="vendor/jquery-1.12.4.js"></script>
    <script src="//cdn.bootcss.com/chosen/1.6.2/chosen.jquery.js"></script>
    <script>
    $(function() {
        $('#demo').chosen();
        $('#demo2').chosen({
            width: '50%'
        });
    });
    </script>
</body>

</html>

pickadate:日期选择输入

https://github.com/amsul/pickadate.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.date.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.time.css" rel="stylesheet">
</head>

<body>
    <input type="text" class="datepicker">
    <br>
    <br>
    <input type="text" class="timepicker">
    <script src="vendor/jquery-1.12.4.js"></script>
    <script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.js"></script>
    <script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.date.js"></script>
    <script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.time.js"></script>
    <script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/translations/zh_CN.js"></script>
    <script>
    $(function() {
        var dateinput = $('.datepicker').pickadate();
        var datepicker = dateinput.pickadate('picker');


        $('.timepicker').pickatime();

        datepicker.on({
            open: function() {
                console.log('Opened up!');
            },
            close: function() {
                console.log('Closed now');
            },
            render: function() {
                console.log('Just rendered anew');
            },
            stop: function() {
                console.log('See ya');
            },
            set: function(thingSet) {
                console.log('Set stuff:', thingSet);
            }
        });
    });
    </script>
</body>

</html>

Magnific-Popup:图片浏览
https://github.com/dimsemenov/Magnific-Popup

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet">
    <style>
    /* padding-bottom and top for image */

    .mfp-no-margins img.mfp-img {
        padding: 0;
    }
    /* position of shadow behind the image */

    .mfp-no-margins .mfp-figure:after {
        top: 0;
        bottom: 0;
    }
    /* padding for main container */

    .mfp-no-margins .mfp-container {
        padding: 0;
    }
    </style>
</head>

<body>
    <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
        <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
    </a>
    <a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
        <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
    </a>
    <a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
        <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
    </a>
    <script src="vendor/jquery-1.12.4.js"></script>
    <script src="//cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
    <script>
    $(function() {
        $('.image-popup-vertical-fit').magnificPopup({
            type: 'image',
            closeOnContentClick: false,
            mainClass: 'mfp-img-mobile',
            image: {
                verticalFit: true
            }

        });

        $('.image-popup-fit-width').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            image: {
                verticalFit: false
            }
        });

        $('.image-popup-no-margins').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            closeBtnInside: false,
            fixedContentPos: true,
            mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
            image: {
                verticalFit: true
            },
            zoom: {
                enabled: true,
                duration: 300 // don't foget to change the duration also in CSS
            }
        });
    });
    </script>
</body>

</html>

如何编写一款插件？

注意项：

这里写图片描述

实现一个修改颜色的小插件

jquery.colorful.js

(function($) {
    var namespace = 'colorful';

    var methods = {
        init: function(options) {
            options = $.extend({}, $.fn[namespace].defaults, options);

            if (options.font) { this.css('color', options.color); }
            if (options.background) { this.css('background-color', options.color); }

            return this;
        }
    };

    $.fn[namespace] = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if ($.type(method) === 'object') {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method' + method + ' does not exist!');
        }
    };

    $.fn[namespace].defaults = {
        color: 'red',
        background: false,
        font: true
    };
})(jQuery);

colorful.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores assumenda atque cum cupiditate debitis dolore doloribus illum inventore, magnam pariatur placeat similique suscipit! A accusantium cum dolore numquam optio.</p>
    <script src="vendor/jquery-1.12.4.js"></script>
    <script src="jquery.colorful.js"></script>
    <script>
    $(function() {
                  $('p').colorful('init')

                  $('p').colorful('init', {
                      background: true,
                      font: false
                  })

//      $('p').colorful({
//          color: 'green',
//          background: true,
//          font: false
//      }).css('font-size', '30px');
    });
    </script>
</body>

</html>

众拾达人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端系列之jQuery(jQuery插件)

jQuery的插件机制jQuery主要有两种使用方式： 1、在jQuery集合对象上调用方法 2、直接调用jQuery方法扩展jQuery对象上的方法：jQuery.fn.extend()扩展jQuery工具方法：jQuery.extend()//给jQuery本身的类添加新的方法如何寻找自己需要的插件http://plugins.jquery.com/此网站已经停止维护，官方的说明是在NPM
复制链接

扫一扫