复制代码 代码如下:
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(
);
jquery(_self).children(.jsplit-c).append(
);
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 jsplite.css({ background: j.bg, background-image: j.bgurl, opacity: 0 })
if (j.isclose != false) {
jsplith.css({ background: j.btn.cbg.out, background-image: j.bgurl })
_selfclose();
} else {
jsplith.css({ background: j.btn.obg.out, background-image: j.bgurl })
}
jsplith.hover(function () {
if (close == false) {
jquery(this).css({ background: j.btn.obg.hover, background-image: j.bgurl })
} else { jquery(this).css({ background: j.btn.cbg.hover, background-image: j.bgurl }) }
}, function () {
if (close == false) {
jquery(this).css({ background: j.btn.obg.out, background-image: j.bgurl })
} else { jquery(this).css({ background: j.btn.cbg.out, background-image: j.bgurl }) }
})
jquery(_self).hover(function () { if (close == false) jsplite.stop().animate({ opacity: 0.85 }, 200) }, function () { if (close == false) jsplite.stop().animate({ opacity: 0 }, 2000) })
jsplite.mousedown(function (e) {
j['fn'] && j['fn'].call(_self);
var screenx = e.screenx, w = jquery(_self).width();
jquery(document).mousemove(function (e2) {
curw = j.floatd == left ? w + (e2.screenx - screenx) : w - (e2.screenx - screenx);
if (curw >= j.maxw) { curw = j.maxw; };
if (curw jquery(_self).css({ width: curw });
dw = curw;
});
jquery(document).mouseup(function () {
jquery(document).unbind();
});
if (close == true) {
jquery(this).css({ cursor: e-resize, opacity: 0.8 });
jquery(_self).animate({ width: dw }, 200);
close = false;
};
return false;
});
jsplite.dblclick(function () {
if (close == false) {
_selfclose();
};
return false;
});
jsplith.click(function () {
if (close == false) {
_selfclose();
};
return false;
});
function _selfclose() {
jsplite.css({ cursor: pointer, opacity: 1 });
jsplith.css({ background: j.btn.cbg.out, background-image: j.bgurl });
jquery(_self).animate({ width: 6px }, 400);
close = true;
}
});
}
});
按以下步骤修改html文件：
1. 增加对jquery和刚刚生成的jsplit.js文件的引用。
复制代码 代码如下:
2. 为要被拖动大小的div或td定义id。
复制代码 代码如下:
test
test table
3. 增加javascript调用split。
复制代码 代码如下:
这样就实现了客户端的分隔条的功能，如下图所示：