1、页面切换、组件切换

最新推荐文章于 2023-12-22 10:02:01 发布

weixin_33696106

最新推荐文章于 2023-12-22 10:02:01 发布

阅读量331

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2991733/blog/853320

版权

2019独角兽企业重金招聘Python工程师标准>>>

jQuery全屏滚动插件 fullPage.js

官网：http://www.uedsc.com/fullpage.html

引入文件

	<script src="../js/jquery-3.1.1.min.js"></script>
	<script src="../js/jquery.fullPage.js"></script>
	<script src="../js/jquery-ui.js"></script>

使用传入对象

$(function(){
    $('#fullpage').fullpage({
        'verticalCentered': false,
        'css3': true,
        'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        'navigation': true,
        'navigationPosition': 'right',
        'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
    })
})

组件切换，fullpage页面切换事件与当前页面结合起来

$(function(){
			$("#h5").fullpage({
				'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
				//当当前页面离开时，事件回调
				onLeave:function( index,nextIndex,direction){//当前位置，下一个位置,方向
					$("#h5").find(".page").eq(index-1).trigger("onLeave")
				},
				//第二个页面载入完成
				afterLoad:function(anchorLink ,index){ //锚点名称 ，index  
					$("#h5").find(".page").eq(index-1).trigger("onLoad")
				}
			})
			
			//为Dom元素作事件
				$('.page').on("onLeave",function(){
					console.log($(this).attr("id"),"==>>","onLeave")
				})
				
				$('.page').on("onLoad",function(){
					console.log($(this).attr("id"),"==>>","onLeave")
				})
		})
	</script>

触发所有页面事件

触发第一个页面事件

组件与component结合

triggerHandler不光可以阻止事件冒泡，而且只会影响匹配到的第一个元素，所以用triggerHandler和return false的结果一样，原理不同。

注意：DOM事件的小循环传播---无限循环（子元素与父元素监听相同事件，父元素触发事件执行子元素，子元素触发事件，又会被父元素监听到，陷入无限循环）

<script>
$(function(){
			$("#h5").fullpage({
				'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
				//当当前页面离开时，事件回调
				onLeave:function( index,nextIndex,direction){//当前位置，下一个位置,方向
					$("#h5").find(".page").eq(index-1).trigger("onLeave");
				},
				//第二个页面载入完成
				afterLoad:function(anchorLink ,index){ //锚点名称 ，index  
					$("#h5").find(".page").eq(index-1).trigger("onLoad");
				}
			})
			
			//为Dom元素作事件
				$('.page').on("onLeave",function(){ //当前页面触发onLeave事件，component组件执行onLeave事件
					console.log($(this).attr("id"),"==>>","onLeave");
					$(this).find(".component").triggerHandler("onLeave");//阻止事件向上传播方法一
				})
				
				$('.page').on("onLoad",function(){
					console.log($(this).attr("id"),"==>>","onLoad");
					$(this).find(".component").trigger("onLoad");
				})
				
				$('.component').on("onLoad",function(){
					$(this).fadeIn(); //渐隐渐现
					return false; //事件执行完不向上传播 //阻止事件向上传播方法二
				})
				
				$('.component').on("onLeave",function(){
					$(this).fadeOut(); //渐隐渐现
				})
		})
	</script>
	<body>
		<!--
        	作者：offline
        	时间：2017-03-03
        	描述：用于验证fullpage.js切换页面，以及内容组织结构可用，组建能够进行动画
       -->
	<div id="h5">
		<div class="page section" id="page-1">
			<div class="component logo"> logo</div>
			<div class="component slogan"> slogan</div>
		</div>
		<div class="page section" id="page-2">
			<div class="component desc">desc</div>
		</div>
		<div class="page section" id="page-3">
			<div class="component desc">bar 柱状图</div>
		</div>
	</div>
	</body>

转载于:https://my.oschina.net/u/2991733/blog/853320