jquery splitter在cookie中保存位置

我在两个div之间有一个分离器，我可以移动分离器并更改两个容器的大小。我想要做的是保存分离器的位置，两个容器在缓存中的宽度以及刷新浏览器时我希望能够保留这些宽度和位置。这里的代码片段，jquery splitter在cookie中保存位置

var separatorPos = $('.content-columns-sep').position().left;   
var leftColumnWidth = $('.content-left').width(); 
var rightColumnWidth = $('.content-right').width(); 
if ($.cookie('columnPos')) { 
    var cookieVars = $.cookie('columnPos').split(',');   
    var newPos = cookieVars[0]; 
    var newWidth = cookieVars[1]; 
    var newRightWidth = cookieVars[2]; 
    var posDiff = newPos - separatorPos; 
    $('.content-columns-sep').offset({ 
     left: newPos});    
     separatorPos = newPos; 
     $('.content-left').width(newWidth); 
     $('.content-right').width(newRightWidth); 
     leftColumnWidth = newWidth;   
     rightColumnWidth = newRightWidth;   
}    
$(".content-columns-sep").mouseover(function(){ 
    $('.content-columns-sep').css('cursor', 'crosshair'); 
}); 
$(".content-columns-sep").draggable({ 
    axis: "x", 
    containment: "parent", 
    cursor: "crosshair", 
    grid: [10, 0], 
    drag: function(event, ui) { 
     var newPos = $('.content-columns-sep').position().left; 
     var posDiff = newPos - separatorPos; 
     separatorPos = newPos; 
     var newWidth = leftColumnWidth + posDiff ; 
     var newRightWidth = rightColumnWidth - posDiff; 
     $('.content-left').width(newWidth); 
     $('.content-right').width(newRightWidth); 
     leftColumnWidth = newWidth;   
     rightColumnWidth = newRightWidth; 
    }, 
    stop: function(event, ui) { 
     var newPos = $('.content-columns-sep').position().left; 
     var posDiff = newPos - separatorPos; 
     separatorPos = newPos; 
     var newWidth = leftColumnWidth + posDiff ; 
     var newRightWidth = rightColumnWidth - posDiff; 
     $('.content-left').width(newWidth); 
     $('.content-right').width(newRightWidth); 
     leftColumnWidth = newWidth;   
     rightColumnWidth = newRightWidth; 
     $.cookie('columnPos', separatorPos+','+newWidth+','+newRightWidth); 
    } 
});  

     But I am unable to get the result as expected, splitter always overlaps one of the div by some 35 pixel or so, what could be the possible reasons ?

来源

2012-05-02 ro ko

你已经在你粘贴的代码中使用了cookie，是代码不工作，还是你想扩展它？你可以提供一个[JsFiddle]（http://www.jsfiddle.net），代码在某些标记的上下文中运行，以便我们可以看看可能出现的问题？ –

当然我正在研究它 –

你得到的位置

$('.content-columns-sep').position().left;

但是，你正在使用的值设置为：

$('.content-columns-sep').offset({ left: newPos});

也许这是你重叠的原因是什么？偏移与位置不一样。

当您设置offset时，您将设置元素相对于整个文档的位置，但是当您获取position时，您会得到它相对于可以是文档的偏移父项的相对位置，但是不一定是。

或者应该没问题，只要你在整个代码中使用相同。

来源

2012-05-02 14:17:12

我曾尝试过，但没有奏效 –

jquery splitter在cookie中保存位置

回答

相关问题