JS-網站互動設計程式進化之道-ContentPanels

發表於

JavaScript&JQuery-網站互動設計程式進化之道-Content Panels

學習筆記(10) - Content Panels

堅韌是成功的一大要素，只要在門上敲得夠久、夠大聲，終會把人喚醒的

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

十一、Content Panels

摺疊收合：bootstrap-Collapse

1
2
3
4
5
6
7
8
//jQuery accordion
$('.accordion').on('click', '.accordion-control', function(e){ // When clicked
    e.preventDefault();                    // Prevent default action of button
    $(this)                                // Get the element the user clicked on
        .next('.accordion-panel')            // Select following panel 
        .not(':animated')                    // If it is not currently animating
        .slideToggle();                      // Use slide toggle to show or hide it
    });

頁籤面板：bootstrap-Navs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//jQuery tab-list
$('.tab-list').each(function(){                   // Find lists of tabs
    var $this = $(this);                            // Store this list
    var $tab = $this.find('li.active');             // Get the active list item
    var $link = $tab.find('a');                     // Get link from active tab
    var $panel = $($link.attr('href'));             // Get active panel

    $this.on('click', '.tab-control', function(e) { // When click on a tab
        e.preventDefault();                           // Prevent link behavior
        var $link = $(this),                          // Store the current link
            id = this.hash;                           // Get href of clicked tab 

        if (id && !$link.is('.active')) {             // If not currently active
        $panel.removeClass('active');               // Make panel inactive
        $tab.removeClass('active');                 // Make tab inactive

        $panel = $(id).addClass('active');          // Make new panel active
        $tab = $link.parent().addClass('active');   // Make new tab active 
        }
    });
});

懸浮視窗：bootstrap-Modal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//jQuery modal
var modal = (function() {                         // Declare modal object

    var $window = $(window);                        // Store the window
    var $modal = $('<div class="modal"/>');         // Create markup for modal
    var $content = $('<div class="modal-content"/>');
    var $close = $('<button role="button" class="modal-close">close</button>');

    $modal.append($content, $close);                // Add close button to modal

    $close.on('click', function(e){                 // If user clicks on close
        e.preventDefault();                           // Prevent link behavior
        modal.close();                                // Close the modal window
    });

    return {                                        // Add code to modal
        center: function() {                          // Define center() method
        // Calculate distance from top and left of window to center the modal
        var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2;
        var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2;
        $modal.css({                                // Set CSS for the modal
            top:top + $window.scrollTop(),            // Center vertically
            left:left + $window.scrollLeft()          // Center horizontally
        });
        },
        open: function(settings) {                     // Define open() method
        $content.empty().append(settings.content);   // Set new content of modal

        $modal.css({                                 // Set modal dimensions
            width: settings.width || 'auto',           // Set width
            height: settings.height || 'auto'          // Set height
        }).appendTo('body');                         // Add it to the page

        modal.center();                              // Call center() method
        $(window).on('resize', modal.center);        // Call it if window resized
        },
        close: function() {                            // Define close() method
        $content.empty();                            // Remove content from modal
        $modal.detach();                             // Remove modal from page
        $(window).off('resize', modal.center);       // Remove event handler
        }
    };
}());

