初寫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)<!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>