在输入字段更改时触发jQuery颜色选择器插件的刷新

时间:2011-08-26 04:52:56

标签: jquery triggers color-picker

我目前正在使用jQuery .click()方法使用简单的颜色十六进制值更新15个文本字段,例如此文档.form1.top_menu_bgcolor.value ='#FFFFFFF';

我也在使用ExColor for jQuery http://modcoder.org/来显示一个杀手颜色选择器 http://modcoder.org/js/modcoder-1.1.js

问题是当您点击更新字段时,颜色选择器样本不会刷新。

如何在更改字段时重新激活或刷新色板?我可以在下面的.click函数中调用什么来将样本刷新到新的十六进制字符串,输入值?

这是JS:

<script type="text/javascript">

    $('document').ready(function() {

        // running ExColor
        $('#my_input_1').modcoder_excolor();
    $('#my_input_2').modcoder_excolor();
    $('#my_input_3').modcoder_excolor();
    $('#my_input_4').modcoder_excolor();
    $('#my_input_5').modcoder_excolor();
    $('#my_input_6').modcoder_excolor();
    $('#my_input_7').modcoder_excolor();
    $('#my_input_8').modcoder_excolor();
    $('#my_input_9').modcoder_excolor();
    $('#my_input_10').modcoder_excolor();
    $('#my_input_11').modcoder_excolor();
    $('#my_input_12').modcoder_excolor();
    $('#my_input_13').modcoder_excolor();
    $('#my_input_14').modcoder_excolor();
    $('#my_input_15').modcoder_excolor();    

        $('#theme01').click(function() {
            document.form1.top_menu_bgcolor.value = '#FFFFFF';
        document.form1.top_menu_bgcolor.focus();
        document.form1.top_menu_fontcolor.value = '#FFFFFF';
        document.form1.top_menu_bghovercolor.value = '#FFFFFF';
        document.form1.top_menu_fonthovercolor.value = '#FFFFFF';
        document.form1.left_menu_bgcolor.value = '#FFFFFF';
        document.form1.left_menu_fontcolor.value = '#FFFFFF';
        document.form1.left_menu_bghovercolor.value = '#FFFFFF';
        document.form1.left_menu_fonthovercolor.value = '#FFFFFF';
        document.form1.left_div_border.value = '#FFFFFF';
        document.form1.site_background_color.value = '#FFFFFF';
        document.form1.header_color.value = '#FFFFFF';
        document.form1.content_header_color.value = '#FFFFFF';
        document.form1.browser_bg_color.value = '#FFFFFF';
        document.form1.footer_color.value = '#FFFFFF';
        document.form1.footer_font_color.value = '#FFFFFF';

        });

</script>

和HTML

<a href="#" id="theme01">Theme 1</a>


<input type="text" ID="my_input_1" name="top_menu_bgcolor" maxlength="7" value="#000000" size="10" />

1 个答案:

答案 0 :(得分:1)

你可以尝试使用类似的东西:

   <script type="application/javascript">
      $(document).ready(function(){

      $("#theme01").click(function(){
       $("#myinput1").val('#aaafFF');   
       $('#myinput1').click();
       setTimeout( function(){
            $('#c3').blur();
            $('#c3').click();
            $('#c3').blur();}, 
       50);
   return false;
      });

      });
 </script>

其中#c3是某处不同的div。

这将有效地显示和隐藏模拟编码器,用户看不到它。

修改:完整答案

        $("#theme01").click(function(){
            $("#myinput1").val('#aaaFFF');
            $('#myinput1').click();
            setTimeout( function(){$('#modcoder_ok').click();}, 50);
        });

        $("#theme02").click(function(){
            $("#myinput1").val('#222ccc');
            $('#myinput1').click();
            setTimeout( function(){$('#modcoder_ok').click();}, 50);
        });

然后在html中:      主题1      主题2

我使用两个按钮,延迟#modcode_ok.click()以编程方式单击ok按钮以选择并刷新颜色。 在我的计算机上,50ms的setTimeout太快,我看不到弹出窗口。也许你需要调整你的需求。