素材网 素材网

jquery网站侧边栏个性化工具条插件包含浮动导航与返回顶部和底部

下载资源()次

阅读次数()次

发布时间:2014-07-19

jquery网站侧边栏个性化工具条插件包含浮动导航与返回顶部和底部
分享到:

用法简介:

来源:xw素材网

jquery网站侧边栏个性化工具条插件包含浮动导航与返回顶部和底部。
文件引用:

<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.sitebar-1.0.js"></script>
<script>
$(function(){
  //内置:回到顶部
  $(".bar1").jSitebar({
	pluginName:"backtop",
	bodyWidth:"1000px",
	bottom:"150px"
  });
  //内置:返回底部
  $(".bar2").jSitebar({
	pluginName:"backbottom",
	bodyWidth:"1000px",
	bottom:"100px"
  });
  //用户自定义1:浏览器最大化,仅IE
  $(".bar3").jSitebar({
	text:"全屏查看",
	image:"img/full-screen.png",
	bodyWidth:"1000px",
	bottom:"200px",
	callback:function(){//自定义1:浏览器全凭查看()
		elem=document.body;
		if(elem.webkitRequestFullScreen){
			elem.webkitRequestFullScreen();   
		}else if(elem.mozRequestFullScreen){
			elem.mozRequestFullScreen();
		}else if(elem.requestFullScreen){
			elem.requestFullscreen();
		}else{
			//浏览器不支持全屏API或已被禁用
			alert("浏览器不支持全屏API或已被禁用");
		}
	}
  });
  //用户自定义2:自定义主题样式
  $(".bar4").jSitebar({
	text:"自定义二",
	bodyWidth:"1000px",
	bottom:"250px",
	theme:{
		width:"20px",
		height:"80px",
		borderWidth:"1px",
		borderColor:"#CCCCCC",
		bgColor:"#F5F5F5",
		font:"14px Microsoft YaHei"
	},
	callback:function(){//自定义2
		alert("用户自定义2");
	}
  });
  //用户自定义3
  $(".bar5").jSitebar({
	text:"自定义三",
	bodyWidth:"1000px",
	bottom:"340px",
	other:{
		slideUp:500,
		slideDown:500,
	},
	callback:function(){//自定义3
		alert("用户自定义3");
	}
  });
  document.onkeydown = function(){
	if(window.event && window.event.keyCode == 114){
		window.event.keyCode == 505;
	}
  }
});
</script>


   

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。