jquery動態位置更改

我在我的web應用程序中使用這個jquery顏色選擇器插件http://www.eyecon.ro/colorpicker/。我需要做一些設計調整。我將在應用程序中顯示一些示例功能。請看這http://jsfiddle.net/FSDPH/8/有一個帶手風琴的可移動盒子。在顏色部分，我已經實現了我無法在jsfiddle中顯示的顏色選擇器插件。我需要的是，當顏色選擇器被選中並且如果框被移動到（文檔）部分之外時，框和顏色選擇器調色板應該動態地改變其在文檔區域內的位置。我成功地動態改變了框的位置，但是我無法使它適用於顏色選擇器調色板。jquery動態位置更改

這裏是jQuery代碼：（用於dymanically改變框和顏色拾取調色板中的位置）

var dwidth = $(document).width() - 225; // #box_bg width 
$("#box_bg").draggable({ 
stop: function(event, ui) { 
     var npos = $("#box_bg").position(); 
     if (npos.left > dwidth) 
     { 
      $(".colorpicker").css("left","-133px!important"); 
      $("#box_bg").css("left", dwidth+"px"); 
     } 
     } 
});

在上面的代碼中，$（「＃box_bg」）的工作時，框被移動超出文檔區。但它不適用於$（「。colorpicker」）左側屬性在colorpicker.css文件中沒有更改。爲什麼這樣？

UPDATE

在這裏，我更清楚地顯示，請檢查了這一點:)

http://jsfiddle.net/rkumarnirmal/4GrsD/3/

任何人都可以指導我？

謝謝！

來源

2012-05-16 rnk

你試圖改變.colorpicker的left屬性在CSS文件？你的代碼試圖改變所有的.colorpicker元素的CSS左屬性。 –

是的，我試圖改變.colorpicker的左側屬性。 – rnk

我不能讓你。 .colorpicker類只在我的html文件中使用過一次。我檢查了它 – rnk

colorpicker的左側屬性在插件中計算，每顯示一次。在更改插件之前，左側的屬性將始終在運行中計算。

這裏是從插件代碼：

show = function (ev) { 
    var cal = $('#' + $(this).data('colorpickerId')); 
    cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]); 
    var pos = $(this).offset(); 
    var viewPort = getViewport(); 
    var top = pos.top + this.offsetHeight; 
    var left = pos.left; 
    if (top + 176 > viewPort.t + viewPort.h) { 
     top -= this.offsetHeight + 176; 
    } 
    if (left + 356 > viewPort.l + viewPort.w) { 
     left -= 356; 
    } 
    cal.css({left: left + 'px', top: top + 'px'}); 
    if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) { 
     cal.show(); 
    } 
    $(document).bind('mousedown', {cal: cal}, hide); 
    return false; 
}

來源

2012-05-16 21:15:22

感謝您的幫助！我其實犯了一些錯誤。我用左：85px！重要** **重要**阻止了我的代碼功能。我刪除了它的工作:) – rnk

jquery動態位置更改

回答

相關問題