Jika teman-teman punya tugas bagaimana cara membuat warna random ketika di klik, ini adalah cara yang cocok untuk di coba karena disini saya akan mencontohkan belajar cara membuat warna random dengan jQuery UI, Seperti biasa karena kita menggunakan jQuery UI jadi kita harus mengikuti aturan dari jQuery UI tersebut. Oke akan seperti apa membuatnya simak terus ya teman-teman.
Jadi untuk kasus cara membuat warna random dengan jQuery UI disini saya mempunyai beberapa box dimana setiap box itu mempunyai sebuah button untuk yang berfungsi untuk merubah warna nya, dan button itu akan merubah secara acak warna-warna yang akan di keluarkan, Oke langsung saja ya kita lihat cara membuatnya, seperti biasa kita link terlebih dahulu:
|
1 2 3 4 5 6 |
JS// <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> CSS// <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> |
Silahkan teman-teman copy CDN di atas, jika sudah kita lihat templatenya disini saya membuat seperti ini:
|
1 2 3 4 5 |
<div id="box"> <div id="my-widget1">BOX 1</div> <div id="my-widget2">BOX 2</div> <div id="my-widget3">BOX 3</div> </div> |
Setiap box itu akan saya berikan CSS seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#box{ display: flex; } .custom-colorize { font-size: 20px; position: relative; width: 200px; height: 200px; text-align: center; line-height: 200px; border: 1px solid red; margin: 10px; color: white; } .custom-colorize-changer { font-size: 10px; position: absolute; right: 0; bottom: 0; } |
dan Jika sudah sekarang kita akan masuk dalam contoh jQuery UI nya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
$( function() { // the widget definition, where "custom" is the namespace, // "colorize" the widget name $.widget( "custom.colorize", { // default options options: { red: 255, green: 0, blue: 0, // Callbacks change: null, random: null }, // The constructor _create: function() { this.element // add a class for theming .addClass( "custom-colorize" ); this.changer = $( "<button>", { text: "change", "class": "custom-colorize-changer" }) .appendTo( this.element ) .button(); // Bind click events on the changer button to the random method this._on( this.changer, { // _on won't call random when widget is disabled click: "random" }); this._refresh(); }, // Called when created, and later when changing options _refresh: function() { this.element.css( "background-color", "rgb(" + this.options.red +"," + this.options.green + "," + this.options.blue + ")" ); // Trigger a callback/event this._trigger( "change" ); }, // A public method to change the color to a random value // can be called directly via .colorize( "random" ) random: function( event ) { var colors = { red: Math.floor( Math.random() * 256 ), green: Math.floor( Math.random() * 256 ), blue: Math.floor( Math.random() * 256 ) }; // Trigger an event, check if it's canceled if ( this._trigger( "random", event, colors ) !== false ) { this.option( colors ); } }, // _setOptions is called with a hash of all options that are changing // always refresh when changing options _setOptions: function() { // _super and _superApply handle keeping the right this-context this._superApply( arguments ); this._refresh(); }, // _setOption is called for each individual option that is changing _setOption: function( key, value ) { // prevent invalid color values if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) { return; } this._super( key, value ); } }); // Initialize with default options $( "#my-widget1" ).colorize(); // Initialize with two customized options $( "#my-widget2" ).colorize({ red: 60, blue: 60 }); // Initialize with custom green value // and a random callback to allow only colors with enough green $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; } }); } ); |
Cukup panjang ya, jika sudah akan menghasilkan seperti ini:
Silahkan teman-teman coba klik tombolnya pasti akan menghasilkan warna boxnya, cukup simple ya, dan saya rasa cukup sampai disini dulu belajar kita tentang cara membuat warna random dengan jQuery UI semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.