React.js+Velocity.js 无障碍性手风琴导航条

React + a11y Simple Accordion Example 该导航条支持tab/enter按键组合进行遍历（展开/合拢）。

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2672
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var renderNode = document.getElementById("accordions");

// This enables react components to work well on touch devices
React.initializeTouchEvents(true);

// In react everything is organized as a self contained object.
// This is awesome. instead of rouge functions dealing with vauge selectors, like in jquery, we have methods and we set properties. That's it really, and it works very well.

/////////////////////////////////////
// Accordion Component
/////////////////////////////////////
var Accordion = React.createClass({
    displayName: "Accordion",

render: function render() {
        // Look into this vvvv. I believe there is a better way than concatenating a string to dynamic properties. Probably some sort of binding?
        var classes = "accordion " + this.props.theme;
        return React.createElement(
            "div", {
                className: classes
            },
            this.props.children
        );
    }
});

/////////////////////////////////////
// Accordion Item Component
////////////////////////////////////
var AccordionItem = React.createClass({
    displayName: "AccordionItem",

// Initial setup
    getInitialState: function getInitialState() {
        return {
            expanded: this.props.expanded
        };
    },

// Actions  
    expand: function expand() {
        this.setState({
            expanded: true
        });
    },
    collapse: function collapse() {
        this.setState({
            expanded: false
        });
    },
    toggleExpansion: function toggleExpansion() {
        this.setState({
            expanded: !this.state.expanded
        });
    },

// Events
    handleClick: function handleClick() {
        this.toggleExpansion();
    },

handleKeyPress: function handleKeyPress(ev) {
        var key = ev.keyCode;
        console.log(ev);

// Enter
        if (key === 13) {
            this.toggleExpansion();
        }

// Esc
        if (key === 27) {
            this.collapse();
        }
    },

// Render
    render: function render() {
        // You can think of the render function as the "Template"
        // Here is where we set our state on the actual DOM element
        // We detect via the expanded state of the component what state
        // things like aria-hidden and tab-indexs should be in as well as
        // adjusting class names to change appearance.
        // A REAL nice way to build UI, give it a try.
        // DO NOTE: This is not the render function that is responsible for actually placing the element on the screen. That comes later :)

var expandState = this.state.expanded ? "is-expanded" : "is-collapsed",
            hiddenState = this.state.expanded ? "" : "hidden",
            ariaHiddenState = this.state.expanded ? "false" : "true",
            tabState = this.state.expanded ? "0" : "-1",
            classes = "accordion-item " + expandState;

// OK, now take all that state and tell React how to render it into a template
        return React.createElement(
            "div", {
                className: classes
            },
            React.createElement(
                "header", {
                    onClick: this.handleClick,
                    onKeyDown: this.handleKeyPress,
                    tabIndex: "0"
                },
                React.createElement(
                    "span",
                    null,
                    "Tab-Index = ",
                    tabState
                ),
                React.createElement(
                    "span",
                    null,
                    "Aria-Hidden = ",
                    ariaHiddenState
                ),
                React.createElement(
                    "span",
                    null,
                    "Hidden = ",
                    hiddenState,
                    " "
                )
            ),
            React.createElement(
                "section", {
                    "aria-hidden": ariaHiddenState,
                    hidden: hiddenState,
                    tabIndex: tabState,
                    onKeyDown: this.handleKeyPress
                },
                React.createElement(
                    "h2",
                    null,
                    "Content"
                ),
                "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim inventore velit sint quod blanditiis, sapiente voluptatibus, molestiae, dolore ipsam labore quaerat veritatis fuga libero! Explicabo aperiam sapiente optio consectetur placeat."
            )
        );
    }
});

