【Bootstrap4】Bootstrap 4管理仪表板模板，用于管理面板和仪表板以及添加页面监听器

+/*
+Template: Datum - Responsive Bootstrap 4 Admin Dashboard Template
+Author: iqonic.design
+Design and Developed by: iqonic.design
+NOTE: This file contains the styling for responsive Template.
+*/
+
+/*----------------------------------------------
+Index Of Script
+------------------------------------------------
+
+:: Tooltip
+:: Fixed Nav
+:: Magnific Popup
+:: Ripple Effect
+:: Sidebar Widget
+:: FullScreen
+:: Page Loader
+:: Counter
+:: Progress Bar
+:: Page Menu
+:: Close  navbar Toggle
+:: Mailbox
+:: chatuser
+:: chatuser main
+:: Chat start
+:: todo Page
+:: user toggle
+:: Data tables
+:: Form Validation
+:: Active Class for Pricing Table
+:: Flatpicker
+:: Scrollbar
+:: checkout
+:: Datatables
+:: image-upload
+:: video
+:: dark mode
+:: Button
+:: Pricing tab
+:: SVG Animation
+:: Date Picker
+:: Choies.js
+------------------------------------------------
+Index Of Script
+----------------------------------------------*/
+
+(function(jQuery) {
+
+
+
+    "use strict";
+
+    jQuery(document).ready(function() {
+
+        /*---------------------------------------------------------------------
+        Tooltip
+        -----------------------------------------------------------------------*/
+        jQuery('[data-toggle="popover"]').popover();
+        jQuery('[data-toggle="tooltip"]').tooltip();
+
+        /*---------------------------------------------------------------------
+        Fixed Nav
+        -----------------------------------------------------------------------*/
+
+        $(window).on('scroll', function () {
+            if ($(window).scrollTop() > 0) {
+                $('.iq-top-navbar').addClass('fixed');
+            } else {
+                $('.iq-top-navbar').removeClass('fixed');
+            }
+        });
+
+        $(window).on('scroll', function () {
+            if ($(window).scrollTop() > 0) {
+                $('.white-bg-menu').addClass('sticky-menu');
+            } else {
+                $('.white-bg-menu').removeClass('sticky-menu');
+            }
+        });
+
+
+       /*---------------------------------------------------------------------
+        Sidebar Widget
+        -----------------------------------------------------------------------*/
+
+        jQuery(document).on("click", '.side-menu > li > a', function() {
+            jQuery('.side-menu > li > a').parent().removeClass('active');
+            jQuery(this).parent().addClass('active');
+        });
+
+        // Active menu
+        var parents = jQuery('li.active').parents('.submenu.collapse');
+
+        parents.addClass('show');
+
+
+        parents.parents('li').addClass('active');
+        jQuery('li.active > a[aria-expanded="false"]').attr('aria-expanded', 'true');
+
+        /*---------------------------------------------------------------------
+        FullScreen
+        -----------------------------------------------------------------------*/
+        jQuery(document).on('click', '.full-screen', function() {
+            let elem = jQuery(this);
+            elem.find('i').addClass('d-none');
+            elem.find('i').addClass('d-none');
+            if (!document.fullscreenElement &&
+                !document.mozFullScreenElement && // Mozilla
+                !document.webkitFullscreenElement && // Webkit-Browser
+                !document.msFullscreenElement) { // MS IE ab version 11
+                    elem.find('.min').removeClass('d-none');
+                if (document.documentElement.requestFullscreen) {
+                    document.documentElement.requestFullscreen();
+                } else if (document.documentElement.mozRequestFullScreen) {
+                    document.documentElement.mozRequestFullScreen();
+                } else if (document.documentElement.webkitRequestFullscreen) {
+                    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+                } else if (document.documentElement.msRequestFullscreen) {
+                    document.documentElement.msRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+                }
+            } else {
+                elem.find('.max').removeClass('d-none');
+                if (document.cancelFullScreen) {
+                    document.cancelFullScreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.webkitCancelFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            }
+        });
+
+
+        /*---------------------------------------------------------------------
+        Page Loader
+        -----------------------------------------------------------------------*/
+        jQuery("#load").fadeOut();
+        jQuery("#loading").delay().fadeOut("");
+
+
+        /*---------------------------------------------------------------------
+        Counter
+        -----------------------------------------------------------------------*/
+        if (window.counterUp !== undefined) {
+            const counterUp = window.counterUp["default"]
+            const $counters = $(".counter");
+            $counters.each(function (ignore, counter) {
+                var waypoint = new Waypoint( {
+                    element: $(this),
+                    handler: function() {
+                        counterUp(counter, {
+                            duration: 1000,
+                            delay: 10
+                        });
+                        this.destroy();
+                    },
+                    offset: 'bottom-in-view',
+                } );
+            });
+        }
+
+
+        /*---------------------------------------------------------------------
+        Progress Bar
+        -----------------------------------------------------------------------*/
+        jQuery('.iq-progress-bar > span').each(function() {
+            let progressBar = jQuery(this);
+            let width = jQuery(this).data('percent');
+            progressBar.css({
+                'transition': 'width 2s'
+            });
+            setTimeout(function() {
+                    progressBar.css('width', width + '%');
+            }, 100);
+        });
+
+        jQuery('.progress-bar-vertical > span').each(function () {
+            let progressBar = jQuery(this);
+            let height = jQuery(this).data('percent');
+            progressBar.css({
+                'transition': 'height 2s'
+            });
+            setTimeout(function () {
+                    progressBar.css('height', height + '%');
+            }, 100);
+        });
+
+
+        /*---------------------------------------------------------------------
+        Page Menu
+        -----------------------------------------------------------------------*/
+        jQuery(document).on('click', '.wrapper-menu', function() {
+            jQuery(this).toggleClass('open');
+        });
+
+        jQuery(document).on('click', ".wrapper-menu", function() {
+            jQuery("body").toggleClass("sidebar-main");
+        });
+
+
+      /*---------------------------------------------------------------------
+       Close  navbar Toggle
+       -----------------------------------------------------------------------*/
+
+        jQuery('.close-toggle').on('click', function () {
+            jQuery('.h-collapse.navbar-collapse').collapse('hide');
+        });
+
+        /*---------------------------------------------------------------------
+        user toggle
+        -----------------------------------------------------------------------*/
+        jQuery(document).on('click', '.user-toggle', function() {
+            jQuery(this).parent().addClass('show-data');
+        });
+
+        jQuery(document).on('click', ".close-data", function() {
+            jQuery('.user-toggle').parent().removeClass('show-data');
+        });
+        jQuery(document).on("click", function(event){
+        var $trigger = jQuery(".user-toggle");
+        if($trigger !== event.target && !$trigger.has(event.target).length){
+            jQuery(".user-toggle").parent().removeClass('show-data');
+        }
+        });
+
+        /*---------------------------------------------------------------------
+        Data tables
+        -----------------------------------------------------------------------*/
+        if($.fn.DataTable){
+            const table = $('.data-table').DataTable();
+        }
+
+
+        /*---------------------------------------------------------------------
+        Form Validation
+        -----------------------------------------------------------------------*/
+
+        // Example starter JavaScript for disabling form submissions if there are invalid fields
+        window.addEventListener('load', function() {
+            // Fetch all the forms we want to apply custom Bootstrap validation styles to
+            var forms = document.getElementsByClassName('needs-validation');
+            // Loop over them and prevent submission
+            var validation = Array.prototype.filter.call(forms, function(form) {
+                form.addEventListener('submit', function(event) {
+                    if (form.checkValidity() === false) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    form.classList.add('was-validated');
+                }, false);
+            });
+        }, false);
+
+      /*---------------------------------------------------------------------
+       Active Class for Pricing Table
+       -----------------------------------------------------------------------*/
+      jQuery("#my-table tr th").click(function () {
+        jQuery('#my-table tr th').children().removeClass('active');
+        jQuery(this).children().addClass('active');
+        jQuery("#my-table td").each(function () {
+          if (jQuery(this).hasClass('active')) {
+            jQuery(this).removeClass('active')
+          }
+        });
+        var col = jQuery(this).index();
+        jQuery("#my-table tr td:nth-child(" + parseInt(col + 1) + ")").addClass('active');
+      });
+
+
+        /*---------------------------------------------------------------------
+        Scrollbar
+        -----------------------------------------------------------------------*/
+
+        jQuery('.data-scrollbar').each(function () {
+            var attr = $(this).attr('data-scroll');
+            if (typeof attr !== typeof undefined && attr !== false){
+            let Scrollbar = window.Scrollbar;
+            var a = jQuery(this).data('scroll');
+            Scrollbar.init(document.querySelector('div[data-scroll= "' + a + '"]'));
+            }
+        });
+
+
+      /*---------------------------------------------------------------------
+      image-upload
+      -----------------------------------------------------------------------*/
+
+      $('.form_gallery-upload').on('change', function() {
+          var length = $(this).get(0).files.length;
+          var galleryLabel  = $(this).attr('data-name');
+
+          if( length > 1 ){
+            $(galleryLabel).text(length + " files selected");
+          } else {
+            $(galleryLabel).text($(this)[0].files[0].name);
+          }
+        });
+
+    /*---------------------------------------------------------------------
+        video
+      -----------------------------------------------------------------------*/
+      $(document).ready(function(){
+      $('.form_video-upload input').change(function () {
+        $('.form_video-upload p').text(this.files.length + " file(s) selected");
+      });
+    });
+    /*---------------------------------------------------------------------
+        dark mode
+      -----------------------------------------------------------------------*/
+      const urlParams = new URLSearchParams(window.location.search);
+      const mode = urlParams.get('dark');
+      if (mode !== null) {
+          $('body').removeClass('sidebar-dark', 'sidebar-light')
+          switch (mode) {
+              case "true":
+                  $('body').addClass('dark')
+              break;
+              case "false":
+                  $('body').removeClass('sidebar-dark', 'sidebar-light')
+              break;
+              default:
+                  $('body').removeClass('sidebar-dark').removeClass('sidebar-light')
+                  break;
+          }
+      }
+
+
+        /*---------------------------------------------------------------------
+        Button
+        -----------------------------------------------------------------------*/
+
+        jQuery('.qty-btn').on('click',function(){
+          var id = jQuery(this).attr('id');
+
+          var val = parseInt(jQuery('#quantity').val());
+
+          if(id == 'btn-minus')
+          {
+            if(val != 0)
+            {
+              jQuery('#quantity').val(val-1);
+            }
+            else
+            {
+              jQuery('#quantity').val(0);
+            }
+
+          }
+          else
+          {
+            jQuery('#quantity').val(val+1);
+          }
+        });
+
+    });
+
+
+    $(document).on('click', '[data-toggel-extra="side-nav"]', function () {
+        const pannel = $(this).attr('data-expand-extra')
+        $(pannel).addClass('active')
+    })
+
+    $(document).on('click', '[data-toggel-extra="side-nav-close"]', function () {
+        const pannel = $(this).attr('data-expand-extra')
+        $(pannel).removeClass('active')
+    })
+
+    $(document).on('click', '[data-toggel-extra="right-sidenav"]', function () {
+        const target = $(this).data('target')
+        $(target).addClass('active')
+    })
+
+    $(document).on('click', '[data-extra-dismiss="right-sidenav"]', function () {
+        $(this).closest('.right-sidenav').removeClass('active')
+    })
+
+    $(document).on('click', '[data-toggle="end-call"]', function(){
+        $(this).closest('.tab-pane').removeClass('active').removeClass('show')
+        $($(this).attr('data-target')).tab('show')
+        $('.chat-action').find('[data-toggle="tab"]').removeClass('active')
+    })
+
+    $(document).on('click', '[data-toggle-extra="tab"]', function () {
+        const target = $(this).attr('data-target-extra')
+        $('[data-toggle-extra="tab-content"]').removeClass('active')
+        $(target).addClass('active')
+        $(this).parent().find('.active').removeClass('active')
+        $(this).addClass('active')
+    })
+
+    $('emoji-picker').on('emoji-click', function(e){
+        $(e.target.dataset.targetInput).val($(e.target.dataset.targetInput).val()+e.detail.unicode)
+    })
+
+    $('.dropdown-menu').on('click', function(event){
+        event.stopPropagation();
+    });
+
+    var board =  $('.draggable-item');
+
+    var selector = [];
+    if(board.length > 0 )
+    {
+        for(var i = 0 ; i < board.length ; i++) {
+            selector.push(document.querySelector('#draggable-item-'+i));
+            selector.push(document.querySelector('#list-draggable-item-'+i));
+        }
+    }
+    dragula( selector ).on('drop', function(el) {
+        $(el).addClass(' animate__animated animate__rubberBand')
+        setTimeout(function () { 
+            $(el).removeClass(' animate__animated animate__rubberBand')
+        }, 1000)
+    });
+
+    // calender 1 js
+    var calendar1;
+    if (jQuery('#calendar1').length) {
+        var calendarEl = document.getElementById('calendar1');
+
+            calendar1 = new FullCalendar.Calendar(calendarEl, {
+                selectable: true,
+                plugins: ["timeGrid", "dayGrid", "list", "interaction"],
+                timeZone: "UTC",
+                defaultView: "dayGridMonth",
+                contentHeight: "auto",
+                eventLimit: true,
+                dayMaxEvents: 4,
+                header: {
+                    left: "prev,next today",
+                    center: "title",
+                    right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
+                },
+                dateClick: function (info) {
+                    $('#schedule-start-date').val(info.dateStr)
+                    $('#schedule-end-date').val(info.dateStr)
+                    $('#date-event').modal('show')
+                },
+                events: [
+                    {
+                        title: 'Click for Google',
+                        url: 'http://google.com/',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-20, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#4731b6'
+                    },
+                    {
+                        title: 'All Day Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-18, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#465af7'
+                    },
+                    {
+                        title: 'Long Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-16, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        end: moment(new Date(), 'YYYY-MM-DD').add(-13, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#7858d7'
+                    },
+                    {
+                        groupId: '999',
+                        title: 'Repeating Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-14, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#465af7'
+                    },
+                    {
+                        groupId: '999',
+                        title: 'Repeating Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-12, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#5baa73'
+                    },
+                    {
+                        groupId: '999',
+                        title: 'Repeating Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-10, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#01041b'
+                    },
+                    {
+                        title: 'Birthday Party',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-8, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#4731b6'
+                    },
+                    {
+                        title: 'Meeting',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-6, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#15ca92'
+                    },
+                    {
+                        title: 'Birthday Party',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-5, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#f4a965'
+                    },
+                    {
+                        title: 'Birthday Party',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(-2, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#ea643f'
+                    },
+
+                    {
+                        title: 'Meeting',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#15ca92'
+                    },
+                    {
+                        title: 'Click for Google',
+                        url: 'http://google.com/',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T06:30:00.000Z',
+                        color: '#4731b6'
+                    },
+                    {
+                        groupId: '999',
+                        title: 'Repeating Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T07:30:00.000Z',
+                        color: '#5baa73'
+                    },
+                    {
+                        title: 'Birthday Party',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T08:30:00.000Z',
+                        color: '#f4a965'
+                    },
+                    {
+                        title: 'Doctor Meeting',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#f4a965'
+                    },
+                    {
+                        title: 'All Day Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(1, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#465af7'
+                    },
+                    {
+                        groupId: '999',
+                        title: 'Repeating Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(8, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#465af7'
+                    },
+                    {
+                        groupId: '999',
+                        title: 'Repeating Event',
+                        start: moment(new Date(), 'YYYY-MM-DD').add(10, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
+                        color: '#5baa73'
+                    }
+                ]
+            });
+            calendar1.render();
+
+        $(document).on("submit", "#submit-schedule", function (e) {
+            e.preventDefault()
+            const title = $(this).find('#schedule-title').val()
+            const startDate = moment(new Date($(this).find('#schedule-start-date').val()), 'YYYY-MM-DD').format('YYYY-MM-DD') + 'T05:30:00.000Z'
+            const endDate = moment(new Date($(this).find('#schedule-end-date').val()), 'YYYY-MM-DD').format('YYYY-MM-DD') + 'T05:30:00.000Z'
+            const color = $(this).find('#schedule-color').val()
+            const event = {
+                title: title,
+                start: startDate || '2020-12-22T02:30:00',
+                end: endDate || '2020-12-12T14:30:00',
+                color: color || '#7858d7'
+            }
+            $(this).closest('#date-event').modal('hide')
+            calendar1.addEvent(event)
+        })
+    }
+
+    const progressBar = document.getElementsByClassName('circle-progress')
+    Array.from(progressBar, (elem) => {
+        const minValue = elem.getAttribute('data-min-value')
+        const maxValue = elem.getAttribute('data-max-value')
+        const value = elem.getAttribute('data-value')
+        const  type = elem.getAttribute('data-type')
+        if (elem.getAttribute('id') !== '' && elem.getAttribute('id') !== null) {
+            new CircleProgress('#'+elem.getAttribute('id'), {
+            min: minValue,
+        max: maxValue,
+        value: value,
+        textFormat: type,
+        });
+        }
+    })
+    /*---------------------------------------------------------------------
+            Vanila Datepicker
+    -----------------------------------------------------------------------*/
+    const datepickers = document.querySelectorAll('.vanila-datepicker')
+    Array.from(datepickers, (elem) => {
+    new Datepicker(elem)
+    })
+    const daterangePickers = document.querySelectorAll('.vanila-daterangepicker')
+    Array.from(daterangePickers, (elem) => {
+    new DateRangePicker(elem)
+    })
+
+    /*---------------------------------------------------------------------
+            Choies.js
+    -----------------------------------------------------------------------*/
+    const choies = document.querySelectorAll('.choicesjs')
+    Array.from(choies,(elem) => {
+        new Choices(elem, {
+            removeItemButton: true,
+        })
+    })
+})(jQuery);

+
+    $(document).ready(function () {
+        $('#basic').on('click', function () {
+            Swal.fire('Hello! This is a Basic Message.')
+    	});
+        $('#basic-title').on('click', function () {
+            Swal.fire(
+                'The Internet?',
+                'That thing is still around?',
+                'question'
+            )
+        });
+        $('#success').on('click', function () {
+            Swal.fire({                
+                icon: 'success',
+                title: 'Your work has been saved',
+                showConfirmButton: false,                
+            })
+        });
+        $('#info').on('click', function () {
+            Swal.fire({                
+                icon: 'info',
+                title: 'Good Job!',
+                showConfirmButton: false,                
+            })
+        });
+        $('#warning').on('click', function () {
+            Swal.fire({                
+                icon: 'warning',
+                title: 'Changes are not saved',
+                showConfirmButton: false,
+                
+            })
+        });
+        $('#danger').on('click', function () {
+            Swal.fire({
+                icon: 'error',
+                title: 'OOps!!',
+                text: 'Something went Wrong',
+                showConfirmButton: false,                
+            })
+        });
+        $('#confirmation').on('click', function () {
+            Swal.fire({
+                title: "Are you sure?",
+                text: "Once deleted, you will not be able to recover this imaginary file!",
+                icon: "warning",
+                buttons: true,
+                dangerMode: true,
+            })
+            .then((willDelete) => {
+                if (willDelete) {
+                    Swal.fire("Poof! Your imaginary file has been deleted!", {
+                        icon: "success",
+                    });
+                } else {
+                    Swal.fire("Your imaginary file is safe!");
+                }
+            });
+        });
+        $('#custom-buttons').on('click', function () {
+            Swal.fire("A wild Pikachu appeared! What do you want to do?", {
+                buttons: {
+                    cancel: "Run away!",
+                    catch: {
+                        text: "Throw Pokéball!",
+                        value: "catch",
+                    },
+                    defeat: true,
+                },
+            })
+            .then((value) => {
+                switch (value) {
+
+                    case "defeat":
+                        Swal.fire("Pikachu fainted! You gained 500 XP!");
+                        break;
+
+                    case "catch":
+                        Swal.fire("Gotcha!", "Pikachu was caught!", "success");
+                        break;
+
+                    default:
+                        Swal.fire("Got away safely!");
+                }
+            });
+        });
+        $('#ajax-request').on('click', function () {
+            Swal.fire({
+                text: 'Search for a movie. e.g. "La La Land".',
+                content: "input",
+                button: {
+                    text: "Search!",
+                    closeModal: false,
+                },
+            })
+            .then(name => {
+                if (!name) throw null;
+
+                return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
+            })
+            .then(results => {
+                return results.json();
+            })
+            .then(json => {
+                const movie = json.results[0];
+
+                if (!movie) {
+                    return Swal.fire("No movie was found!");
+                }
+
+                const name = movie.trackName;
+                const imageURL = movie.artworkUrl100;
+
+                Swal.fire({
+                    title: "Top result:",
+                    text: name,
+                    icon: imageURL,
+                });
+            })
+            .catch(err => {
+                if (err) {
+                    Swal.fire("Oh noes!", "The AJAX request failed!", "error");
+                } else {
+                    Swal.fire.stopLoading();
+                    Swal.fire.close();
+                }
+            });
+        }); 
+        $('#form-input').on('click', function () {
+            Swal.fire("Write something here:", {
+                content: "input",
+            })
+            .then((value) => {
+                Swal.fire(`You typed: ${value}`);
+            });
+        });      
+    });
\ No newline at end of file