[MINICOLORS] jquery.minicolors (ok)

https://github.com/claviska/jquery-minicolors

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery MiniColors</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <script src="jquery.minicolors.js"></script>
  <link rel="stylesheet" href="jquery.minicolors.css">
  <script type="text/javascript">
  $(document).ready(function() {
    $('.demo').each(function() {
      $(this).minicolors({
        control: $(this).attr('data-control') || 'hue',
        defaultValue: $(this).attr('data-defaultValue') || '',
        format: $(this).attr('data-format') || 'hex',
        keywords: $(this).attr('data-keywords') || '', // Chưa hiểu thuộc tính này
        inline: $(this).attr('data-inline') === 'true', // Chưa hiểu thuộc tính này
        letterCase: $(this).attr('data-letterCase') || 'lowercase',
        opacity: $(this).attr('data-opacity'),
        position: $(this).attr('data-position') || 'bottom',
        swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
        change: function(value, opacity) {
          if (!value) return;
          if (opacity) value += ', ' + opacity;
          if (typeof console === 'object') {
            console.log(value);
          }
        },
        theme: 'bootstrap'
      });
    });
  });
  </script>
</head>
<body>
  <h3>Control Types</h3>
  <div class="well">
    <div class="row">
      <div class="col-lg-4 col-sm-4 col-12">
        <div class="form-group">
          <label for="hue-demo">Hue (default)</label>
          <input type="text" id="hue-demo" class="form-control demo" data-control="hue" data-defaultValue="#ff6162" data-format="hex" data-letterCase="uppercase" data-opacity="1" data-position="top" data-swatches="#ef9a9a|#90caf9">
        </div>
        <div class="form-group">
          <label for="saturation-demo">Saturation</label>
          <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
        </div>
      </div>
      <div class="col-lg-4 col-sm-4 col-12">
        <div class="form-group">
          <label for="brightness-demo">Brightness</label>
          <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
        </div>
        <div class="form-group">
          <label for="wheel-demo">Wheel</label>
          <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Previous========== End [MultiLang] ===========NextjQuery - addClass ACTIVE--> set timeout --> cycle (ok)(online.vinmec.com)

Last updated 3 years ago

<!DOCTYPE html> <html lang="en"> <head> <title>jQuery MiniColors</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="jquery.minicolors.js"></script> <link rel="stylesheet" href="jquery.minicolors.css"> <script type="text/javascript"> $(document).ready(function() { $('.demo').each(function() { $(this).minicolors({ control: $(this).attr('data-control') || 'hue', defaultValue: $(this).attr('data-defaultValue') || '', format: $(this).attr('data-format') || 'hex', keywords: $(this).attr('data-keywords') || '', // Chưa hiểu thuộc tính này inline: $(this).attr('data-inline') === 'true', // Chưa hiểu thuộc tính này letterCase: $(this).attr('data-letterCase') || 'lowercase', opacity: $(this).attr('data-opacity'), position: $(this).attr('data-position') || 'bottom', swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [], change: function(value, opacity) { if (!value) return; if (opacity) value += ', ' + opacity; if (typeof console === 'object') { console.log(value); } }, theme: 'bootstrap' }); }); }); </script> </head> <body> <h3>Control Types</h3> <div class="well"> <div class="row"> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="hue-demo">Hue (default)</label> <input type="text" id="hue-demo" class="form-control demo" data-control="hue" data-defaultValue="#ff6162" data-format="hex" data-letterCase="uppercase" data-opacity="1" data-position="top" data-swatches="#ef9a9a|#90caf9"> </div> <div class="form-group"> <label for="saturation-demo">Saturation</label> <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc"> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="brightness-demo">Brightness</label> <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff"> </div> <div class="form-group"> <label for="wheel-demo">Wheel</label> <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee"> </div> </div> </div> </div> </body> </html>