// Where the "Magic" happens.
React.render(React.createElement(
    "div",
    null,
    React.createElement(
        Accordion, {
            theme: "red",
            toggleType: "all"
        },
        React.createElement(AccordionItem, null),
        React.createElement(AccordionItem, {
            expanded: "true"
        }),
        React.createElement(AccordionItem, null),
        React.createElement(AccordionItem, null)
    ),
    React.createElement(
        Accordion, {
            theme: "light-blue",
            toggleType: "single"
        },
        React.createElement(AccordionItem, null),
        React.createElement(AccordionItem, null),
        React.createElement(AccordionItem, null),
        React.createElement(AccordionItem, null)
    )
), renderNode);

编译

CSS

body {
    min-height: 100vh;
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(bottom, #f5f5f5, #fff);
    background-image: linear-gradient(to top, #f5f5f5, #fff);
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
}
.container {
    width: 100%;
    max-width: 500px;
}
.accordion {
    width: 100%;
    height: auto;
    margin: 10px 0px;
}
.accordion .accordion-item header {
    padding: 20px;
    background: #222;
    color: #fff;
    cursor: pointer;
    font-size: 0.9em;
    border-bottom: solid 1px #111;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
}
.accordion .accordion-item header:hover {
    background: #111;
}
.accordion .accordion-item section {
    background: #fff;
    padding: 40px;
}
.accordion .accordion-item.is-expanded section {
    display: block;
}
.accordion .accordion-item.is-collapsed section {
    display: none;
}
.accordion.dark .accordion-item:nth-child(1) header {
    background: #1a1a1a;
    border-bottom: solid 5px #131313;
}
.accordion.dark .accordion-item:nth-child(1) header:hover {
    background: #090909;
}
.accordion.dark .accordion-item:nth-child(2) header {
    background: #131313;
    border-bottom: solid 5px #030303;
}
.accordion.dark .accordion-item:nth-child(2) header:hover {
    background: #090909;
}
.accordion.dark .accordion-item:nth-child(3) header {
    background: #0b0b0b;
    border-bottom: solid 5px black;
}
.accordion.dark .accordion-item:nth-child(3) header:hover {
    background: #090909;
}
.accordion.dark .accordion-item:nth-child(4) header {
    background: #030303;
    border-bottom: solid 5px black;
}
.accordion.dark .accordion-item:nth-child(4) header:hover {
    background: #090909;
}
.accordion.dark .accordion-item:nth-child(5) header {
    background: black;
    border-bottom: solid 5px black;
}
.accordion.dark .accordion-item:nth-child(5) header:hover {
    background: #090909;
}
.accordion.dark .accordion-item section h2 {
    color: #222;
}
.accordion.blue .accordion-item:nth-child(1) header {
    background: #1c5983;
    border-bottom: solid 5px #1a5077;
}
.accordion.blue .accordion-item:nth-child(1) header:hover {
    background: #164566;
}
.accordion.blue .accordion-item:nth-child(2) header {
    background: #1a5077;
    border-bottom: solid 5px #143f5e;
}
.accordion.blue .accordion-item:nth-child(2) header:hover {
    background: #164566;
}
.accordion.blue .accordion-item:nth-child(3) header {
    background: #17486a;
    border-bottom: solid 5px #0f2e44;
}
.accordion.blue .accordion-item:nth-child(3) header:hover {
    background: #164566;
}
.accordion.blue .accordion-item:nth-child(4) header {
    background: #143f5e;
    border-bottom: solid 5px #091d2b;
}
.accordion.blue .accordion-item:nth-child(4) header:hover {
    background: #164566;
}
.accordion.blue .accordion-item:nth-child(5) header {
    background: #113751;
    border-bottom: solid 5px #040c12;
}
.accordion.blue .accordion-item:nth-child(5) header:hover {
    background: #164566;
}
.accordion.blue .accordion-item section h2 {
    color: #1f6190;
}
.accordion.light-blue .accordion-item:nth-child(1) header {
    background: #337bae;
    border-bottom: solid 5px #2f72a2;
}
.accordion.light-blue .accordion-item:nth-child(1) header:hover {
    background: #2b6792;
}
.accordion.light-blue .accordion-item:nth-child(2) header {
    background: #2f72a2;
    border-bottom: solid 5px #28628b;
}
.accordion.light-blue .accordion-item:nth-child(2) header:hover {
    background: #2b6792;
}
.accordion.light-blue .accordion-item:nth-child(3) header {
    background: #2c6a96;
    border-bottom: solid 5px #215173;
}
.accordion.light-blue .accordion-item:nth-child(3) header:hover {
    background: #2b6792;
}
.accordion.light-blue .accordion-item:nth-child(4) header {
    background: #28628b;
    border-bottom: solid 5px #1a405b;
}
.accordion.light-blue .accordion-item:nth-child(4) header:hover {
    background: #2b6792;
}
.accordion.light-blue .accordion-item:nth-child(5) header {
    background: #25597f;
    border-bottom: solid 5px #142f43;
}
.accordion.light-blue .accordion-item:nth-child(5) header:hover {
    background: #2b6792;
}
.accordion.light-blue .accordion-item section h2 {
    color: #3683ba;
}
.accordion.red .accordion-item:nth-child(1) header {
    background: #ae3547;
    border-bottom: solid 5px #a33242;
}
.accordion.red .accordion-item:nth-child(1) header:hover {
    background: #932d3c;
}
.accordion.red .accordion-item:nth-child(2) header {
    background: #a33242;
    border-bottom: solid 5px #8b2b39;
}
.accordion.red .accordion-item:nth-child(2) header:hover {
    background: #932d3c;
}
.accordion.red .accordion-item:nth-child(3) header {
    background: #972e3e;
    border-bottom: solid 5px #74232f;
}
.accordion.red .accordion-item:nth-child(3) header:hover {
    background: #932d3c;
}
.accordion.red .accordion-item:nth-child(4) header {
    background: #8b2b39;
    border-bottom: solid 5px #5c1c26;
}
.accordion.red .accordion-item:nth-child(4) header:hover {
    background: #932d3c;
}
.accordion.red .accordion-item:nth-child(5) header {
    background: #7f2734;
    border-bottom: solid 5px #45151c;
}
.accordion.red .accordion-item:nth-child(5) header:hover {
    background: #932d3c;
}
.accordion.red .accordion-item section h2 {
    color: #ba394c;
}
.accordion.yellow .accordion-item:nth-child(1) header {
    background: #ffa719;
    border-bottom: solid 5px #ffa109;
}
.accordion.yellow .accordion-item:nth-child(1) header:hover {
    background: #f49700;
}
.accordion.yellow .accordion-item:nth-child(2) header {
    background: #ffa109;
    border-bottom: solid 5px #ea9100;
}
.accordion.yellow .accordion-item:nth-child(2) header:hover {
    background: #f49700;
}
.accordion.yellow .accordion-item:nth-child(3) header {
    background: #f99a00;
    border-bottom: solid 5px #cb7e00;
}
.accordion.yellow .accordion-item:nth-child(3) header:hover {
    background: #f49700;
}
.accordion.yellow .accordion-item:nth-child(4) header {
    background: #ea9100;
    border-bottom: solid 5px #ad6b00;
}
.accordion.yellow .accordion-item:nth-child(4) header:hover {
    background: #f49700;
}
.accordion.yellow .accordion-item:nth-child(5) header {
    background: #da8700;
    border-bottom: solid 5px #8e5800;
}
.accordion.yellow .accordion-item:nth-child(5) header:hover {
    background: #f49700;
}
.accordion.yellow .accordion-item section h2 {
    color: #ffad28;
}

HTML

React + a11y Simple Accordion Example 该导航条支持tab/enter按键组合进行遍历（展开/合拢）。

编辑器支持Emmet

快捷键

React + a11y Simple Accordion Example 该导航条支持tab/enter按键组合进行遍历（展开/合拢）。

babylon.js + react.js很棒的3d图表代码示例

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：