jquery - 带有“farbtastic”颜色选择器的jquery ui对话框

Question

如何修复将位于 jquery ui 对话框顶部的选择器“div”，并​​且在它之外可以这样做吗？什么是最好的解决方案？

这是我想看到的： 1 http://img6.imageshack.us/img6/4866/74030613.png

http://jsfiddle.net/gt4Ry/2/

html:

<div id="settingsDialogWindow" title="Settings" style="display:none;">
  <label for="color">Color:</label>
  <input type="text" id="color" name="color" value="#123456" maxlength="7" />
  <div id="picker" style="position: absolute;
  left: 50px;
  border: 1px solid #aaa;
  background-color: #fff;
  -webkit-border-radius: 4px !important;
  border-radius: 4px !important;
  z-index: 99999999;"></div>
</div>

js：

$(function () {
    $("#settingsDialogWindow").dialog({
        modal: true,
        draggable: true,
        height: 'auto',
        width: 300,
        minWidth: 300,
        minHeight: 60,
        resizable: false,
        position: { at: "center middle" }
    });


    $('#picker').farbtastic('#color');

    $("#color").focus(function () {
        $("#picker").show();
    });
    $("#color").focusout(function () {
        $("#picker").hide();
    });
});

Answer 1

我认为这可以解决您的问题！

http://jsfiddle.net/gt4Ry/15/

html:

 <div id="settingsDialogWindow" title="Settings" style="display:none;">
<label for="color">Color:</label>
<input type="text" id="color" name="color" value="#123456" maxlength="7" />
</div>
 <div id="picker" style="position: absolute;
 display:none;
left: 50px;
border: 1px solid #aaa;
background-color: #fff;
-webkit-border-radius: 4px !important;
border-radius: 4px !important;
z-index: 99999999;">
</div>

JS：

$(function () {
        $("#settingsDialogWindow").dialog({
            modal: true,
            draggable: true,
            height: 'auto',
            width: 300,
            minWidth: 300,
            minHeight: 60,
            resizable: false,
            position: { at: "center middle" },
            drag: function( event, ui ) {  
              $("#picker").css({top:ui.position.top+115,left:ui.position.left+30});
            }
        });


        $('#picker').farbtastic('#color');

        $("#color").focus(function () {
            $("#picker").show();
        });
        $("#color").focusout(function () {
            $("#picker").hide();
        });
    });