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

来源：互联网发布：淘宝刷单假后台怎么看编辑：程序博客网时间：2024/04/30 15:39

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

（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>