站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 用JQuery在网页中实现分隔条功能的代码
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

用JQuery在网页中实现分隔条功能的代码

来源: 易采站长站

Javascript代码如下,将该代码保存成JS文件后在HTML中引用。
代码如下:
jQuery.noConflict();
jQuery.fn.extend({
jsplit: function (j) {
return this.each(function () {
j = j || {};
j.Btn = j.Btn || {};
j.Btn.oBg = j.Btn.oBg || {};
j.Btn.cBg = j.Btn.cBg || {};
var jun = { MaxW: “600px”
, MinW: “260px”
, FloatD: “left”
, IsClose: false
, BgUrl: “”
, Bg: “#fff”
, Btn: { btn: true
, oBg: { Out: “#333”, Hover: “orange” }
, cBg: { Out: “#333”, Hover: “orange”}
}
, Fn: function () { }
}
j.MaxW = parseInt(j.MaxW) || parseInt(jun.MaxW);
j.MinW = parseInt(j.MinW) || parseInt(jun.MinW);
j.FloatD = j.FloatD || jun.FloatD;
j.IsClose = j.IsClose != undefined ? j.IsClose : jun.IsClose;
j.BgUrl = j.BgUrl || jun.BgUrl;
j.Bg = j.Bg || jun.Bg;
j.Btn.btn = j.Btn.btn != undefined ? j.Btn.btn : jun.Btn.btn;
j.Btn.oBg.Out = j.Btn.oBg.Out || jun.Btn.oBg.Out;
j.Btn.oBg.Hover = j.Btn.oBg.Hover || jun.Btn.oBg.Hover;
j.Btn.cBg.Out = j.Btn.cBg.Out || jun.Btn.cBg.Out;
j.Btn.cBg.Hover = j.Btn.cBg.Hover || jun.Btn.cBg.Hover;
j.Fn = j.Fn || jun.Fn;
var antiD = j.FloatD == “left” ? “right” : “left”;
if (j.MinW > j.MaxW) {
var amax = j.MaxW;
j.MaxW = j.MinW;
j.MinW = amax;
};
var _self = this;
var Close = false;
jQuery(_self).css({ position: “relative”, float: j.FloatD, overflow: “hidden”, padding: “0px” });
jQuery(_self).wrapInner(“<div class=’jsplit-c’ style=’top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%’></div>”);
jQuery(_self).children(“.jsplit-c”).append(“<div class=’jsplit-e’ unselectable=’on’ style=’background:#fff;height:100%;width:6px;top:0px;-moz-user-select:none;” + antiD + “:0px;position:absolute;cursor:e-resize;overflow:hidden;z-index:10000;’><div class=’jsplit-e-handle’ unselectable=’on’ style=’height:40px;width:100%;top:50%;margin-top:-20px;left:0;position:absolute;cursor:pointer;-moz-user-select:none;’></div></div>”);
var dw = jQuery(_self).width();
var jsplitc = jQuery(_self).children(“.jsplit-c”);
var jsplite = jsplitc.children(“.jsplit-e”);
var jsplith = jsplite.children(“.jsplit-e-handle”);
if (j.Btn.btn == false) { jsplith.css({ display: “none” }) };
if (jQuery.browser.msie) { document.execCommand(“BackgroundImageCache”, false, true); }
if (dw > j.MaxW) { jQuery(_self).css({ width: j.MaxW }); }
if (dw < j.MinW) { jQuery(_self).css({ width: j.MinW }); }
jsplite.css({ background: j.Bg, “background-image”: j.BgUrl, opacity: 0 })
if (j.IsClose != false) {

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -