DTE :]: December 2011

Saturday, December 31, 2011

Individual Effect Settings for JQuery UI Dialog: show/hide

$('#dialog').dialog({
    show: {effect: "fade", duration: 250},
    hide: {effect: "pulsate", duration: 200, times: 2}
});

Labels: jQuery, Lanjutan, Potongan

Thursday, December 29, 2011

Seleksi Semua Tautan Ekternal

Kustomisasi Selektor

Sisipkan kode ini untuk menciptakan selektor baru bernama :external

// Buat selektor kustom `:external`
$.expr[':'].external = function(obj) {
    return !obj.href.match(/^mailto\:/) && (obj.hostname != window.location.hostname);
};

Contoh Penerapan

Otomatis Membuka Semua Link Eksternal di Tab/Jendela Baru

$(function() {
    $('a:external').attr('target', '_blank'); // menambahkan atribut `target` dengan nilai `_blank`
});

Menandai Semua Link Eksternal

$(function() {
    $('a:external').addClass('external'); // menambahkan kelas `external` pada semua tautan eksternal
});

/* Sedikit kode CSS */
.external {color:red}

Lihat Demo

Sumber: jQuery How To

Labels: jQuery, Menengah, Potongan

Ubah Kondisi Elemen Induk Jika CheckBox Dicentang (Checked)

jQuery

$('div.area').find('input:checkbox').change(function() {
    if ($(this).is(':checked')) {
        $(this).parent().addClass('active');
    } else {
        $(this).parent().removeClass('active');
    }
});

CSS

.area {
  padding:10px;
  border:1px solid #ccc;
}

.active {background-color:yellow}

Lihat Demo

Thank’s Mottie :D

Labels: jQuery, Lanjutan, Potongan

Textarea onClick/onMouseOver Select

OnClick

<textarea rows="5" cols="35" onclick="javascript:this.focus();this.select();" readonly="readonly">
Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consectetur kampuang nan jauh dimato ambo-ambo tempe goreng enak rasanya...
</textarea>

OnMouseOver

<textarea rows="5" cols="35" onmouseover="javascript:this.focus();this.select();" readonly="readonly">
Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consectetur kampuang nan jauh dimato ambo-ambo tempe goreng enak rasanya...
</textarea>

Lihat Demo

Labels: JavaScript, Potongan

JavaScript Centered Popup Window

JavaScript

<script>
/*
Updated by: Mike Weiner :: http://www.wearebent.com 
Original author: Eric King (eric_andrew_king@hotmail.com)
Last Updated: May 2006
Changes: Added parameters for optional scrollbars, resizablility,
menubar, toolbar, addressbar, statusbar, fullscreen. Also tweaked the
implementation a bit - links will now give the user a popup window
even if JavaScript is disabled.
Notes: Some parameters are not cross-browser capable (e.g. fullscreen).
Browsers that do not support these abilities will ignore them.
Sumber: http://javascriptsource.com/navigation/centered-popup.html
*/
function newWindow(a_str_windowURL, a_str_windowName, a_int_windowWidth, a_int_windowHeight, a_bool_scrollbars, a_bool_resizable, a_bool_menubar, a_bool_toolbar, a_bool_addressbar, a_bool_statusbar, a_bool_fullscreen) {
    var int_windowLeft = (screen.width - a_int_windowWidth) / 2;
    var int_windowTop = (screen.height - a_int_windowHeight) / 2;
    var str_windowProperties = 'height=' + a_int_windowHeight + ',width=' + a_int_windowWidth + ',top=' + int_windowTop + ',left=' + int_windowLeft + ',scrollbars=' + a_bool_scrollbars + ',resizable=' + a_bool_resizable + ',menubar=' + a_bool_menubar + ',toolbar=' + a_bool_toolbar + ',location=' + a_bool_addressbar + ',statusbar=' + a_bool_statusbar + ',fullscreen=' + a_bool_fullscreen + '';
    var obj_window = window.open(a_str_windowURL, a_str_windowName, str_windowProperties)
    if (parseInt(navigator.appVersion) >= 4) {
         obj_window.window.focus();
    }
}
</script>

Penggunaan

<a href="//latitudu.blogspot.com" onclick="newWindow(this.href, 'popup', 600, 500, 1, 1, 0, 0, 0, 1, 0); return false;" target="_blank">Kunjungi Situs Life is Be U to Full</a>

