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实现手风琴效果的更多相关文章

  1. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  2. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  4. jquery横向手风琴效果2

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  5. jQuery做出手风琴效果

    今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...

  6. jquery版手风琴效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

  8. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  9. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

随机推荐

  1. MVC Razor基础

    @ 可以编写一条C#语句@{} 可以编写一组C#语句@: 将文字内容直接输出到页面上去@() 在一句中将一段C#代码包括起来,证明这一句完整的C#代码 Razor解决路径问题: Html.Action ...

  2. 控制台telnet连接后无法关闭

    按下ctrl+］然后再quit就可以close connection

  3. LinckedhashMap原理

    http://zhangshixi.iteye.com/blog/673789 TreeMap的key是有顺序的,是自然顺序,也可以指定比较函数. 但默认不是按插入的顺序.  为了让Map  JSON ...

  4. 驱动开发学习笔记. 0.02 基于EASYARM-IMX283 烧写uboot和linux系统

    驱动开发读书笔记. 0.02 基于EASYARM-IMX283 怎么烧写自己裁剪的linux内核?(非所有arm9通用) 手上有一块tq2440,但是不知道什么原因,没有办法烧boot进norflas ...

  5. JavaScript学习（一）—处理事件

    一.处理事件(一) 事件(event)是用户在访问页面时执行的操作.提交表单和在图像上移动鼠标就是两种事件.当浏览器探测到一个事件时,比如用鼠标单击或按键,它可以触发与这个事件相关联的JavaScri ...

  6. 2016. last day in office

    外面黑了,水面上黑魆魆的看不清楚了. 明天请假了,2017年再见! 2017加油! 2017 English improving!

  7. js常用方法

    若未声明,则都是js的方法 1.indexOf indexOf(str):默认返回字符串中第一次出现索引位置 的下标,没有则返回-1 indexOf(str,position):返回从position ...

  8. 关于meta标签

    一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

  9. 安装CocoaPods碰到的问题

    1.安装完Pods后第一次使用pod install命令提示"Setting up CocoaPods master repo" 解决办法: 第一次使用pod命令时,先执行以下po ...

  10. php框架制做笔记

    在学习完基础之后,最好的提高方式是做一个自己的框架,因为框架会用到各个知识点,在制做过程中,复习,巩固,提高. 在框架中,因为是单入口,整个脚本运行时都存在的变量我们应该设为静态变量,这样它在每个地方 ...