滑動面板-bootstrapcarousel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//jQuery slider
$('.slider').each(function() {              // For every slider
    var $this   = $(this);                    // Current slider
    var $group  = $this.find('.slide-group'); // Get the slide-group (container)
    var $slides = $this.find('.slide');       // Create jQuery object to hold all slides
    var buttonArray  = \[\];                    // Create array to hold navigation buttons
    var currentIndex = 0;                     // Hold index number of the current slide
    var timeout;                              // Sets gap between auto-sliding

    function move(newIndex) {          // Creates the slide from old to new one
        var animateLeft, slideLeft;      // Declare variables

        advance();                       // When slide moves, call advance() again

        // If it is the current slide / animating do nothing
        if ($group.is(':animated') || currentIndex === newIndex) {  
        return;
        }

        buttonArray\[currentIndex\].removeClass('active'); // Remove class from item
        buttonArray\[newIndex\].addClass('active');        // Add class to new item

        if (newIndex > currentIndex) {   // If new item > current
        slideLeft = '100%';            // Sit the new slide to the right
        animateLeft = '-100%';         // Animate the current group to the left
        } else {                         // Otherwise
        slideLeft = '-100%';           // Sit the new slide to the left
        animateLeft = '100%';          // Animate the current group to the right
        }
        // Position new slide to left (if less) or right (if more) of current
        $slides.eq(newIndex).css( {left: slideLeft, display: 'block'} );

        $group.animate( {left: animateLeft}, function() {    // Animate slides and
        $slides.eq(currentIndex).css( {display: 'none'} ); // Hide previous slide
        $slides.eq(newIndex).css( {left: 0} ); // Set position of the new item
        $group.css( {left: 0} );               // Set position of group of slides
        currentIndex = newIndex;               // Set currentIndex to the new image
        });
    }

    function advance() {                     // Used to set
        clearTimeout(timeout);                 // Clear previous timeout
        timeout = setTimeout(function() {      // Set new timer
        if (currentIndex < ($slides.length - 1)) { // If slide < total slides
            move(currentIndex + 1);            // Move to next slide
        } else {                             // Otherwise
            move(0);                           // Move to the first slide
        }
        }, 4000);                              // Milliseconds timer will wait
    }

    $.each($slides, function(index) {
        // Create a button element for the button
        var $button = $('<button type="button" class="slide-btn">&bull;</button>');
        if (index === currentIndex) {    // If index is the current item
        $button.addClass('active');    // Add the active class
        }
        $button.on('click', function() { // Create event handler for the button
        move(index);                   // It calls the move() function
        }).appendTo('.slide-buttons');   // Add to the buttons holder
        buttonArray.push($button);       // Add it to the button array
    });

    advance();                          // Script is set up, advance() to move it


});

相片檢視

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//jQuery thumbnail
var request;                         // Latest image to be requested
var $current;                        // Image currently being shown 
var cache = {};                      // Cache object
var $frame = $('#photo-viewer');     // Container for image
var $thumbs = $('.thumb');           // Thumbnails

function crossfade($img) {           // Function to fade between images
                                        // Pass in new image as parameter
    if ($current) {                    // If there is currently an image showing
        $current.stop().fadeOut('slow'); // Stop any animation & fade it out
    }

    $img.css({                         // Set the CSS margins for the image
        marginLeft: -$img.width() / 2,   // Negative margin of half image's width
        marginTop: -$img.height() / 2    // Negative margin of half image's height
    });

    $img.stop().fadeTo('slow', 1);     // Stop animation on new image & fade in

    $current = $img;                   // New image becomes current image

}

$(document).on('click', '.thumb', function(e){ // When a thumb is clicked on
    var $img,                               // Create local variable called $img
        src = this.href;                    // Store path to image
        request = src;                      // Store latest image request

    e.preventDefault();                     // Stop default link behavior

    $thumbs.removeClass('active');          // Remove active from all thumbs
    $(this).addClass('active');             // Add active to clicked thumb

    if (cache.hasOwnProperty(src)) {        // If cache contains this image
        if (cache\[src\].isLoading === false) { // And if isLoading is false
        crossfade(cache\[src\].$img);         // Call crossfade() function
        }
    } else {                                // Otherwise it is not in cache
        $img = $('<img/>');                   // Store empty <img/> element in $img
        cache\[src\] = {                        // Store this image in cache
        $img: $img,                         // Add the path to the image
        isLoading: true                     // Set isLoading property to false
        };

        // Next few lines will run when image has loaded but are prepared first
        $img.on('load', function(){           // When image has loaded
        $img.hide();                        // Hide it
        // Remove is-loading class from frame & append new image to it
        $frame.removeClass('is-loading').append($img);
        cache\[src\].isLoading = false;       // Update isLoading in cache
        // If still most recently requested image then
        if (request === src) {
            crossfade($img);                  // Call crossfade() function
        }                                   // Solves asynchronous loading issue
        });

        $frame.addClass('is-loading');        // Add is-loading class to frame

        $img.attr({                           // Set attributes on <img> element
        'src': src,                         // Add src attribute to load image
        'alt': this.title || ''             // Add title if one was given in link
        });

    }

});

// Final line runs once when rest of script has loaded to show the first image
$('.thumb').eq(0).click();                // Simulate click on first thumb