JQuery miniColors：如何在網頁中使多個miniColor正常工作？

如何讓一個網頁中的多個miniColor正常工作？如果我更改了一個值，所有的值都會改變？它需要類名改變值？ http://abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/JQuery miniColors：如何在網頁中使多個miniColor正常工作？

來源

2011-10-27 juria_roberts

示例頁面（http://labs.abeautifulsite.net/projects/js/jquery/miniColors/）似乎可與多個選擇器一起使用。那不是你所追求的效果嗎？ – ipr101

通過輸入的ID選擇正確的選擇器。下面是一個簡單的例子： ` jQuery的miniColors V0.1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.miniColors.js"></script> 
    <link type="text/css" rel="stylesheet" href="jquery.miniColors.css" /> 
    <script type="text/javascript"> 

     $(document).ready( 
      function() { 
       // 
       // Enabling miniColors 
       // 

       //$(".color-picker").miniColors('methodName', [value]); 

       $("#color1").miniColors({ 

        change: function(hex, rgb) { 
         $("#color1Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />'); 
        } 

       }); 

       $("#color2").miniColors({ 

        change: function(hex, rgb) { 
         $("#color2Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />'); 
        } 

       }); 

       $("#color3").miniColors({ 

        change: function(hex, rgb) { 
         $("#color3Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />'); 
        } 

       }); 

       $("#color4").miniColors({ 

        change: function(hex, rgb) { 
         $("#color4Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />'); 
        } 

       }); 

       $("#color5").miniColors({ 

        change: function(hex, rgb) { 
         $("#color5Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />'); 
        } 

       }); 
      }); 

    </script> 
</head> 

<body> 
    <h1>jQuery miniColors v0.1</h1> 

    <p> color1 <input type="hidden" id="color1" class="colors" /></p> 
    <p> color2 <input type="hidden" id="color2" class="colors" /></p> 
    <p> color3 <input type="hidden" id="color3" class="colors" /></p> 
    <p> color4 <input type="hidden" id="color4" class="colors" /></p> 
    <p> color5 <input type="hidden" id="color5" class="colors" /></p> 

    <p> 
     Color1 value <br /> 
     <div><label id="color1Value"></label></div> 
    </p> 

    <p> 
     Color2 value <br /> 
     <div><label id="color2Value"></label></div> 
    </p> 

    <p> 
     Color3 value [content] <br /> 
     <div><label id="color3Value"></label></div> 
    </p> 

    <p> 
     Color4 value <br /> 
     <div><label id="color4Value"></label></div> 
    </p> 

    <p> 
     Color5 value <br /> 
     <div><label id="color5Value"></label></div> 
    </p> 
</body>

來源

2012-01-30 17:56:25

我發現，使用複製剛剛形成或ID名稱幫助，與此同時除去緊密的功能：與開放：功能。

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

    // 
    // Enabling miniColors 
    // 

    $("input[name=color1]").miniColors({ 
     letterCase: 'uppercase', 
     change: function(hex, rgb) { 
      logData('change', hex, rgb); 
     } 
    }); 

    $("input[name=color2]").miniColors({ 
     letterCase: 'uppercase', 
     change: function(hex, rgb) { 
      logData('change', hex, rgb); 
     } 
    }); 

    $("input[name=color3]").miniColors({ 
     letterCase: 'uppercase', 
     change: function(hex, rgb) { 
      logData('change', hex, rgb); 
     }, 
     close: function(hex, rgb) { 
      logData('close', hex, rgb); 
     } 
    }); 

    $("input[name=color4]").miniColors({ 
     letterCase: 'uppercase', 
     change: function(hex, rgb) { 
      logData('change', hex, rgb); 
     }, 
     close: function(hex, rgb) { 
      logData('close', hex, rgb); 
     } 
    }); 
}); 
</script>

用我的HTML代碼示例在這裏;

<form method="post" action="#theme" name="color1Form"> 
    <input type="text" name="color1" value="FFFFFF" size="6" autocomplete="on" maxlength="10" /> 
    <input type="submit" value="Save" /> 
</form>

來源

2012-07-17 11:39:21

JQuery miniColors：如何在網頁中使多個miniColor正常工作？

回答

相關問題