Use of plug-ins

Time:2019-10-21

In the process of learning and interviewing, we will focus on the original things, but in the actual development process, we seldom use the original to write projects. The first tier cities are Vue, react, and angular, and jQuery is also used, but it is less than the second tier cities, but not none.

JQuery used to be the king. Now, jQuery is the introduction. It used to take a lot of effort to learn jQuery, but now you know how to use it.

There are many plug-ins based on jQuery on the market, such as carousel chart, paging, cookie and other plug-ins. Here we recommend a very useful website: http://www.jq22.com. There are many plug-ins, many of which are written with layout and style, and you can take them directly. But sometimes you can’t find the one you want, or the function is different from your own needs, so you need to write one yourself. Not only must be able to use plug-ins, but also write plug-ins.

Use of form validation plug-in: $(‘selector‘). Validate()

Rules for using plug-ins

Use of cookie plug-ins:

  • Create: $. Cookie (‘cookie name ‘,’ cookie value ‘);
  • Get: $. Cookie (‘cookie name ‘);
  • Delete: $. Cookie (‘cookie name ‘, null);

Use of paging plug-in: $(“paging”). Paging();

Parameter list:

The above plug-ins are used more frequently, just to make a simple introduction, you can practice it yourself, the impression will be more profound!

Sometimes other plug-ins are really easy to use, but they are also useful when they are not easy to use. At this time, you need to do it yourself!

  1. File naming
     jquery.banner.1.0.0.js
     jquery.banner.js
  2. Add anonymous function
  3. Passing jQuery to anonymous function
    ;(function($){})(jQuery);
  4. Methods for jQuery binding in plug-ins
  5. Development function

The following code is a plug-in of the carousel chart that I encapsulate, simple version!

; (function ($) {
    $.fn.extend({
        fade(options) {
            var obj = {
                imgs: options.imgs,
                prev: options.prev,
                next: options.next,
                points: options.points,
                autoplay: options.autoplay === false ? false : true,
                delay: options.delay || 3000,
                current: options.current || 0,
                duration: options.duration || 500,
                len: options.imgs.length
            };
            obj.next.on('click', function () {
                obj.current++;
                if (obj.current === obj.len) {
                    obj.current = 0;
                }
                ani(obj.current);
            });
            obj.prev.on('click', function () {
                obj.current--;
                if (obj.current === -1) {
                    obj.current = obj.len - 1;
                }
                ani(obj.current);
            });
            for (var i = 0; i < obj.len; i++) {
                obj.points.append('');
            }
            ani(obj.current);
            obj.points.find('span').on('mouseenter', function () {
                var index = $(this).index();
                obj.current = index;
                ani(obj.current);
            });
            var timer = null;
            if (obj.autoplay) {
                timer = setInterval(function () {
                    obj.next.click();
                }, obj.delay);
            }
            if (obj.autoplay) {
                $(this).hover(function () {
                    clearInterval(timer);
                }, function () {
                    timer = setInterval(function () {
                        obj.next.click();
                    }, obj.delay);
                })
            }
            function ani(current) {
                obj.points.find('span').eq(current).addClass('active').siblings().removeClass('active');
                obj.imgs.eq(current).stop().fadeIn(obj.duration).siblings().stop().fadeOut(obj.duration);
            }
        }
    });
})(jQuery)

If you have any questions, please comment!

 

Recommended Today

Single and multiple buttons are styled with pictures

I’ve always seen people asking how to style and enlarge the buttons of radio buttons and multi buttons? Let’s share an example I did. 1. First make the button into a picture  2.html page Copy code The code is as follows: <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <script type=”text/javascript” src=”jquery-1.10.2.min.js”></script> <script type=”text/javascript”> […]