Notabenya kita tidak mengganti tulisan yang sudah tampil di halaman website, kecuali kita menggantinya membuka file kodingnya lalu kita ganti secara manual, tetapi disini saya menemukan sebuah plugin dimana kita bisa mengganti warna tuisan secara live, seperti apa cara membuatnya simak terus ya teman-teman.
Jadi dimana nantinya kita bisa mengganti warna tuisan secara live ketika kita memilih tulisan mana yang ingin kita rubah warnanya dengan mengkliknya saja, maka nanti akan muncul sebuah popup color picker disitu kita mengganti sesuai warna kesukaan kita.
plugin ini saya temukan di sebuah website namanya jqueryscript ya teman-teman. silahkan teman-teman kunjungi disitu banyak plugin yang menurut saya bagus-bagus. oke kita lanjut ke topic, cara membuatnya silahkan teman-teman copy saja, dan ikuti saja, karena jika kita mengikuti cara yang ada di sumbernya, bagi teman-teman yang baru akan bingun karena terdapat code yang menurut saja tidak di pakai tidak apa-apa, oke langsung saja ini lah kodenya:
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Cara Mengganti Warna Tuisan Secara Live</title> <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/flatly/bootstrap.min.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="assets/table-color.css" rel="stylesheet" type="text/css" /> <link href="assets/style.css" rel="stylesheet" type="text/css" /> <style> body { background: #fafafa; font-family: 'Roboto'; } .container{ width: 800px; margin: auto; } </style> </head> <body> <div class="container"> <h1>Cara Mengganti Warna Tuisan Secara Live</h1> <table class="my-table table table-bordered"> <thead> <tr> <th>Nama</th> <th>Alamat</th> <th>NIM</th> </tr> </thead> <tbody> <tr> <td style="color:#FF9999;background-color:#efefef;">Roni</td> <td>Jl. Kebon Sirih Utara Atasnya Barat</td> <td>39288118</td> </tr> <tr> <td>Jefry</td> <td>Jl. Singa Jantan Suka Singa Betina Utara</td> <td>72277166</td> </tr> <tr> <td>Akew</td> <td>Jalan ku ada lima Rupa-rupa Warnanya</td> <td>28881199</td> </tr> </tbody> </table> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="assets/jquery.table-color.js"></script> <script> $(document).ready(function() { $('.my-table').tblcolor(); }); </script> </body> </html> |
Oiya di plugin ini tidak hanya untuk mengganti warna ya, tetapi kita juga bisa merubah sebuah backgroundya. Jadi popup color picker yang muncul ada dua yang satu untuk mengganti warna yang satu untuk merubah sebuah background. Kurang lebih seperti itu.
Bisa diliha yang A itu unuk tulisannya yang kuas itu untuk backgroundnya.
Setelah itu muncul sebuh popup color picker inilah yang di maksud.
dan ketika di OK maka tulisa pun akan berubah dan berganti warna.
Kurang lebih seperti itu ya teman-teman cara mengganti warna tuisan secara live, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.
