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