<a href="//www.blogger.com" onclick="newWindow(this.href, 'prikitiw', 600, 500, 1, 1, 0, 0, 0, 1, 0); return false;" target="_blank">Kunjungi Situs Blogger</a>

Lihat Demo

600 adalah lebar jendela, 500 adalah ketinggian jendela. Angka-angka yang mengikuti di belakangnya menentukan apakah properti-properti jendela diaktifkan ("1") atau dinonaktifkan ("0"), urutannya adalah: scrollbar, resizable, menubar, toolbar, addressbar, statusbar, fullscreen
popup adalah nama jendela. Jika setiap link dilengkapi dengan nama jendela yang sama, maka saat sebuah URL diakses pada jendela munculan, link berikutnya dengan nama jendela yang sama akan diakses pada jendela munculan yang sama mengantikan halaman yang terbuka sebelumnya. (Dua kali klik pada nama jendela yang sama tidak akan membuka dua buah jendela munculan).

Labels: JavaScript, Menengah, Potongan

Wednesday, December 28, 2011

Validasi Email dengan JavaScript

/*
Created by: Anita Sudhakar :: http://www.smartwebby.com/DHTML/email_validation.asp
*/
function echeck(str) {
    var at = "@";
    var dot = ".";
    var lat = str.indexOf(at);
    var lstr = str.length;
    var ldot = str.indexOf(dot);
    if (str.indexOf(at) == -1) {
        alert("ID Email tidak valid!");
        return false;
    }
    if (str.indexOf(at) == -1 || str.indexOf(at) == 0 || str.indexOf(at) == lstr) {
        alert("ID Email tidak valid!");
        return false;
    }
    if (str.indexOf(dot) == -1 || str.indexOf(dot) == 0 || str.indexOf(dot) == lstr) {
        alert("ID Email tidak valid!");
        return false;
    }
    if (str.indexOf(at, (lat + 1)) != -1) {
        alert("ID Email tidak valid!");
        return false;
    }
    if (str.substring(lat - 1, lat) == dot || str.substring(lat + 1, lat + 2) == dot) {
        alert("ID Email tidak valid!");
        return false;
    }
    if (str.indexOf(dot, (lat + 2)) == -1) {
        alert("ID Email tidak valid!");
        return false;
    }
    if (str.indexOf(" ") != -1) {
        alert("ID Email tidak valid!");
        return false;
    }
    return true;
}

function ValidateForm() {
    var emailID = document.frmSample.txtEmail;

    if ((emailID.value == null) || (emailID.value == "")) {
        alert("Ketik alamat email Anda!");
        emailID.focus();
        return false;
    }
    if (echeck(emailID.value) == false) {
        emailID.value = "";
        emailID.focus();
        return false;
    }
    return true;
}

<form name='frmSample' method='post' action='#' onSubmit='return ValidateForm()'>
Masukkan alamat email: 
    <input type='text' name='txtEmail' /> 
    <input type='submit' name='submit' value='Submit' />
</form>

Lihat Demo

Pembaharuan

Filter yang lebih sederhana dengan regex dari Dynamic Drive:

/*
 * Email Validation script - © Dynamic Drive (www.dynamicdrive.com)
 * This notice must stay intact for legal use.
 * Visit http://www.dynamicdrive.com/ for full source code
 */

var emailfilter = /^\w+[\+\.\w\-]*@([\w\-]+\.)*\w+[\w\-]*\.([a-z]{2,4}|\d+)$/ig;

function checkmail(e) {
    var checkval = emailfilter.test(e.value);
    if (checkval == false) {
        alert("ID Email tidak valid!");
        e.select();
    }
    return checkval;
}

<form name='taufik'>
    <input name='prikitiwform' type='text' />
    <input type='submit' onClick='return checkmail(this.form.prikitiwform)' value='Submit' />
</form>

Lihat Demo

Labels: JavaScript, Lanjutan, Potongan, Regex

Menampilkan Tanggal Saat Ini dengan JavaScript

Letakkan fungsi ini di atas </head>:

