Renk Seçici Oluşturma

• 06-01-2017
• Admin
• 3695 Okunma
• Paylaş
• Paylaş
• Paylaş

Head içine

  <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/jquery.minicolors.css">
  <script type="text/javascript" src="js/vendor/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.minicolors.min.js"></script>

body içine

<input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">

bunun altına

<script type="text/javascript">
$(function(){
  var colpick = $('.demo').each( function() {
    $(this).minicolors({
      control: $(this).attr('data-control') || 'hue',
      inline: $(this).attr('data-inline') === 'true',
      letterCase: 'lowercase',
      opacity: false,
      change: function(hex, opacity) {
        if(!hex) return;
        if(opacity) hex += ', ' + opacity;
        try {
          console.log(hex);
        } catch(e) {}
        $(this).select();
      },
      theme: 'bootstrap'
    });
  });
  
  var $inlinehex = $('#inlinecolorhex h3 small');
  $('#inlinecolors').minicolors({
    inline: true,
    theme: 'bootstrap',
    change: function(hex) {
      if(!hex) return;
      $inlinehex.html(hex);
    }
  });
});
</script>