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实现手风琴效果的更多相关文章
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- jquery横向手风琴效果2
<!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
- jQuery做出手风琴效果
今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...
- jquery版手风琴效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery实现手机竖直手风琴效果
效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
随机推荐
- 忘记密码流程——UUID,AES
忘记密码流程 1.进入忘记密码页面 2. 后台检验参数合法性(null,验证码,邮箱合法性) 3,生成更新密码链接,并将相关参数写入DB link=urlBase(baseurl)+updatePas ...
- 如何在HTML中加载Flash(2种实现方法)_HTML/Xhtml_网页制作
点评:如何在HTML中加载Flash,为网页添加更多的色彩,普通的网页以无法满足用户的需求,接下来为大家介绍下2种在HTML中加载Flash的方法,感兴趣的各位可以适当参考下,希望对你有所帮助 第一种 ...
- 运行easy_install安装python相关程序时提示failed to create process
运行easy_install安装python相关程序时提示failed to create process,因为安装了两个python,卸载了的那个目录没删除,删除了另外的python目录后这个问题就 ...
- 如何解救在异步Java代码中已检测的异常
Java语言通过已检测异常语法所提供的静态异常检测功能非常实用,通过它程序开发人员可以用很便捷的方式表达复杂的程序流程. 实际上,如果某个函数预期将返回某种类型的数据,通过已检测异常,很容易就可以扩展 ...
- C#使用ESC指令控制POS打印机打印小票
1.前言 C#打印小票可以与普通打印机一样,调用PrintDocument实现.也可以发送标注你的ESC指令实现.由于 调用PrintDocument类时,无法操作使用串口或TCP/IP接口连接的po ...
- Struts框架——(二)Struts原理with登录实例
二. Struts基本工作流程 假设现在有以下情景: 用户正在浏览一个用STRUTS的技术构建的网站主页,主页上有个登陆表单,用户填好登陆名和密码,单击"登陆"按钮,就激活了以下一 ...
- javac 命令出现 找不到文件 问题及解决办法
如果环境配置好了,使用java -version回车可以正常查看到版本信息. 使用javac Demo.java 如果提示文件找不到 可能原因1: 源文件与当前命令行不在同目录下,这时候就要切换到同一 ...
- POJ 1151 Atlantis(线段树-扫描线,矩形面积并)
题目链接:http://poj.org/problem?id=1151 题目大意:坐标轴上给你n个矩形, 问这n个矩形覆盖的面积 题目思路:矩形面积并. 代码如下: #include<stdio ...
- eclipse删除所有空行
在eclipse中删除某一行就用ctrl+D快捷键.如果你想删除一个文件中的所有空行呢. 可以用下面方法. 1.打开源码编辑器 2.使用快捷键Ctrl+f 3.在Find输入框中输入:^\ ...
- SQL Server 列存储性能调优(翻译)
原文地址:http://social.technet.microsoft.com/wiki/contents/articles/4995.sql-server-columnstore-performa ...