<script>
function dispDate(dateVal) {

    DaystoAdd = dateVal;
    TodaysDate = new Date();
    TodaysDay = new Array('Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&#39;at', 'Sabtu');
    TodaysMonth = new Array('Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
    DaysinMonth = new Array('31', '28', '31', '30', '31', '30', '31', '31', '30', '31', '30', '31');

    function LeapYearTest(Year) {
        if (((Year % 400) === 0) || (((Year % 100) !== 0) && (Year % 4) === 0)) {
            return true;
        } else {
            return false;
        }
    }

    CurrentYear = TodaysDate.getYear();
    if (CurrentYear < 2000) CurrentYear = CurrentYear + 1900;
    currentMonth = TodaysDate.getMonth();
    DayOffset = TodaysDate.getDay();
    currentDay = TodaysDate.getDate();
    month = TodaysMonth[currentMonth];
    if (month == 'February') {
        if (((CurrentYear % 4) === 0) && ((CurrentYear % 100) !== 0) || ((CurrentYear % 400) === 0)) {
            DaysinMonth[1] = 29;
        } else {
            DaysinMonth[1] = 28;
        }
    }
    days = DaysinMonth[currentMonth];
    currentDay += DaystoAdd;
    if (currentDay > days) {
        if (currentMonth == 11) {
            currentMonth = 0;
            month = TodaysMonth[currentMonth];
            CurrentYear = CurrentYear + 1;
        } else {
            month = TodaysMonth[currentMonth + 1];
        }
        currentDay = currentDay - days;
    }
    DayOffset += DaystoAdd;

    function offsettheDate(offsetCurrentDay) {
        if (offsetCurrentDay > 6) {
            offsetCurrentDay -= 6;
            DayOffset = TodaysDay[offsetCurrentDay - 1];
            offsettheDate(offsetCurrentDay - 1);
        } else {
            DayOffset = TodaysDay[offsetCurrentDay];
            return true;
        }
    }

    offsettheDate(DayOffset);
    TheDate = DayOffset + ', ';
    TheDate += currentDay + ' ';
    TheDate += month + ' ';
    if (CurrentYear < 100) CurrentYear = "19" + CurrentYear;
    TheDate += CurrentYear;
    document.write(' ' + TheDate);
}
</script>

Setelah itu panggil fungsi dispDate(0) pada tempat yang Anda inginkan:

<script>
dispDate(0);
</script>

Lihat Demo

Sumber: Instant Web Site Tool

Versi Saya

Memungkinkan untuk menambahkan waktu jam, detik dan menit serta efek animasi perubahan waktu setiap detik jika dimasukkan ke dalam setInterval():

<div id="date-container"></div>
<script>
function showDateTo(elemID) {

    var date = new Date();
    var second = date.getSeconds();
    var minute = date.getMinutes();
    var hour = date.getHours();
    var day = date.getDay();
    var dayMonth = date.getDate();
    var month = date.getMonth();
    var year = date.getYear();

    var dayArray = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum&#39;at", "Sabtu"];
    var monthArray = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

    // Menambahkan angka nol di depan jika nilai kurang dari 10
    if (second < 10) second = '0' + second;
    if (minute < 10) minute = '0' + minute;
    if (hour < 10) hour = '0' + hour;
    if (dayMonth < 10) dayMonth = '0' + dayMonth;

    if (year < 1000) year += 1900;

    document.getElementById(elemID).innerHTML = dayArray[day] + ', ' + dayMonth + ' ' + monthArray[month] + ' ' + year + ' ' + hour + ':' + minute + ':' + second;

}

// Masukkan ke kontainer!
// Pakai interval 1 detik sekali untuk efek animasi jam
// (tanpa interval masih tetap bisa bekerja, tapi tidak akan ada efek animasi)
setInterval(function() {
    showDateTo('date-container');
}, 1000);
</script>

Lihat Demo

Labels: JavaScript, Menengah, Potongan

JavaScript Redirect URL

Alihkan URL halaman menuju ke http://dte-feed.blogspot.com:

<script>
window.location.href = 'http://dte-feed.blogspot.com';
</script>

Lihat Demo

Labels: JavaScript, Menengah, Potongan

JavaScript Alert Popup Window

Perkenalan

<script>
alert("Taufik Nurrohman");
</script>

Lihat Demo

Aksi Berdasarkan Perintah

Dasar

<button onclick="alert('Taufik Nurrohman');">Klik!</button>

Dengan jQuery

<script>
$(function() {
    $('button').click(function() {
         alert('Taufik Nurrohman');
    });
});
</script>

Lihat Demo

Labels: Dasar, JavaScript, Potongan

Tuesday, December 27, 2011

Menonaktifkan Klik-Kanan dengan jQuery

Keistimewaan sistem keamanan ini dibandingkan dengan sistem keamanan pencegahan klik-kanan dengan alert adalah sasarannya yang dapat ditentukan sesuka hati. Sistem keamanan ini juga lebih mengandung unsur seni karena saat aksi klik-kanan dilakukan, sebuah tabir/overlay akan muncul untuk menutupi semua halaman:

Lihat Demo

Dasar Ide

Ide dasar dari pembuatan sistem keamanan ini adalah dari plugin jQuery klik-kanan yang sempat Saya dapatkan dari A Beautiful Site. Caranya sangat sederhana: Cukup dengan menyisipkan plugin tersebut ke dalam proyek, kemudian kita jalankan fungsi .rightClick() untuk menampilkan overlay saat aksi klik-kanan dilakukan:

/*
jQuery Right-Click Plugin
Version 1.01
Cory S.N. LaViska
A Beautiful Site (http://abeautifulsite.net/)
*/
if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...
$(function() {
    $(document).rightClick(function(e) {
         $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
    });

    $('#no-right-click-overlay').click(function() {
         $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
    });
});

Langkah Selengkapnya

Berikut ini adalah langkah-langkah selengkapnya untuk menciptakan sistem keamanan seperti pada halaman demo:

Pertama-tama pastikan dulu bahwa temamu sudah dilengkapi dengan jQuery. Jika belum ada, kunjungi halaman ini terlebih dahulu kemudian salin script jQuery-nya saja. Plugin easing tidak diperlukan dalam proyek ini.

Setelah itu salin kode ini kemudian letakkan tepat di bawah jQuery tadi:

<script>
/*
jQuery Right-Click Plugin
Version 1.01
Cory S.N. LaViska
A Beautiful Site (http://abeautifulsite.net/)
*/
if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...
$(function() {
    $(document).rightClick(function(e) {
         $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
    });
    $('#no-right-click-overlay').click(function() {
         $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
    });
});
</script>

Berikutnya letakkan elemen ini tepat di atas tag </body>:

<div id='no-right-click-overlay'>
Teks peringatan di sini...
</div>

Terakhir, Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

#no-right-click-overlay {
  background:#000;
  font:bold 30px 'Comic Sans MS',Calibri,Arial,Sans-Serif;
  color:#f10c0c;
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  width:90%;
  height:100%;
  text-align:center;
  padding:5%;
  display:none;
}

