Question

on $(document).ready(function()我有以下代码：

$(".resizable" ).resizable({
    handles: 'n',
    minHeight: 1,
    minWidth: maxBarWidth,
    maxHeight: maxBarHeight,
    maxWidth: maxBarWidth
});

这允许我在我创建的条形图上调整条形图（DIV）。它在页面加载后工作。当我调整条形图时，我会运行一些代码来设置条形图的动画并更新它位于条形图上的标签。问题是顶部手柄消失了，我不能再调整任何条形图了。有什么想法吗？

这里有更多代码：

$(document).ready(function(){
//position and draw bars
setBarPosition();

//make bars resizable with mouse and set their max and min dimentions
var maxBarWidth = $('.graphBar').width();
var maxBarHeight = $('.graphArea').height();

//activate resize on bars
$(".resizable" ).resizable(
    {handles: 'n', minHeight: 1, minWidth: maxBarWidth, maxHeight: maxBarHeight,     maxWidth: maxBarWidth}
);

//update input fields and graph labels after bars resizing
$(".resizable" ).bind( "resizestop", function(event, ui) {
    targetInput = $(this).attr("label");
    $('input[name=' + targetInput +   ']').val(Math.round($(this).height()/window.chartScale));
    setBarPosition()    
});

});

function setBarPosition(){
window.chartHeight = Number($('.graphArea').height());
window.barWidth = $('.graphArea .graphBar').width();
window.highestYlabel = Number($('.graphYAxis p').first().html());
window.chartHeightArea = window.chartHeight - Number($('p.axis-  value').first().height());
window.chartScale = chartHeightArea / window.highestYlabel;
window.barSpacing = Number($('.graphArea').attr('barSpacing'));

$orderNo = 1;
$itemNo = 1;

//count how many bars are present and calculate incremental position
$('.graphArea .graphBar').each(function(index){

//if bar is from second series then attach to the side of the previous one
if (index%2 == 0)
    {
        var barPosition = (index * barWidth) + (index * window.barSpacing) +   window.barSpacing;       
    }
else
    {
        var barPosition = (index * barWidth) + (index * window.barSpacing); 
    }

//assign left position to each bar
$(this).css('left', barPosition + 'px');

//add numeric values on bars. Values are read from input form
if (index%2 == 0)
    {
        elementName = 'orders' + $orderNo; 
        $orderNo = $orderNo + 1;        
    }
else
    {
        elementName = 'items' + $itemNo;
        $itemNo = $itemNo + 1;      
    }

//attach paragraphs holding the bar heights to the divs generating the bars 
currentBarValue = $('input[name="'+ elementName +'"]').val();
$(this).attr('barValue', currentBarValue);
$(this).html('<p class="resizable" title="' + elementName + '">' + $(this).attr('barValue') + '</p>');

//add X axis labels
$('.graphXAxis').append('<p style="left:' + (barPosition - (window.barWidth/2)) + 'px">' + $(this).attr('label') + '<p>');

//find out the bar with the maximum value assigned
var barValue = Number($(this).attr('barValue'));

if (barValue > window.maxValue) 
    {
        window.maxValue = barValue;
    }

//calculate value to display
window.valueMultiplier = window.maxValue / window.highestYlabel;

 });

//animate bars and labels
runAnimation();
}

function runAnimation(){
$('.graphArea .graphBar').each(function(index){
    //calculate relative bar heights
    var scaledValue = Number($(this).attr('barValue')) * window.chartScale; 
    var delayTime = 125 * index;

    //animate bars
    $(this).delay(delayTime).animate({height:scaledValue},1000,function(){
        //for each children element apply delay (in built JQUERY function)
        $(this).children('p').delay(500).fadeIn(250);   
    });
});
}

非常感谢你的帮助，

Donato的

JQUERY .resizable（）仅在$（document）.ready（function（）上运行一次

0 个答案: