accordion

最新推荐文章于 2024-07-11 20:55:36 发布

ruanzy888888

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量93

点赞数

文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/ruanzy888888/article/details/84449373

版权

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

ruanzy888888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
accordion

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en&
复制链接

扫一扫