Klik Simpan Tema.

Lebih Lanjut

Dalam script di atas Saya menerapkan fungsi .rightClick() pada $(document). Itu artinya bahwa Saya akan melarang orang lain melakukan aksi klik-kanan pada semua area dalam dokumen. Namun, jika Anda ingin menonaktifkan klik-kanan pada area/elemen tertentu saja, selektor $(document) bisa Anda ganti dengan selektor lain. Misalnya seperti ini:

$('#terlarang').rightClick(function(e) { $('#no-right-click-overlay').show(); });

Kode di atas akan melarang orang lain untuk melakukan aksi klik-kanan pada area #terlarang saja, sedangkan untuk area lainnya dapat dikenai aksi klik-kanan:

Lihat Demo

Labels: jQuery, Masalah

Celah pada Kontainer Gambar

Saat Anda menambahkan kontainer pada gambar, terkadang Anda akan mengalami masalah seperti ini:

.container {
  border:5px solid #FF0080;
}

Sebuah celah tampak menganga pada salah satu sisi gambar yang akan membuat gambar menjadi tampak semakin buruk.
Masalahnya sangat sederhana: Hal itu terjadi karena gambar masih berada dalam satu garis bersama dengan aliran teks. Celah yang mengganggu tersebut sebenarnya hanyalah line-height dari teks yang ikut mengenai gambar.

Cara sederhana untuk mengatasi masalah itu adalah dengan mendeklarasikan display:block pada gambar yang dimaksud sehingga aliran gambar akan terpotong dari teks:

.container {
  border:5px solid #FF0080;
}

