您的位置：首页 > Web前端 > JQuery

jquery插件：点击拉出的右侧滑动菜单

2015-10-19 08:47 447 查看

就是一个停留在页面右侧的滑动菜单，点击可以拉出，带回调函数。宽高位置可以参数指定。插件代码如下：

（jquery的路径请自己修改）

(function($){
$.fn.sideSwitch = function(opts){

var defaults = {
contentWidth:'400px',
contentHeight:'185px',
btnWidth:'30px',
btnHeight:'80px',
initTop:'',//初始化离浏览器顶部的距离
extra:'',//因页面布局需要额外向左移动的距离
callback:''//菜单拉出后的回调函数
}
var option = $.extend(defaults,opts);
this.each(function(){//这一行的this是指$选择器选择到的对象，是一个数组
var _this = $(this);//拿到某一个div
var btndiv = _this.find('.ss_btn');
var btnTop = (parseInt(option.contentHeight)-parseInt(option.btnHeight))/2;
btndiv.css({width:option.btnWidth,height:option.btnHeight,top:btnTop,position:"absolute",cursor:"pointer"});
var contentdiv = _this.find('.ss_content');
var contentLeft = parseInt(option.btnWidth)+parseInt(btndiv.css('borderLeftWidth'))+parseInt(btndiv.css('borderRightWidth'));
contentdiv.css({width:option.contentWidth,height:option.contentHeight,position:"relative",left:contentLeft,top:"0px"});

var boxInitLeft = parseInt(document.body.clientWidth)-parseInt(option.btnWidth)-parseInt(btndiv.css('borderLeftWidth'))-parseInt(btndiv.css('borderRightWidth'))-option.extra;
var boxInitWidth = parseInt(option.btnWidth)+parseInt(btndiv.css('borderLeftWidth'))+parseInt(btndiv.css('borderRightWidth'));
_this.css({width:boxInitWidth,overflow:"hidden",position:"absolute",zIndex:999});
if(!option.initTop){option.initTop = (parseInt(document.body.clientHeight)-parseInt(_this.css('height'))-parseInt(_this.css("borderTopWidth"))-parseInt(contentdiv.css("borderTopWidth")))/2;}
_this.css({left:boxInitLeft,top:option.initTop});

var menuYloc = _this.offset().top; //当前窗口的相对偏移
$(window).scroll(function (){
var offsetTop = menuYloc + $(window).scrollTop() +"px";
_this.animate({top : offsetTop },{ duration:600 , queue:false });
});

btndiv.click(
function(){
if(parseInt(_this.css("width"))<parseInt($('.ss_content').css('width'))){
var boxNewWidth = parseInt($('.ss_content').css('width'))+parseInt($('.ss_content').css('borderLeftWidth'))+parseInt($('.ss_content').css('borderRightWidth'))+parseInt($('.ss_btn').css('width'))+parseInt($('.ss_btn').css('borderLeftWidth'))+parseInt($('.ss_btn').css('borderRightWidth'));

var boxNewLeft = parseInt(document.body.clientWidth)-boxNewWidth-option.extra;
_this.animate({left:boxNewLeft+'px',width:boxNewWidth+"px"},"slow");
option.callback();
}
else{
_this.animate({left:boxInitLeft,width:"30px"},"slow");
}

}
)
});

}

})(jQuery)

下面再附一个使用的demo：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.div{float:left;width:30%;height:300px;border:1px solid #f00;}
</style>
<script type="text/javascript" src="../../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.sideSwitch.js"></script>
<script type="text/javascript">
$(function(){
$('#box').sideSwitch();
});
</script>
</head>

<body>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div class="div">文字文字文字</div>
<div id="box"><!--侧边栏层-->
<div class="ss_btn">
点我
</div>
<div class="ss_content">

内容区域

</div>

</div>
<div id="mainbody"><!--主页内容-->
<p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p><p>主页的内容<p>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航