web启点,jquery分隔条jsplit,漂亮的分隔条,自定义分隔条,css分隔条,让分隔条也漂亮起来
$("#tt").jsplit();//默认调用，宽度在60px~400px 鼠标经过灰色区域显示分隔条，可拖动双击分隔条关闭，单击按钮关闭，兼容IE Firefox,谷歌
demo:
$("#tt").jsplit({MaxW:"600px",MinW:"30px",FloatD:"right",IsClose:true,Btn:{btn:false}});//设置了最大宽度600px，最小宽度30px，块右浮动，初始关闭状态，不显示按钮(打开时双击关闭)
demo:
/*-----------------以下为自定义分隔条样式，设置时注意逗号--------------*/
$("#cc").jsplit({ MaxW:"400px"//设置最大宽度
,MinW:"60px"//设置最小宽度
,FloatD:"left"//设置块浮动方向
,IsClose:false//设置初始状态
,BgUrl:"url(tpImg/sp_bg.gif)"//设置分隔条背景图片地址
,Bg:"right 0 repeat-y"//设置分隔条背景图片position,颜色等
,Btn:{btn:true//是否显示上下按钮 false为不显示
,oBg:{Out:"0 0",Hover:"-6px 0"}//设置打开状态时候按钮背景：鼠标离开(默认)，经过
,cBg:{Out:"-12px 0",Hover:"-18px 0"}}//设置打开状态时候按钮背景：鼠标离开(默认)，经过
,Fn:function(){}//拖动，点击分隔条时候触发的方法
});
demo:
$("#dd").jsplit({ MaxW:"400px"
,MinW:"60px"
,FloatD:"left"
,IsClose:false
,BgUrl:"url(tpImg/sp_bg2.gif)"
,Bg:"right 0 repeat-y"
,Btn:{btn:true
,oBg:{Out:"0 0",Hover:"-6px 0"}
,cBg:{Out:"-12px 0",Hover:"-18px 0"}}
,Fn:function(){}});
$("#ff").jsplit({ MaxW:"400px"
,MinW:"60px"
,FloatD:"left"
,IsClose:false
,BgUrl:"url(tpImg/sp_bg3.gif)"
,Bg:"right 0 repeat-y"
,Btn:{btn:true
,oBg:{Out:"0 0",Hover:"-6px 0"}
,cBg:{Out:"-12px 0",Hover:"-18px 0"}}
,Fn:function(){}});
$("#ii").jsplit({ MaxW:"400px"
,MinW:"60px"
,FloatD:"left"
,IsClose:false
,BgUrl:"url(tpImg/sp_bg4.gif)"
,Bg:"right 0 repeat-y"
,Btn:{btn:true
,oBg:{Out:"0 0",Hover:"-6px 0"}
,cBg:{Out:"-12px 0",Hover:"-18px 0"}}
,Fn:function(){}});
