• 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();
  • 相关阅读:
    1.IntelliJ IDEA搭建SpringBoot的小Demo
    etc目录名字的意思---挖Linux中的古老缩略语
    CI当开启URL重写的时候,报错500 Internal Server Error
    app后端架构设计(转)
    Redis安装及主从配置
    ***Linux文件夹文件创建、删除、改名
    Redis中常用命令
    linux上ln链接命令详细说明
    Redis快速入门:安装、配置和操作
    redis的PHP扩展包安装方法
  • 原文地址:https://www.cnblogs.com/alisayuan/p/5275562.html
Copyright © 2020-2023  润新知