.container img {
  display:block;
}

Labels: CSS, Gambar, Masalah

Free Licence Pure CSS3 Drop Down Menu Templates

Free download a set of CSS3 Drop Down Menus with free license. This menu can be used for personal or commercial use without attribution. Simply don't add a "naughty attribution". That's all :D

But because it uses CSS3, please make sure that you have to consider about browser supports.

All of the menu effect are come from CSS Transition. ie-support-html5.js required to ensure that Internet Explorer can read the <nav> tag.

Sorry, I don't have much time to make all the demo page because it's so boring I think. Moreover each of them look similar right?

View One of The Demo Download Files

Labels: CSS, Desain

Saturday, December 24, 2011

Pure CSS3 JSFIDDLE.net

Maybe this will be a controversial experiment, because plagiarism the other sites are strictly prohibited. That's a violation of copyright. Therefore, I'm not going to make this experiment as a work that can be downloaded. I hope you can understand about that, because I really appreciate of copyright.

I was originally wanted to implement an accordion effect on the sidebar, but after I tried it was so hard, so for now this is how it is. No accordion. Only a bit loading effect:

View Demo Download Files

To prevent the abuse of copyright, this experiment not allowed to download.

Looking Through IE8

As usual...

Here's the original: jsfiddle.net

Labels: CSS, Eksperimen

Thursday, December 22, 2011

Kolom Sama Tinggi dengan jQuery

$(function() {
    // set the starting `bigestHeight` variable
    var biggestHeight = 0;
    // check each of them
    $('.col').each(function() {
         // if the height of the current element is
         // bigger then the current `biggestHeight` value
         if($(this).height() > biggestHeight) {
             // update the `biggestHeight` with the
             // height of the current elements
             biggestHeight = $(this).height();
         }
    });

    // when checking for `biggestHeight` is done set that
    // height to all the elements
    $('.col').height(biggestHeight);
});

<div>
  <div class="col"> … </div>
  <div class="col"> … </div>
  <div class="col"> … </div>
  <div class="col"> … </div>
</div>

Lihat Demo

Sumber: Web.Enavu

Labels: jQuery, Lanjutan, Potongan

jQuery UI Resizable

.resizable() akan membuat elemen menjadi mudah diubah ukurannya. Saat sebuah elemen dikenai fungsi .resizable(), maka sebuah tanda berbentuk simbol ui-icon-gripsmall-diagonal-se akan disematkan di pojok kanan bawah. Selain itu, kursor pointer juga akan berubah.

Dasar Penggunaan

Buat sebuah elemen dengan lebar dan tinggi tertentu. Elemen dapat diseleksi seperti biasanya mengikuti sintaks jQuery:

Kerangka

<div id='area'>
    ...
<div>

CSS

#area {
  background-color:#E86C0A;
  width:170px;
  height:140px;
}

jQuery UI

$('#area').resizable();

Lihat Demo

Konfigurasi jQuery UI Resizable

