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();