自定义模块化页面

最新推荐文章于 2024-07-25 11:52:08 发布

PanDa____

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量70

点赞数

分类专栏： HTML JavaScript 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/panda____/article/details/134434185

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

 var pagenav;
 (function(pagenav) {
    //模块页面地址列表
	pagenav.getMenu=function(){
		let list = [{
				title: '知识库',
				url: "knowledge.html",
			},
			{
				title: '体验测试',
				url: "experience.html",
			},
			{
				title: '高级设置',
				url: "setting.html",
			}
			
		];
		return list;
	};
    //列表渲染
	pagenav.renderMenu= function() {
		var html = '';
		let data = this.getMenu();
		for (i = 0; i < data.length;i++) {
			html+= `<li page-src="${data[i].url}">${data[i].title}</li>`;
		};
		$('.page-nav ul').html(html);
	};
    //获取地址并渲染模块页面
	pagenav.load=function(page,href){
		$.ajax({
			url: href,
			type: 'get',
			dataType: 'html',
			success: function(data) {
			   $('.page-main').append('<div class="'+page+'"></div>');
			   $('.page-main .'+page).html(data);
			},
			error: function(xhr, textstatus, thrown) {
				return layer.msg('Status:' + xhr.status + '，' + xhr.statusText +
					'，请稍后再试！');
			}
		});
	};
	
	init=function(){
		 pagenav.renderMenu();	
	};
	
	$(function(){			
		init();
         //点击列表 加载模块页面事件
		$('.page-nav ul').on('click','li',function() {
			
			$(this).addClass('active').siblings('li').removeClass('active');

			//用于判断模块页面是否加载，若切换页面时无需保留已加载页面数据，则清空.page-main下的子元素 加载新模块页面即可
            let page=$(this).attr('page-src').split('.')[0]+'Page';
			$('.page-main').children().hide();
			if($('.page-main').find('.'+page).length<=0){
				 pagenav.load(page,$(this).attr('page-src'));
			}else{
				$('.page-main').find('.'+page).show();
			}
		});
        //初始默认开启第一个模块页面
		$('.page-nav ul li:eq(1)').click();
	})
})(pagenav||(pagenav={}));

需加载模块页面写法如下（即框架页面）：

<body>
    <div class="page-head">
	     <span class="logo"><img src="images/logo.png"></span>
         <!--模块页面导航-->
		 <div class="page-nav">
			<ul>
				<li>知识库</li>
				<li class="active">体验测试</li>
			</ul>
		</div>
	</div>

	<div class="page-main">
         <!--模块页面加载区域-->
	</div>
<body>

模块页面写法如下：（无需写 <html><head><body>等标签直接写<div>等DOM标签即可）

<!--模块页面内容写法-->
<link href="css/experience.css" rel="stylesheet" />
<div class="experience">
</div>

PanDa____

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义模块化页面

自定义模块化页面
复制链接

扫一扫

专栏目录