История такова: мне понадобилось в одном проекте использовать сплиттер. Порывшись в нете, я ничего удовлетворяющего мои потребности не нашел. Решил сам немного повелосипедостроить
пока то что у меня есть очень сырое и только для вертикального сплита. Есть проблемы с выделением текста при передвижении сплиттера. Пытался сделать, но что-то не очень впечатляет. Еще бывает так что в фоксе при отпускании кнопки мыши сплиттер все равно продолжает двигаться.
Был бы рад любым предложениям, помощи и критике. Я только недавно начал постигать яваскрипт, и поэтому могу не знать всех тонкостей.
Заранее благодарен за ответ.
код:
function Splitter(containerId, splitArea1Id, splitArea2Id, options)
{
this.options = jQuery.extend(
{
splitterType: "v",
oppositeInitSize: 700,
area1MinSize: 300,
area1MaxSize: 0,
area2MinSize: 700,
area2MaxSize: 0,
splitterWidth: 8
}, options);
this.area1 = jQuery("#" + splitArea1Id);
this.area2 = jQuery("#" + splitArea2Id);
this.container = jQuery("#" + containerId).css({height: Math.max(this.area1[0].offsetHeight, this.area2[0].offsetHeight) + "px"});
this.splitterBar = jQuery("<div class='splitterBar' />").insertAfter(this.area1);
this.active = false;
this.Init();
}
Splitter.prototype.Init = function()
{
if (!this.container)
{
return;
}
if (this.options.splitterType == "v")
{
var area1Width = this.area1[0].clientWidth == 0 ? this.options.area1MinSize + 1 : this.area1[0].clientWidth + 1;
var contHeight = this.container[0].height = this.options.oppositeInitSize;
var contWidth = this.container[0].clientWidth;
var area2Width = contWidth - area1Width - this.options.splitterWidth;
this.area1.css({position: "absolute", left: "0px"});
this.splitterBar
.css({
zIndex: "1000",
position: "absolute",
left: area1Width + "px",
width: this.options.splitterWidth,
height: contHeight + "px",
backgroundColor: "green",
cursor: "e-resize"
})
.bind("mouseleave", this, Splitter.MouseOut)
.bind("mousedown", this, Splitter.MouseDown);
//.bind("mouseup", function(){ this.active = false; });
this.area2
.css({
position: "absolute",
left: area1Width + this.options.splitterWidth + "px",
width: area2Width + "px",
height: contHeight + "px"
});
}
}
Splitter.MouseOut = function(evtArgs)
{
var splitter = evtArgs.data;
if (!splitter) return;
if (!splitter.active)
{
jQuery(document).css({cursor: "arrow"});
}
else
{
jQuery(document).css({cursor: "e-resize"});
}
}
Splitter.MouseDown = function(evtArgs)
{
var splitter = evtArgs.data;
if (!splitter) return;
splitter.active = true;
if (window.ActiveXObject)
{
document.onselectstart = function(){ return false; };
}
jQuery(document).select(clearSelection);
jQuery(document)
.css
({
cursor: "e-resize",
"user-select": "none",
//"-webkit-user-select": "none",
//"-khtml-user-select": "none",
"-moz-user-select": "none"
})
.bind("mousemove", splitter, Splitter.MouseMove)
.bind("mouseup", splitter, Splitter.MouseUp);
}
Splitter.MouseUp = function(evtArgs)
{
var splitter = evtArgs.data;
if (!splitter) return;
splitter.active = false;
// if (window.ActiveXObject)
// {
// jQuery(document).unbind("onselectstart");
// }
jQuery(document)
.css
({
cursor: "arrow",
//"user-select": "all",
//"-webkit-user-select": "none",
//"-khtml-user-select": "none",
//"-moz-user-select": "text"
})
//.unbind("select")
.unbind("mousemove")
.unbind("mouseup");
}
Splitter.MouseMove = function(evtArgs)
{
// jQuery("#debug")[0].innerHTML = evtArgs.data.active + "<br />X = " + evtArgs.pageX + "<br />Y = " + evtArgs.pageY;
var splitter = evtArgs.data;
if (!splitter) return;
var area1Width = evtArgs.pageX + 1;
var contWidth = splitter.container[0].clientWidth;
var area2Width = contWidth - area1Width - splitter.options.splitterWidth;
splitter.area1.css({ width: area1Width });
splitter.splitterBar.css({ left: area1Width + "px", width: splitter.options.splitterWidth });
splitter.area2.css({ left: area1Width + splitter.options.splitterWidth + "px", width: area2Width + "px" });
}
function clearSelection() {
var sel ;
if(document.selection && document.selection.empty)
{
document.selection.empty() ;
}
else if(window.getSelection)
{
sel=window.getSelection();
if(sel && sel.removeAllRanges)
sel.removeAllRanges() ;
}
}