Opsi	Nilai	Deskripsi
minWidth	0, 1, 2, 3, ... (numerik)	Membatasi perubahan lebar terkecil elemen. (default: 10)
minHeight	0, 1, 2, 3, ... (numerik)	Membatasi perubahan tinggi terkecil elemen. (default: 10)
maxWidth	0, 1, 2, 3, ... (numerik)	Membatasi perubahan lebar terbesar elemen. (default: null)
maxHeight	0, 1, 2, 3, ... (numerik)	Membatasi perubahan tinggi terbesar elemen. (default: null)
aspectRatio	2/3, 4/2 ... (perbandingan lebar dan tinggi)	Menjaga agar rasio/perbandingan lebar dan tinggi elemen tetap ideal. (default: false)
grid	0, 1, 2, 3, ... (numerik)	Menentukan jarak langkah perubahan ukuran elemen (default: false)
containment	"#kontainer" ... (selektor)	Membatasi pembesaran ukuran elemen dengan batasan berupa elemen induk (default: false)
helper	"garis-bantu" (kelas)	Menyisipkan pembantu/indikator perubahan ukuran saat elemen sedang diubah ukurannya. Wujud `helper` tidak mutlak, tergantung dari kode CSS yang Anda buat pada kelas `helper`nya. (default: false)
ghost	true	Tugasnya sama dengan `helper`. Hanya saja, `ghost` berwujud duplikat elemen transparan yang akan menjadi indikator perubahan ukuran elemen. (default: false)
ghost	false
animate	true	Berfungsi untuk menganimasikan perubahan ukuran elemen. (default: false)
animate	false
animateDuration	"slow", "normal", "fast"	Mengatur kecepatan animasi. (default: "slow")
animateDuration	1000, 2000, ... (milidetik)	Mengatur kecepatan animasi. (default: "slow")
animateEasing	"swing", "easeInBack", ... (nama easing)	Menentukan easing khusus pada animasi perubahan ukuran elemen. (default: "swing") Pelajari tentang easing jQuery di sini
alsoResize	"#saya-juga" ... (selektor)	Opsi ini akan membuat elemen lain ikut berubah jika elemen target diubah ukurannya. (default: false) Dalam hal ini, elemen pengikut yang dimaksud adalah `#saya-juga`.
delay	100, 200 ... (milidetik)	Menentukan waktu penundaan perubahan elemen. Saat opsi ini diterapkan, maka elemen akan berubah ukuran saat waktu delay telah habis.
distance	20, 30 ... (piksel)	Menentukan penundaan perubahan elemen berdasarkan jarak. Saat opsi ini diterapkan, maka elemen akan berubah ukuran setelah handle elemen digeser pada jarak tertentu.

Contoh Penerapan

minWidth:120, minHeight:110, maxWidth:500, maxHeight:350

Dengan menentukan opsi tinggi/lebar minimal dan tinggi/lebar maksimal, Anda bisa membatasi perubahan ukuran terkecil dan ukuran terbesar elemen sesuai kehendak:

$('#area').resizable({
    minWidth:120,
    minHeight:110,
    maxWidth:500,
    maxHeight:350
});

Lihat Demo

aspectRatio:3/2

Menentukan aspectRatio akan menjaga perbandingan lebar dan tinggi elemen agar tetap konsisten/ideal. Biasanya ini diperlukan untuk objek berupa gambar:

$('img').resizable({aspectRatio:3/2});

Lihat Demo

grid:50

Menentukan grid sebesar 50 akan mengubah langkah perubahan ukuran pada kelipatan 50 piksel. Tidak boleh kurang, tidak boleh lebih:

$('#area').resizable({grid:50});

Lihat Demo

containment:"#kontainer"

Membatasi pembesaran ukuran elemen juga dapat diatur berdasarkan ukuran elemen induk:

Kerangka

<div id='kontainer'>
    <div id='area'>
        ...
    </div>
</div>

CSS

#kontainer {
  width:450px;
  height:500px;
  border:1px solid #555;
}

#area {
  width:170px;
  height:140px;
  background-color:#E86C0A;
}

jQuery UI

$('#area').resizable({containment:"#kontainer"});

Lihat Demo

helper:"garis-bantu"

Tentukan nama kelas helper secara bebas, kemudian buat dimensinya dalam CSS. Opsi helper digunakan untuk memberikan indikator perubahan ukuran elemen:

