jquery实现手风琴效果

html----accordion.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>simple Demo</title>
    <link rel="stylesheet" type="text/css" href="accordion.css">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body> 
    <div class="simple_container">
        <div class="type_select">
            <select>
                <option value="Chart">Chart</option>
                <option value="table">Table</option>
            </select>
        </div>
        <div class="simple_accordion">
            <div class="accordion_first">
                <a href="javascript:void(0)" class="accrodion_title" >css选择器的种类</a>
                <div class="accordion_content"></div>
            </div>
            <div class="accordion_second">
                <a href="javascript:void(0)" class="accrodion_title" >Array的常见方法</a>
                <div class="accordion_content"></div>
            </div>
            
        </div>
    </div>


</body>
<script src="../build/bundle.js"></script> //注意这里引用的是模块化后的文件，见webpack.config.js 中的output

</html>

js文件-----accordion.js

define(function() {
    // $(document).ready(function(){
    'use strict';
    var accordion = function() {
        this.$el = $(".simple_accordion");
        this._init();

    };
    accordion.prototype = {
        _init: function() {
            var self=this;
            $.get("accordion.json", function(data) {
                self.eventBind(data);
            });
        },
        // change select list
        eventBind: function(data) {
            $("select").change(function() {
                var type_content = $(this).val();
                if (type_content === "table") {
                    $(".simple_accordion").css("display", "none");
                } else {
                    $(".simple_accordion").css("display", "block");
                }

            });

            // bind event on parent element
            $(".simple_accordion").delegate('div', 'click', function(event) {
                var target = event.target.parentNode.className;
                var $first_content = $(".accordion_first").find("div");
                var $second_content = $(".accordion_second").find("div");
                var firstHtml = "";
                var secondHtml = "";
                $(".simple_accordion").addClass("big");
                if (target === "accordion_first") {
                    data.css_selector.forEach(function(element, index, arr) {
                        firstHtml += '<div class="css_list"><span class="icon_dot"></span><span class="css_text">' + element + '</span></div>';
                    });
                    $first_content.html("").append(firstHtml).show();
                    $second_content.html("").toggle();
                } else if (target === "accordion_second") {
                    data.Array_method.forEach(function(element, index, arr) {
                        secondHtml += '<div class="arr_list"><span class="icon_dot"></span><span class="arr_text">' + element + '</span></div>';
                    });
                    $second_content.html("").append(secondHtml).show();
                    $first_content.html("").toggle();
                }

            });

        }

    };
    return accordion;
});

css文件------accordion.css

.simple_container{
    margin-left: 100px;
}
.simple_accordion{
    width:200px;
    border: 2px solid #483d8b;
    margin-top: 5px;

}
.accrodion_title{
    /*border-bottom :2px solid #3cb371;*/
    padding: 5px;
    text-decoration: none;
    color: #9400d3;
    font-weight: bold;

}
.icon_dot{
    width: 4px;
    height: 6px;
    background-color: #0000ff;
    display: inline-block;
    padding-left: 3px; 
}
.css_list,.arr_list{
    padding-left: 10px;
}

本文假设手风琴中的内容是动态从服务器的accordion.json中获取。accordion.json

{
    "css_selector":["element_selector","id_selector","class_selector","attr_selector","descendant_selector","child_selector","adjscent_sibling_selector"],
    "Array_method":["contact","join","pop & push","(un)shift","splice","slice","sort","reverse"]
}

本文又使用了webpack将代码模块化。webpack.config.js

module.exports = {
  entry: './src/index.js',//页面入口文件配置
  output: {               //入口文件输出配置
    path: './build', 
    // publicPath: 'http://mycdn.com/', // This is used to generate URLs to e.g. images
    filename: 'bundle.js'
  },
  ststs:{
    color:true,
    modules:true,
    reasons:true
  },
  //加载器配置
  module: {
    loaders: [
      { test: /.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
      { test: /.css$/, loader: 'style-loader!css-loader' },
      { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}, // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /.svg$/,loader:"url?limit=15000&mimetype=image/svg+xml"},
      { test: /.woff(?v=d+.d+.d+)?$/,loader:"url?limit=100000&minetype=application/x-font-woff"},
      { test:/.html$/,loader:"html?attrs=img:src input:src"},
      { test: /.js$/, loader: 'jsx-loader?harmony' }
    ]
  }
};

入口文件index.js

var accordion=require("../src/accordion.js");
var accor =new accordion();

jquery实现手风琴效果

相关推荐