<!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;
}
