Widget Slider Pengganti Warna BackGround
Hai, sekarang saya akan membahas Script Background. Scriptnya menggunakan apa ya? Kita baca artikel ini
Perasaan saya ini pernah saya posting deh, tapi gak apa-apa lah, ini sebagai ilmu tambahan saja kok untuk mengenal lebih dalam fitur jQuery UI pada blog kami
Apa itu jQuery UI? jQuery UI merupakan fitur tambahan supaya user interface blog lebih canggih lagi.
So far, ini merupakan teknik yang sangat bagus ketimbang menggunakan tabel apalagi input type color karena alasan berikut:
<form action="javascript:bgChange()" style="width:100%">
<input type="range" id="r" min="0" style="float:left" max="255" onchange="bgChange()" value="30" /><span id="rv" style="color:red;float:right;"></span>
<br/>
<input type="range" id="g" min="0" style="float:left" max="255" onchange="bgChange()" value="144" /><span id="gv" style="color:green;float:right"></span>
<br/>
<input type="range" id="b" min="0" style="float:left" max="255" onchange="bgChange()" value="255" /><span id="bv" style="color:blue;float:right"></span>
</form>
<script type="text/javascript">
function bgChange() {
var r = $('#r').prop('value');
var g = $('#g').prop('value');
var b = $('#b').prop('value');
var bg = 'rgb(' + r + ',' + g + ',' + b + ')';
$('#rv').text(r)
$('#gv').text(g)
$('#bv').text(b)
document.body.style.background = bg;
}
</script>
Perasaan saya ini pernah saya posting deh, tapi gak apa-apa lah, ini sebagai ilmu tambahan saja kok untuk mengenal lebih dalam fitur jQuery UI pada blog kami
Apa itu jQuery UI? jQuery UI merupakan fitur tambahan supaya user interface blog lebih canggih lagi.
So far, ini merupakan teknik yang sangat bagus ketimbang menggunakan tabel apalagi input type color karena alasan berikut:
- Menggunakan tabel pilihan warnanya hanya terbatas, sehingga pengunjung blog puas dengan warna yang itu-itu saja
- Sedangkan input type color memang sama dengan slider yang akan kita bahas, tapi dalam penelitian kami, hanya satu browser yang support input type color, yaitu Google Chrome. Selebihnya oh no! Jika divalidate, muncul warning the color input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.
Mau tidak? Kalau mau, buat widget baru (Login > Blog Anda > DropDown > Tata Letak > Tambahkan > HTML/JavaScript), lalu masukkan kode berikut:
<form action="javascript:bgChange()" style="width:100%">
<input type="range" id="r" min="0" style="float:left" max="255" onchange="bgChange()" value="30" /><span id="rv" style="color:red;float:right;"></span>
<br/>
<input type="range" id="g" min="0" style="float:left" max="255" onchange="bgChange()" value="144" /><span id="gv" style="color:green;float:right"></span>
<br/>
<input type="range" id="b" min="0" style="float:left" max="255" onchange="bgChange()" value="255" /><span id="bv" style="color:blue;float:right"></span>
</form>
<script type="text/javascript">
function bgChange() {
var r = $('#r').prop('value');
var g = $('#g').prop('value');
var b = $('#b').prop('value');
var bg = 'rgb(' + r + ',' + g + ',' + b + ')';
$('#rv').text(r)
$('#gv').text(g)
$('#bv').text(b)
document.body.style.background = bg;
}
</script>
Selesai!
Tidak ada komentar:
Posting Komentar
► Komentar diluar topik diperbolehkan, tapi tidak akan dibalas
Out Of Topic► Link aktif dan iklan hukumnya HARAM
► Aturan memasukan elemen:
a. Youtube: <i rel="youtube">...youtube url...</i>
b. Kutipan: <b rel="quote">...quotes...</b>
c. Kode pendek: <i rel="code">...code here...</i>
d. Kode panjang: <i rel="pre">...code here...</i>
e. Gambar: <i rel="image">...img url...</i>