Friday, April 26, 2024
HomejQueryAuto Colorize Components Primarily based On Their Values - jQuery ColorizeJS

Auto Colorize Components Primarily based On Their Values – jQuery ColorizeJS


Components colorization is a standard job. Folks visually deal with knowledge significantly better when colours are utilized to them.

colorize.js is an easy jQuery computerized content material colorization plugin designed to colorize components relying on whether or not their worth matches a given vary.

This may be extraordinarily helpful once you need to emphasize content material to your guests however haven’t got time/assets for graphics.

See Additionally:

Methods to use it:

1. Obtain and cargo the colorizejs.js plugin after the newest jQuery library (slim construct is really helpful).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/colorizejs.js"></script>

2. Colorize the content material primarily based on its worth. Purple, for instance, implies that the worth is beneath the typical. Inexperienced, then again, stands for above common, and blue is left for colours which might be just about common.

<span id="instance">
  200
</span>
$(perform(){
  $('#instance').colorizejs({

    // bigger than 80
    80: 'inexperienced',

    // bigger than 50
    50: 'blue', 

    // bigger than 0
    0: 'purple',
    
  });
});

3. You may also apply CSS courses to the ingredient primarily based on its worth.

$(perform(){
  $('#instance').colorizejs({

    // bigger than 80
    80: '.inexperienced',

    // bigger than 50
    50: '.blue', 

    // bigger than 0
    0: '.purple',
    
  });
});

This superior jQuery plugin is developed by yegor256. For extra Superior Usages, please test the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments