<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<style>
body{
margin:0;
padding:0;
}
.accordion{
margin:0;
padding:1px;
border: 1px solid #d2d2d2;
}
.accordion .title{
margin:0;
padding-left:2px;
height:30px;
line-height:30px;
background-color: #1abc9c;
color:#fff;
border-bottom: 1px solid #fff;
}
.accordion ul{
margin:0;
padding:0;
}
.accordion li.item{
list-style: none;
}
.accordion h3.header{
margin:0;
height:25px;
line-height:25px;
border-bottom: 1px solid #fff;
background-color: #1abc9c;
color:#fff;
cursor:pointer;
}
.accordion span.icon{
float:left;
width:16px;
height:16px;
}
</style>
<script type="text/javascript">
(function($){
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#kkk').Accordion({
title:'导航菜单',
data:[
{id:1,pid:0,text:'aaa',icon:'a',url:null},
{id:2,pid:0,text:'bbb',icon:'b',url:null},
{id:3,pid:1,text:'aaa1',icon:'b',url:'a'},
{id:4,pid:1,text:'aaa2',icon:'b',url:'b'},
{id:5,pid:2,text:'bbb1',icon:'b',url:'b'},
{id:6,pid:0,text:'aaa1',icon:'b',url:'a'},
{id:7,pid:0,text:'777',icon:'b',url:'b'},
{id:8,pid:6,text:'bbb1',icon:'b',url:'b'}
]
});
});
</script>
</head>
<body>
<div style='height:70px;'>
</div>
<div style='width:200px;height:627px;' id='kkk'>
</div>
</body>
</html>
(function($){
$.fn.Accordion = function(method) {
if (typeof method == 'string') {
return $.fn.Accordion.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return $.fn.Accordion.methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist');
}
};
$.fn.Accordion.methods = {
init: function(options) {
var defaults = {
title:'menu',
data:[],
active: 0,
url: null,
format:function(bar){
return "<div>" + bar.text + "</div>";
}
};
var settings = $.extend({}, defaults, options);
return this.each(function(){
$(this).data('options', settings);
var el = $(this).addClass('accordion');
var data = new Array();
if(settings.url){
$.ajax({
url:url,
cache: false,
async:false,
dataType:'json',
success:function(result){
data = result;
}
});
}else{
data = settings.data;
}
data = p2s(data);
var html = new Array();
html.push("<h4 class=title>" + settings.title + "</h4><ul>");
$(data).each(function(){
var text = this.text;
var icon = this.icon;
html.push("<li class=item><h3 class=header><span class='icon " + icon + "'></span>" + text + "</h3><div class=body>");
$(this.children).each(function(){
html.push(settings.format(this));
});
html.push("</div></li></ul>");
});
el.append(html.join(''));
var headers = $('.header', el);
var H;
var padding = parseInt(el.css('padding'), 10);
var border = parseInt(el.css('border-width'), 10);
var h = el[0].style.height;
if(!h){
if(el.parent().is('body')){
H = $(window).height() - (padding + border)*2 - headers.size()*(headers.outerHeight()) - $('.title', el).outerHeight();
}else{
H = el.parent().height() - (padding + border)*2 - headers.size()*(headers.outerHeight()) - $('.title', el).outerHeight();
}
}else{
H = el.height() - headers.size()*(headers.outerHeight()) - $('.title', el).outerHeight();
}
headers.next('.body').height(H).hide();
headers.click(function(){
$('li.actived').removeClass('actived').find('.body').hide();
$(this).parent('li').addClass('actived').find('.body').show();
});
headers.eq(0).trigger('click');
});
}
};
})(jQuery);
function p2s(data) {
var i,l;
if (!data) return [];
var r = [];
var t = [];
for (i=0, l=data.length; i<l; i++) {
t[data[i]["id"]] = data[i];
}
for (i=0, l=data.length; i<l; i++) {
if (t[data[i]["pid"]]) {
if (!t[data[i]["pid"]]["children"])
t[data[i]["pid"]]["children"] = [];
t[data[i]["pid"]]["children"].push(data[i]);
} else {
r.push(data[i]);
}
}
return r;
}
相关推荐
jQuery UI Accordion是一款非常流行的JavaScript库，用于创建交互式的折叠菜单。这个组件使得网页内容能够以一种有序且节省空间的方式展现，用户可以逐个展开或关闭各个部分，从而提高用户体验。在本文中，我们将...
在本文中，我们将深入探讨Silverlight中的Accordion组件及其在动态生成场景中的应用。Silverlight，由微软开发，是一种用于创建富互联网应用程序（RIA）的技术，它允许开发者构建具有丰富的交互性和多媒体功能的Web...
"Accordion折叠面板+CollapsiblePanel 面板隐藏" 是一种常见的UI设计模式，尤其在Web开发中广泛应用。这个压缩包文件包含了实现这种设计模式的相关资源，下面我们将深入探讨这两个组件以及它们在实际开发中的应用。 ...
jQuery Accordion是一款非常流行的JavaScript插件，用于创建可折叠的面板式布局，常用于构建菜单栏、信息分类或导航结构。在本示例中，我们将深入探讨如何利用jQuery Accordion来构建一个树形菜单栏框架。 首先，让...
在网页设计和开发中，jQuery Accordion 是一种常见的交互元素，它通过折叠和展开的方式组织内容，使得用户能够更高效地浏览和导航。这个技术基于流行的JavaScript库jQuery，以其简洁的API和强大的功能赢得了开发者们...
Accordion控件是Ajax技术中一个常用的交互组件，它在网页设计和开发中有着广泛的应用。Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建动态网页的技术，允许在不重新加载整个页面的...
Accordion控件是网页设计中常用的一种交互元素，它允许用户以折叠的方式查看和隐藏内容，通常用于节省页面空间并提供良好的用户体验。动态制作Accordion控件意味着我们不是在页面静态加载时预定义这些菜单项，而是在...
《jQuery Accordion 源码解析》 在Web开发领域，jQuery库以其简洁的API和强大的功能深受开发者喜爱。其中，jQuery UI中的Accordion组件是一种常见的交互元素，它将多个内容区块折叠在一个有限的空间内，用户可以...
在IT行业中，"accordion"是一种常见的用户界面设计模式，它被广泛应用于网页和应用程序中，以提供紧凑且可扩展的内容展示方式。手风琴效果，正如其名，模仿了传统乐器手风琴的开合动作，允许用户通过点击标题来展开...
"accordion0.96.zip" 是一个与Delphi编程相关的压缩包，可能包含了一个名为"accordion"的组件或库，用于在Delphi应用程序中实现折叠面板（Accordion）的效果。Delphi是一款强大的对象 Pascal 编程工具，常用于开发...
在本篇博客中，我们将聚焦于"accordion布局"这一特性，它是ExtJS布局系统中的一种特殊形式。 Accordion布局，又称为折叠面板布局，允许在一个容器内放置多个面板，这些面板会像手风琴一样展开和折叠。这种布局模式...
jQuery Accordion是一款非常流行的JavaScript库，它主要用于创建交互式的折叠面板，常用于网站的导航菜单、FAQs或任何需要组织成可展开/折叠内容的场景。这个组件是jQuery UI库的一部分，提供了优雅的动画效果和易用...
Accordion分组菜单是一种常见的网页元素，它以折叠的方式展示内容，可以有效节省页面空间并提高用户体验。在网页设计中，动态绑定数据是从数据库获取信息并在页面加载时或用户交互时实时更新内容的一种方法。然而，...
【ASP.NET AJAX控件系列 第2讲：Accordion（Hona）】 在ASP.NET AJAX框架中，Accordion控件是一个非常实用的交互式用户界面组件。它允许开发者在一个有限的空间内展示多段内容，用户可以逐个展开或折叠这些内容，...
Bootstrap Accordion是一款基于Bootstrap框架的交互式组件，它实现了手风琴式的折叠面板效果，使得网页内容能够以紧凑的形式展示，同时保持了良好的可读性和用户体验。在网页设计和开发中，Bootstrap Accordion常...
### Ajax控件之Accordion控件问题解决办法 在开发基于ASP.NET AJAX的应用程序时，Accordion控件是一个非常有用的工具，它能够帮助用户更好地组织页面内容，实现内容的折叠与展开功能，提高用户体验。然而，在使用...
**jQuery和CSS3半透明垂直Accordion特效详解** Accordion特效在网页设计中被广泛使用，它是一种可折叠的面板集合，用户可以逐个展开或关闭这些面板以查看或隐藏内容。在本项目中，我们将深入探讨如何利用jQuery库和...
**基于JQuery的Accordion菜单源码解析** Accordion菜单是一种常见的网页交互元素，它允许用户通过展开和折叠的方式查看和操作菜单项。在HTML页面中，使用JQuery库可以轻松实现这种效果，尤其对于构建可扩展的、易于...
手风琴（Accordion）是一种常见的用户界面元素，尤其在网页设计中被广泛使用。它通过折叠和展开的方式展示内容，可以有效地节省空间，提高用户体验。本篇将详细讲解如何使用jQuery来实现一个手风琴效果。 一、...