.garis-bantu {border:1px dotted #666;}

$('img').resizable({helper:"garis-bantu"});

Lihat Demo

ghost:true

Menentukan nilai ghost menjadi true akan memberikan indikator perubahan ukuran elemen berupa duplikat elemen transparan:

$('img').resizable({ghost:true});

Lihat Demo

animate:true

Menentukan nilai animate menjadi true akan memberikan efek animasi pada saat ukuran elemen sedang berubah:

.garis-bantu {border:1px dotted #666;}

$('img').resizable({
    animate:true,
    helper:"garis-bantu"
});

Lihat Demo

animate:true, animateDuration:1000, animateEasing:"easeOutElastic"

Setelah menentukan opsi animate:true, opsi lain seperti penentuan kecepatan animasi dan tipe easing juga bisa diterapkan:

.garis-bantu {border:1px dotted #666;}

$('img').resizable({
    animate:true,
    animateDuration:1000,
    animateEasing:"easeOutElastic",
    helper:"garis-bantu"
});

Lihat Demo Tentang Easing jQuery

alsoResize:".saya-juga"

Opsi ini akan membuat elemen .saya-juga ikut berubah jika elemen target diubah ukurannya:

Kerangka

<img src='eureka1.jpg' />
<div class='saya-juga'></div>
<div class='saya-juga'></div>
<div class='saya-juga'></div>

CSS

.saya-juga {
  width:369px;
  height:246px;
  background:#555;
  margin-top:10px;
}

jQuery UI

$('img').resizable({alsoResize:".saya-juga"});

Lihat Demo

delay:1000

Menuliskan opsi delay:1000 akan menunda perubahan ukuran elemen selama 1000ms ke depan sejak pertama kali handle digeser:

$('#area').resizable({delay:1000});

distance:40

Menuliskan opsi distance:40 akan menunda perubahan ukuran elemen sampai handle digeser sejauh 40 piksel:

$('#area').resizable({distance:40});

Lihat Demo

Gambar: Projekt Eureka » Animepaper.net

Labels: jQuery, Menengah

Wednesday, December 21, 2011

Konfigurasi jQuery UI Slider

Slider adalah elemen UI berbentuk variabel klasik. Untuk mendapatkan nilai, Anda harus menggeser slider ke kanan atau ke kiri, ke atas dan ke bawah. Meskipun metodenya terlihat klasik, namun sangat menarik untuk ukuran antarmuka berupa objek digital.

Dasar Penggunaan

Mengubah elemen tertentu menjadi Slider dilakukan dengan cara menerapkan fungsi .slider() pada elemen yang diseleksi:

$('#slider').slider();

Lihat Demo

Konfigurasi jQuery UI Slider

Opsi	Nilai	Deskripsi
value	0, 1, 2, 3, ... (numerik)	Menentukan letak slider handle saat pertama kali halaman terakses/dikunjungi. (default: 0)
step	0, 1, 2, 3, ... (numerik)	Menentukan nilai `step` dengan bilangan tertentu akan membuat slider handle bergeser dengan akurat pada loncatan sebesar nilai `step`. (default: 1)
min	0, 1, 2, 3, ... (numerik)	Menentukan nilai terendah Slider. (default: 0)
max	0, 1, 2, 3, ... (numerik)	Menentukan nilai tertinggi Slider. (default: 100)
range	"min"	Nilai `"min"` akan memberikan dekorasi berupa warna tertentu (sesuai tema) pada sisa jarak di belakang slider handle, sedangkan `"max"` akan memberikan dekorasi warna pada sisa jarak di depan slider handle. Ini hanya untuk keperluan antarmuka. Nilai `true` agak rumit untuk dijelaskan. Intinya adalah, nilai ini digunakan untuk menyatakan bahwa Anda akan menerapkan dua buah slider handle pada satu bar. Ini adalah syarat pertama untuk membuat slider berganda. (default: false)
	"max"
	true
values	[1, 20] (Array)	Saat Anda menuliskan opsi ini, maka opsi `value` sudah tidak diperlukan lagi. Opsi ini hanya digunakan jika Anda akan menciptakan dua buah slider handle dalam satu bar, yaitu setelah Anda menyatakan `range:true`. Angka pertama menyatakan letak slider handle pertama dan angka ke dua menyatakan letak slider handle ke dua. (default: null)
orientation	"horizontal"	Pilihan untuk menentukan orientasi Slider. `"horizontal"` akan memposisikan Slider secara horizontal, `"vertical"` akan memposisikan Slider secara vertikal. (default: "horizontal")
orientation	"vertical"
slide	function(event, ui) {}	ini adalah opsi terpenting. Opsi ini digunakan untuk mengambil data dari Slider.

Contoh Penerapan

Secara normal, betapapun lebar dan tinggi jarak/range Slider, nilai akan selalu dimulai dari 0 dan berakhir pada 100. Ini adalah sistem persentase. Jadi, Saya rasa Anda tidak akan kesulitan untuk mengimajinasikannya.

value:30

Menentukan nilai value sebesar 30 akan menempatkan slider handle pada jarak 30% dari keseluruhan lebar bar:

$('#slider').slider({value:30});

Lihat Demo

step:10

Menentukan nilai step sebesar 10 akan membuat langkah slider handle lebih tegas dan terukur. Ini diperlukan jika Anda menginginkan nilai yang akurat sehingga akan mempermudah perhitungan selanjutnya:

$('#slider').slider({step:10});

Lihat Demo

range:"min" dan range:"max"

Menentukan nilai range:"min" akan memberikan dekorasi berupa warna tertentu sesuai dengan temanya pada sisa jarak di belakang slider handle.

Menentukan nilai range:"max" akan memberikan dekorasi berupa warna tertentu sesuai dengan temanya pada sisa jarak di depan slider handle:

$('#slider1').slider({range:"min"});
$('#slider2').slider({range:"max"});

Lihat Demo

Pengambilan Data

Pengambilan data dapat dilakukan dengan menambahkan opsi slide. Nilainya berupa fungsi jQuery UI Slider yang secara umum dapat dituliskan seperti ini:

slide:function(event, ui) {
    $('#data-1').val(ui.value);
}

ui.value adalah variabel bawaan dari jQuery UI Slider. Nilainya bisa berubah-ubah sesuai dengan pergerakan slider handle. Di sini Saya menggunakan .val() untuk menyisipkan data karena elemen yang akan disisipi adalah elemen <input>. Jika elemen yang akan Anda gunakan berupa elemen biasa dan bukan merupakan elemen-elemen formulir, Anda bisa menggunakan alternatif .text() atau .html() (pelajari di sini).

Kita buat dua buah elemen. Elemen pertama akan menjadi Slider UI dan elemen ke dua akan menjadi pencatat nilai:

<div id='slider'></div>
<input type='text' id='data-1'>

Kemudian kita buat slidernya seperti ini:

$('#slider').slider({
    slide:function(event, ui) {
        $('#data-1').val(ui.value);
    }
});

Kode di atas akan menyisipkan data ui.value ke dalam elemen <input type='text' id='data-1'> setiap kali slider handle digerakkan:

Lihat Demo

min:30 dan max:1000

Menentukan nilai min:30 akan mengubah nilai minimal Slider yang secara normal adalah 0 menjadi 30. Menentukan nilai max:1000 akan mengubah nilai maksimal Slider yang secara normal adalah 100 menjadi 1000.

$('#slider').slider({
    min:30,
    max:1000,
    slide:function(event, ui) {
        $('#data-1').val(ui.value);
    }
});

Lihat Demo

orientation:"vertical"

orientation:"vertical" digunakan jika Anda menginginkan Slider dengan orientasi vertikal. Slider horizontal memiliki kemampuan melebarkan diri karena memang itulah sifat dasar elemen blok. Namun Slider vertikal tidak bisa begitu. Anda harus menentukan tinggi Slider vertikal sendiri dengan perantara .height() atau cukup mendeklarasikan tinggi dengan nilai tertentu pada selektor CSS elemen yang dimaksud:

Perantara .height()

$('#slider').slider({orientation:"vertical"}).height(300);

Mendeklarasikannya dalam CSS

#slider {height:300px}

$('#slider').slider({orientation:"vertical"})

Lihat Demo

Menggabungkan Beberapa Opsi

<h1 id='data-1'>Berat badan Anda?</h1>
<div id='slider'></div>

$('#slider').slider({
    range:"min",
    value:10,
    min:10,
    max:1000,
    slide:function(event, ui) {
        $('#data-1').text(ui.value + ' Kg');
    }
});

Lihat Demo

Slider Berganda

Dalam satu Slider dapat diterapkan lebih dari satu slider handle. Hal ini biasanya digunakan untuk keperluan menentukan nilai minimal dan maksimal. Syarat pertama untuk menciptakan slider berganda adalah dengan menentukan opsi range:true, setelah itu tentukan nilai values berupa dua buah range dalam array.

Opsi value sudah tidak diperlukan lagi di sini karena telah digantikan oleh values. Variabel Slider tidak lagi berupa ui.value namun berubah menjadi ui.values[0] untuk handle pertama dan ui.values[1] untuk handle ke dua.

<div id='slider'></div>
<label for='dataMin'>Minimal: </label><input type='text' id='dataMin' />
<label for='dataMax'>Maksimal: </label><input type='text' id='dataMax' />

$('#slider').slider({
    range:true,
    values:[10, 70],
    slide:function(event, ui) {
        $('#dataMin').val(ui.values[0]);
        $('#dataMax').val(ui.values[1]);
    }
});

Lihat Demo

Labels: jQuery, Lanjutan