jquery - 在 UberAccordion 中旋转标题文本

Question

我使用链接创建了一个响应式 Accordion

JSFiddle/* * 优步 Accordion * * 加布里埃尔·阿萨洛斯 **/

(函数($){

var UberAccordion = function(parent, options) {

    // Default settings

    var defaults = {
        verticalClass    : 'accordion-vertical',    // Class to apply when orientation is vertical
        horizontalClass  : 'accordion-horizontal',  // Class to apply when orientation is horizontal
        activeSlideClass : 'active',                // Class to apply on active accordion slide
        orientation      : 'vertical',              // Accordion orientation
        orientationQuery : '(max-width: 700px)',    // Media query which causes orientation change
        startSlide       : 1,                       // Starter slide
        openMultiple     : false,                   // Set to true for multiple open slides at a time
        autoPlay         : false,                   // Auto-play
        autoPlaySpeed    : 5000,                    // Auto-play interval
        slideEvent       : 'click',                 // Open slide event
        animationSpeed   : 333,                     // Animation Speed
        headerItem       : typeof options.headerClass === 'undefined' ? 'h1' : '.' + options.headerClass,     // Header class
        contentItem      : typeof options.contentClass === 'undefined' ? 'div' : '.' + options.contentClass   // Content class
    };

    var settings  = $.extend(true, {}, defaults, options);                  // Add user settings with overwrite
    var el        = parent.children('ul');                                  // Accordion container
    var slides    = el.children().children(settings.contentItem);           // Accordion slides
    var headers   = el.children('li').children(settings.headerItem);        // Accordion headers
    var state     = {};                                                     // Keeps current accordion state (ie. currentSlide, orientation, etc)

    var showSlideCallback = function() {
        el.trigger('ua-slide-changed');
    }

    this.toggleSlide = function(slideNumber, override) {

        if(!settings.openMultiple) {

            // If multiple is disabled, open current slide and close other

            if(slideNumber !== state.currentSlide || override) {
                this.hideSlide($(slides[el.children('li.' + settings.activeSlideClass).index()]));
                this.showSlide($(slides[slideNumber]));
            }

        } else {

            // If multiple is enabled, toggle clicked slide

            if($(slides[slideNumber]).parent().hasClass(settings.activeSlideClass)) {
                this.hideSlide($(slides[slideNumber]));
            } else {
                this.showSlide($(slides[slideNumber]));
            }
        }

        state.currentSlide = slideNumber;
    }

    this.showSlide = function(slide) {

        if(state.orientation === "horizontal") {
            slide.slideDown(settings.animationSpeed, showSlideCallback);
        } else {
            slide.parent().animate({
                width: slide.parent().attr('data-width')
            }, settings.animationSpeed, showSlideCallback);
        }

        slide.parent().addClass(settings.activeSlideClass);
    }

    this.hideSlide = function(slide) {
        if(state.orientation === "horizontal") {
            slide.slideUp(settings.animationSpeed);
        } else {
            slide.parent().animate({
                width: slide.parent().children(settings.headerItem).attr('data-width')
            }, settings.animationSpeed);
        }

        slide.parent().removeClass(settings.activeSlideClass);
    }

    this.setOrientation = function(orientation) {

        el.removeClass(settings.horizontalClass + ' ' + settings.verticalClass);

        switch(orientation) {
            case 'vertical':
                el.addClass(settings.verticalClass);
                $('p').html('switch vertical mode');
                installVertical();
                break;

            case 'horizontal':
                el.addClass(settings.horizontalClass);

                // Don't wipe styles on first load

                if(typeof state.orientation !== 'undefined') {
                    uninstallVertical();
                }

                $('p').html('switch horizontal mode');
                applyHorizontalBase();

                break;
        }

        $(slides[state.currentSlide])
            .show()
            .parent().addClass(settings.activeSlideClass);

        state.orientation = orientation;
    }

    this.setAutoplay = function(enabled) {

        var _this = this;

        if(enabled) {
            state.autoPlayInterval = setInterval(function() {
                var totalSlides = el.children('li').children(settings.headerItem).length;
                state.currentSlide = state.currentSlide < (totalSlides - 1) ? state.currentSlide + 1 : 0;
                _this.toggleSlide(state.currentSlide, true);
            }, settings.autoPlaySpeed);
        } else {
            if(typeof state.autoPlayInterval !== "undefined") {
                clearInterval(state.autoPlayInterval);
            }
        }
    }

    // Installs styling and events for vertical slider

    var installVertical = function() {

        uninstallVertical();

        $(window).bind('resize', resizeContainer);

        applyVerticalBase();
        calculateSizes();
    }

    var applyVerticalBase = function() {

        slides.parent().css(CSSObject.SlideContainers);

        CSSObject.Headers.functions.setTransforms(-$(headers[0]).outerHeight(), 0);
        CSSObject.Slides.functions.setHeight(el.outerHeight(true));
        CSSObject.Slides.functions.setLeft($(headers[0]).outerHeight(true));

        headers.css(CSSObject.Headers.defaults);
        headers.setOuterWidth(el.innerHeight());
        slides.css(CSSObject.Slides.defaults);
    }

    var applyHorizontalBase = function() {
        slides.css({ 'display': 'none' });
    }

    // Calculate sizes and save widths in data attributes
    // for safe animating

    var calculateSizes = function() {

        var totalHeaderWidth = 0;
        var currentContainer = el.children('li.' + settings.activeSlideClass);
        var currentHeader    = currentContainer.children(settings.headerItem);
        var parentWidth      = parent.innerWidth();

        var slideWidth, headerWidth;

        headers.each(function() {
            headerWidth = $(this).outerHeight(true);
            totalHeaderWidth += headerWidth;

            $(this).parent().width(headerWidth);
            $(this).attr('data-width', headerWidth);
        });

        slides.each(function() {
            slideWidth  = parentWidth - totalHeaderWidth;
            headerWidth = $(this).parent().children(settings.headerItem).outerHeight(true);

            $(this).setOuterWidth(slideWidth);
            $(this).attr('data-width', slideWidth);

            $(this).parent().attr('data-width', slideWidth + headerWidth - 1);
        });

        currentContainer.width(parentWidth - totalHeaderWidth + currentHeader.outerHeight(true) - 1);

    }

    // Called on resize event - adjusts accordion width according
    // to parent to allow fluid design

    var resizeContainer = function() {

        if(state.orientation === "vertical") {

            // If we don't hide the accordion before reading the parent's width value
            // the parent will not auto-adjust in width

            el.css('display', 'none');
            el.width(parent.innerWidth());
            el.css('display', 'block');

            calculateSizes();
        }
    }

    // Uninstalls vertical events and styles

    var uninstallVertical = function() {

        $(window).unbind('resize', resizeContainer);

        el.removeAttr('style');
        el.children('li').removeAttr('style');
        slides.removeAttr('style');

        headers.removeAttr('style');
    }

    // Constructor

    var initialize = function(scope) {

        if(typeof options.headerClass !== 'undefined' && typeof options.contentClass === 'undefined') {
            throw("Content class must be defined along with header class.");
        }

        el.addClass('uberAccordion');

        headers.on(settings.slideEvent, function(e) {
            scope.toggleSlide(el.children('li').children(settings.headerItem).index(this));
            scope.setAutoplay(false);

            e.stopImmediatePropagation();
        });

        // If set to responsive, handle orientation changes

        if(settings.orientationQuery) {
            state.matchesQuery = window.matchMedia(settings.orientationQuery).matches;

            // If media query match state changes, switch orientation
            $(window).resize(function() {
                if(window.matchMedia(settings.orientationQuery).matches !== state.matchesQuery) {
                    state.matchesQuery = window.matchMedia(settings.orientationQuery).matches;
                    scope.setOrientation(state.orientation === 'vertical' ? 'horizontal' : 'vertical');
                }
            });

            if(state.matchesQuery) {
                settings.orientation = settings.orientation === 'vertical' ? 'horizontal' : 'vertical';
            }
        }

        state.currentSlide = settings.startSlide - 1;
        $(slides[state.currentSlide]).parent().addClass(settings.activeSlideClass);

        scope.setOrientation(settings.orientation);

        // Set-up auto-play if enabled

        if(settings.autoPlay && !settings.openMultiple) {
            scope.setAutoplay(true);
        }

        el.attr('data-accordion-active', "true");
    }

    initialize(this);
}

$.fn.uberAccordion = function(options) {

    // Avoid double instantiating

    return $(this).children("ul").attr('data-accordion-active') === "true" ? false : new UberAccordion(this, options);
}

// Set total width with padding and borders (outerWidth)

$.fn.setOuterWidth = function(value) {
    $(this).each(function() {
        var paddingLeft = isNaN(parseInt($(this).css('padding-left'), 10)) || $(this).css('padding-left') === '100%' ? 0 : parseInt($(this).css('padding-left'), 10);
        var paddingRight = isNaN(parseInt($(this).css('padding-right'), 10)) || $(this).css('padding-right') === '100%' ? 0 : parseInt($(this).css('padding-right'), 10);
        var borderLeft = isNaN(parseInt($(this).css('border-left-width'), 10)) ? 0 : parseInt($(this).css('border-left-width'), 10);
        var borderRight = isNaN(parseInt($(this).css('border-right-width'), 10)) ? 0 : parseInt($(this).css('border-right-width'), 10);

        $(this).width(value - paddingLeft - paddingRight - borderLeft - borderRight);
    });
}

// CSS Object for vertical accordion
// These base styles are necessary for all vertical accordions

var CSSObject = {

    SlideContainers: {
        'display': 'inline',
        'overflow': 'hidden',
        'float': 'left',
        'height': '100%',
        'position': 'relative'
    },

    Headers: {

        defaults: {
            'display': 'block',
            'float': 'left',
            'white-space': 'nowrap',
            'position': 'absolute',
            'top': '0',
            'left': '0',
            'transform-origin': '0 100% 0',
            '-webkit-transform-origin': '0 100%',
            '-moz-transform-origin': '0 100%',
            '-ms-transform-origin': '0 100%'
        },

        functions: {
            setTransforms: function(x, y) {
                CSSObject.Headers.defaults['-webkit-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                CSSObject.Headers.defaults['-moz-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                CSSObject.Headers.defaults['-ms-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                CSSObject.Headers.defaults['-sand-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                CSSObject.Headers.defaults['transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                //CSSObject.Headers.defaults['filter'] = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
            }
        }
    },

    Slides: {

        defaults: {
            'float': 'left',
            'height': 0,
            'display': 'block',
            'position': 'absolute',
            'top': '0'
        },

        functions: {
            setHeight: function(height) { CSSObject.Slides.defaults.height = height; },
            setLeft: function(left) { CSSObject.Slides.defaults.left = left; }
        }
    }
}

$('.accordionContainer').uberAccordion({
headerClass: 'title',
contentClass: 'content' 

});

}(jQuery));

在这里，我想将每个 div 的标题部分设置为面向其自己的内容，而不影响切换 View 。

例如标题 Slider1 面向它自己的内容，Slider2 面向它的内容等等。我试过在

中改变 Angular

CSSObject.Headers.defaults['transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";

但只改变到水平位置。有什么想法吗？

Answer 1

可以使用 CSS3 的变换属性旋转文本。请检查此链接:http://www.w3schools.com/cssref/css3_pr_transform.asp