Membuat elemen HTML menjadi bisa digeser-geser ternyata jauh lebih mudah dibandingkan dengan apa yang Saya pikir selama ini. Fungsi di bawah ini murni menggunakan JavaScript biasa dan tidak memerlukan library apapun. Berbeda dengan plugin draggable buatan Saya yang dulu:
var selected = null, // Object of the element to be moved
x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
// Will be called when user starts dragging an element
function _drag_init(elem) {
selected = elem; // Store the object of the element which needs to be moved
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;
}
// Will be called when user dragging an element
function _move_elem(e) {
x_pos = document.all ? window.event.clientX : e.pageX;
y_pos = document.all ? window.event.clientY : e.pageY;
if (selected !== null) {
selected.style.left = (x_pos - x_elem) + 'px';
selected.style.top = (y_pos - y_elem) + 'px';
}
}
// Destroy the object when we are done
function _destroy() {
selected = null;
}
// Bind the functions here...
document.getElementById('draggable-element').onmousedown = function() {
_drag_init(this);
return false;
};
document.onmousemove = _move_elem;
document.onmouseup = _destroy;
Event ini akan memicu sebuah fungsi bernama doScroll (yang akan kita buat nanti) untuk bekerja saat mouse wheel digulung. Dimana nantinya doScroll akan dijadikan sebagai penayang nilai gulungan.
Nilainya hanya terdiri dari 1 atau -1, sekedar untuk menunjukkan apakah aksi yang terjadi adalah “menggulung ke atas” atau “menggulung ke bawah”:
var doScroll = function(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Lakukan sesuatu dengan `delta`
// (dalam contoh ini: menampilkan nilainya di dalam area `<body>`)
document.body.innerHTML = delta;
e.preventDefault(); // Tambahkan ini agar kerja `mouse whell` yang sesungguhnya bisa dimatikan
};
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", doScroll, false);
// Firefox
window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", doScroll);
}
Pada demo di atas, setiap kali Anda menggulung di atas halaman, yang terjadi hanyalah sebuah penampakan angka 1 atau -1 yang akan muncul berdasarkan arah gulungan. Untuk membuat nilainya meningkat atau berkurang, buatlah sebuah variabel kosong di luar event tersebut dengan nilai 0 seperti ini:
var current = 0;
Setelah itu, tingkatkan/kurangi nilainya dengan cara menambahkan nilai delta ke current:
var current = 0;
var doScroll = function(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Lakukan sesuatu dengan `delta`
current = current + delta; // Tingkatkan/kurangi nilai `current` dengan `delta`
document.body.innerHTML = current; // Tampilkan hasilnya di dalam `<body>`
e.preventDefault();
};
Contoh Penerapan: Membuat Area Menggulung Secara Horizontal
Pada intinya di sini Saya menerapkan contoh nomor dua dengan cara memanfaatkan nilai yang dihasilkan untuk memanipulasi nilai properti left pada elemen agar elemen bisa bergerak ke kiri atau ke kanan berdasarkan arah gulungan. Supaya gerakannya lebih cepat, nilainya Saya kalikan dengan mean:
HTML
<div id="scroll-area">
<div>
<!-- Konten di sini... -->
</div>
<div>
// Fake horizontal scrolling with mouse wheel
var elem = document.getElementById('scroll-area'),
width = parseInt(elem.offsetWidth, 10),
cldWidth = parseInt(elem.children[0].offsetWidth, 10),
distance = cldWidth-width,
mean = 40, // Just for multiplier (go faster or slower)
current = 0;
elem.children[0].style.left = current + "px"; // Set default `left` value as `0` for initiation
var doScroll = function(e) {
// cross-browser wheel delta
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// (1 = scroll-up, -1 = scroll-down)
// Always check the scroll distance, make sure that the scroll distance value will not
// increased more than the container width and/or less than zero
if ((delta == -1 && current*mean >= -distance) || (delta == 1 && current*mean < 0)) {
current = current + delta;
}
// Move element to the left or right by updating the `left` value
elem.children[0].style.left = (current*mean) + 'px';
e.preventDefault();
};
if (elem.addEventListener) {
elem.addEventListener("mousewheel", doScroll, false);
elem.addEventListener("DOMMouseScroll", doScroll, false);
} else {
elem.attachEvent("onmousewheel", doScroll);
}
// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
// Read => http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':', ''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function() {
var ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length,
i = 0, s;
for (; i < len; i++) {
if (!seg[i]) {
continue;
}
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
hash: a.hash.replace('#', ''),
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
};
}
Penggunaan
Data yang diparse nantinya akan berubah menjadi objek seperti ini:
AJAX jQuery ยท Memuat Beberapa Bagian Halaman Sekaligus dalam Satu Kali Permintaan
Ini adalah metode dasar yang sering Anda gunakan untuk memuat sebagian halaman ke dalam kontainer yang sudah dipersiapkan menggunakan AJAX. Di sini Saya menggambarkan Anda akan memuat elemen #content dari halaman /p/sample-page.html ke dalam elemen #container:
Setelah tombol diklik, maka elemen #content dari halaman /p/sample-page.html akan termuat di dalam elemen #container. Ini adalah kasus yang sederhana. Namun kasus ini akan menjadi lebih rumit ketika Anda ingin memuat beberapa bagian dari halaman lain secara bersamaan dalam satu kali permintaan. Sebagai contoh, Anda ingin memuat bagian posting, navigasi halaman dan komentar secara bersamaan dalam satu kali permintaan HTTP ke dalam beberapa kontainer yang sudah dipersiapkan. Berikut ini adalah cara yang tidak efisien:
Pada metode ini, Anda mengeklik sebuah tombol. Kemudian permintaan akan terjadi. Setelah proses permintaan berhasil dilakukan dan halaman yang diminta berhasil dipanggil, maka halaman tersebut tidak akan langsung dimuat ke dalam area/kontainer yang sudah dipersiapkan, melainkan masih berada di dalam parameter data.
Dari parameter tersebut Anda bisa menelusuri bagian-bagian halaman lainnya dengan cara menyeleksi elemen yang diinginkan di dalam $(data) untuk kemudian bisa dimuat ke dalam kontainer yang diinginkan melalui jQuery manipulasi DOM seperti .html(), .text(), .append() dan .prepend() atau yang lainnya.
Demo?
Jika Anda sedang menggunakan peramban Firefox, klik pada menu drop-down di pojok kiri atas. Pilih menu Web Developer kemudian klik sub menu Scratchpad (Atau cukup tekan tombol Shift+F4). Salin kode di bawah ini kemudian tempelkan di dalam editor Scratchpad:
Setelah kode ditempelkan, pilih menu Execute kemudian klik Run.
Sekarang klik salah satu tautan pada daftar entri/posting populer di sidebar blog ini dan tunggu beberapa saat sampai bagian dari halaman tersebut termuat. Jika berhasil, maka bagian yang akan berganti isinya adalah ada pada posting, navigasi halaman blog dan isi komentar (isi posting akan berubah, tautan navigasi halaman akan berubah dan isi komentar juga akan berubah).
Catatan dan Tambahan
jQuery .load() bisa menerima beberapa selektor sekaligus, jika Anda tidak tahu:
// Memuat `#sidebar`, `#comments` dan `#blog-pager`
// dari `http://abc_site.com/sample-page.html` ke dalam `#container`
$('#container').load('http://abc_site.com/sample-page.html #comments,#sidebar,#blog-pager');
Jika proses pemuatan menggunakan $.get() gagal (yang Saya alami adalah muncul pesan errorTypeError: n.innerHTML is undefined), cobalah untuk menggunakan pola ini:
$.get('http://abc_site.com/sample-page.html', {}, function(data) {
// Lakukan sesuatu dengan `$(data)`
}, 'html');
Membuat layout paralaks, jika Anda masih kesulitan untuk memahami bagaimana cara kerja dan cara membuatnya, di sini Saya akan menjelaskannya dengan rinci mengenai bagaimana layout tersebut tercipta. Pada dasarnya, sebuah layout paralaks hanyalah elemen HTML dengan beberapa tumpukan layer di dalamnya, dimana setiap layer tersebut akan dianimasikan posisinya dengan kecepatan yang sama namun dengan jarak yang berbeda untuk menciptakan efek tiga dimensi saat layer-layer tersebut bergerak.
Saya membuat sebuah elemen HTML sebagai kontainer dengan beberapa layer di dalamnya. Elemen utamanya adalah #parallax-wrapper. Elemen ini berfungsi sebagai wadah dari semua elemen paralaks di dalamnya. Sedangkan elemen-elemen .layer nantinya akan kita gunakan sebagai penampil latar. Kita akan memposisikan layer-layer tersebut menjadi bertumpukan layaknya tumpukan kaca. Jadi kita memerlukan ini untuk mengatur dimensi paralaks yang kita buat:
.parallax-wrapper {
border:1px solid black;
height:200px; /* Tentukan tinggi area paralaks, ukuran lebar tidak begitu penting */
position:relative; /* Penting! Posisi absolut pada elemen induk */
overflow:hidden;
}
/* Buat semua layer paralaks sebagai elemen absolut,
sehingga tampilannya akan bertumpuk satu sama lainnya */
.parallax-wrapper .layer {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
/* set beberapa pengaturan latar di sini,
sebelum kita mendefinisikan latar gambar secara sepihak
pada masing-masing layer */
background-position:0 0;
background-color:transparent;
background-repeat:repeat-x;
}
Setelah itu, gambar-gambar bisa diterapkan pada masing-masing layer:
Navigasi ini digunakan untuk menggerakkan latar paralaks —dan konten di dalamnya tentunya, agar paralaks tidak hanya berfungsi sebagai hiasan. Navigasi terdiri dari elemen <span> dengan beberapa tautan di dalamnya. Anda bisa membuatnya menggunakan elemen apa saja, tapi di sini Saya mencoba untuk membuatnya seminimalis mungkin:
.parallax-navigation {
display:block;
height:30px;
line-height:30px;
position:relative;
text-align:right;
font-size:11px;
font-weight:bold;
}
.parallax-navigation a {
text-decoration:none;
color:black;
background-color:#eee;
padding:5px 10px;
}
/* set latar dan warna yang berbeda untuk item navigasi yang sedang aktif */
.parallax-navigation a.active {
background-color:#529834;
color:white;
}
Selesai sampai di sini, sekarang kita akan mengerjakan fungsi dasar untuk menggerakkan layer:
Beberapa mungkin akan membuat efek paralaks dengan cara menganimasikan properti left pada elemen relatif untuk menggerakkan elemen ke kiri atau ke kanan. Tapi kekurangannya adalah, mengubah jarak left terlalu jauh akan membuat posisi layer berubah dan pada akhirnya akan menghilang dari pandangan jika jaraknya sudah terlalu jauh. Di sini Saya lebih menyarankan untuk menganimasikan posisi latar dibandingkan posisi layer itu sendiri, sehingga layer tidak akan bergerak, hanya latarnya saja yang bergerak.
Namun jQuery tidak mendukung properti animasi background-position dengan baik, jadi kita membutuhkan sebuah plugin untuk itu. Anda akan menemukan begitu banyak plugin jQuery yang berfungsi untuk menganimasikan posisi latar jika Anda mencarinya, dan Saya memilih untuk menggunakan plugin animasi posisi latar dari Keith Wood. Saya tidak kenal dengan orang itu, tapi pluginnya bagus ⇒ http://keith-wood.name/backgroundPos.html
<!-- Muat jQuery di awal -->
<script src="js/jquery.js"></script>
<!-- Sertakan plugin jQuery BackgroundPos -->
<script src="js/jquery.backgroundpos.min.js"></script>
<script>
// Pekerjaan kita di sini...
</script>
Definisikan beberapa variabel untuk mempermudah kita dalam menyeleksi elemen dan sekaligus juga memperbaiki performa. Seperti biasa:
var $parallax = $('#parallax-wrapper'),
$layer = $parallax.find('.layer'),
$nav = $('#parallax-navigation');
Setelah itu kita kumpulkan semua item navigasi dan layer di dalam paralaks. Kita akan cenderung menggunakan jQuery .each() di sini, karena ini adalah cara yang paling mudah untuk mendapatkan indeks/urutan masing-masing elemen. Kita akan menganimasikan elemen dengan parameter dari indeks elemen (urutan elemen):
$nav.find('a').each(function() {
// Saat pengguna mengeklik item navigasi...
$(this).on("click", function() {
var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
// Kumpulkan layer...
$layer.each(function() {
// Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
});
return false;
});
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan
Setelah itu, buat fungsi untuk menambah dan melepas kelas active pada setiap item navigasi. Dulu Saya sudah pernah menuliskan kodenya di sini
$nav.find('a').each(function() {
// Saat pengguna mengeklik item navigasi...
$(this).on("click", function() {
var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
$nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi
$(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik
// Kumpulkan layer...
$layer.each(function() {
// Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
});
return false;
});
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan
Animasikan posisi latar pada masing-masing layer dengan parameter berupa urutan layer, sehingga jarak perubahan posisi akan berbeda-beda pada masing-masing layer (lebih tepatnya: jarak animasi akan meningkat berdasarkan urutan layer):
$nav.find('a').each(function() {
// Saat pengguna mengeklik item navigasi...
$(this).on("click", function() {
var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
$nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi
$(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik
// Kumpulkan layer...
$layer.each(function() {
// Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
// Animasikan posisi latar
$(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500);
});
return false;
});
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan
Dan beginilah hasil akhir sementara kita. Baru latarnya saja yang dianimasikan, belum ada konten:
Animasi paralaks sudah berhasil dibuat, sekarang tinggal membuat konten paralaks saja. Setiap konten merupakan item yang bisa Anda isi dengan tulisan dan/atau gambar layaknya slideshow:
Fungsi selanjutnya ditujukan untuk mengeset ukuran kontainer item dan lebar item, serta menganimasikan kontainer item menuju ke kiri dengan jarak tertentu berdasarkan indeks item navigasi. Pertama-tama kita atur ukuran lebar .box-item-wrapper dan .box-item:
var $window = $(window),
$wrap = $parallax.find('.box-item-wrapper'),
width, totalWidth; // Variabel kosong
$window.on("resize", function() {
width = $parallax.width(); // Mendapatkan lebar `#parallax-wrapper`
totalWidth = width * $wrap.find('.box-item').length; // Lebar total = lebar `#parallax-wrapper` dikalikan jumlah `.box-item`
// Set lebar `.box-item-wrapper` selebar `totalWidth`
$wrap.width(totalWidth)
// Set lebar `.box-item` selebar `#parallax-wrapper`
.find('.box-item').width(width);
}).trigger("resize");
Saya menuliskan variabel width dan totalWidth kosong, kemudian menyatakan nilainya di dalam $window.on("resize", function() {}) agar lebar elemen bisa diperbaharui setiap kali ukuran layar diubah. Saya juga menyatakan lebar elemen di dalam event tersebut.
Terakhir, gabungkan animasi properti left di dalam event klik item navigasi untuk menganimasikan posisi .box-item-wrapper:
$nav.find('a').each(function() {
// Saat pengguna mengeklik item navigasi...
$(this).on("click", function() {
var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi
$nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi
$(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik
// Kumpulkan layer...
$layer.each(function() {
// Definisikan jarak animasi latar pada setiap layer berdasarkan indeksnya
var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
// Animasikan posisi latar
$(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500);
});
// Animasikan `.box-item-wrapper` ke kiri untuk menggerakkan `.box-item`
$wrap.stop().animate({'left': -(step*width)}, 1500);
return false;
});
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan
(function($) {
// Cache some elements
var $window = $(window),
$parallax = $('#parallax-wrapper'),
$layer = $parallax.find('.layer'),
$wrap = $parallax.find('.box-item-wrapper'),
$nav = $('#parallax-navigation'), width, totalWidth;
// Set the parallax content & item width in window resize ...
// ... so we can be sure that when the window is resized, the size of the elements will be updated too
$window.on("resize", function() {
width = $parallax.width(); // get the parallax wrapper width
totalWidth = width * $wrap.find('.box-item').length; // total width = (parallax wrapper width * box item length)
$wrap.width(totalWidth).find('.box-item').outerWidth(width);
}).trigger("resize");
// Collect all navigation item inside parallax navigation, then get their index to set the animation distance
$nav.find('a').each(function() {
// when user click on the navigation item
$(this).on("click", function() {
var step = $(this).index(); // get the index (0, 1, 2, 3, ...)
$nav.find('.active').removeClass('active'); // remove the active class from navigation item
$(this).addClass('active'); // add the active class to the clicked navigation item
$layer.each(function() {
// set the background-position per-animation distance of each layer ...
// ... based on its index
var distance = ($(this).index()+1) * 200; // multiplied by 200
$(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500); // (jQuery background position plugin required)
});
// also, animate the `.box-item-wrapper` to the left to move the `.box-item`
$wrap.stop().animate({'left': -(step*width)}, 1500);
return false;
});
}).first().addClass('active'); // add active class to the first navigation item on initiation
})(jQuery);
Alat ini digunakan untuk membuat image map palsu menggunakan elemen HTML. Beberapa orang lebih memilih menggunakan yang palsu karena lebih fleksibel. Pada intinya alat ini digunakan untuk mempermudah di dalam merancang ukuran dan posisi lokasi pada tiap bagian di dalam gambar. Mengenai elemen apa yang akan Anda gunakan dan bagaimana Anda memodifikasi tampilannya, itu terserah Anda:
Bagi para pembaca yang belum mengerti apa itu image map, kalian bisa memulai mempelajarinya di sini. Dan berikut ini adalah contoh gambar yang dihasilkan dari alat yang Saya buat di atas. Coba letakkan pointer mouse Anda di atas wajah-wajah atau badan tokoh kartun di bawah ini untuk mengetahui nama mereka:
Cara Menggunakan
Ambillah sebuah foto atau gambar dimana di dalamnya terdapat beberapa bagian yang memerlukan detail khusus. Misalnya foto keluarga atau peta negara, lalu unggah foto atau gambar tersebut pada blog Anda. Ambil URL gambarnya, kemudian letakkan di dalam input URL yang tersedia. Setelah itu klik tombol Create. Klik tombol Add Location untuk menambahkan lokasi/koordinat baru pada gambar. Geser dan ubah ukurannya sesuai keinginan. Kode HTML akan tampil di bagian area teks sebelah kanan.
Modifikasi Widget Posting Populer Menjadi Berwarna-Warni
Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:
/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
Pada peramban WebKit seperti Google Chrome dan Safari, sebuah elemen input bertipe search memiliki kemampuan untuk menampilkan ikon/tombol pembersih kecil di samping input teks jika kita telah mengetikkan sesuatu di dalamnya. Tapi tidak pada peramban yang lain. Terkadang kita merasa butuh dan menyukai fitur itu, dan berharap bisa bekerja pada semua peramban.
Kita bisa menggunakan markup ekstra dan sedikit JavaScript untuk menciptakan rekayasa seperti itu. Tapi untuk memastikan tampilannya polos, gunakan elemen input bertipe text, bukan search:
(function() {
var searchForm = document.getElementById('search-form'),
textInput = searchForm.q,
clearBtn = textInput.nextSibling;
textInput.onkeyup = function() {
// Show the clear button if text input value is not empty
clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
};
// Hide the clear button on click, and reset the input value
clearBtn.onclick = function() {
this.style.visibility = "hidden";
textInput.value = "";
};
})();
Pada tanggal 25 Januari 2016 nanti, Google Codeakan mematikan layanannya, sehingga tutorial ini tidak akan berlaku lagi pada saat itu. Semua widget yang Saya unggah ke Google Code mungkin juga akan hilang. Sebagai alternatif, Anda bisa mengambil data yang Saya simpan di DropBoxdi sini.
Selama ini kita biasa menggunakan Google Code untuk menyimpan maksimal hanya tiga jenis berkas/file saja. Yaitu JavaScript, ZIP dan gambar. Selain itu tidak pernah. Alasannya, saat file selain JavaScript, ZIP dan gambar yang tersimpan di Google Code dibuka maka akan gagal bekerja. Misalnya file CSS atau HTML. Saat dibuka malah hanya muncul sebagai teks biasa dan tidak bisa digunakan sebagaimana file CSS dan HTML pada keadaan normal.
Biasanya kita mengunggah file melalui situs Google Code secara langsung, atau bisa juga melalui aplikasi subversi seperti TortoiseSVN. Kabar baiknya, dengan cara mengatur MIME yang beragam pada aplikasi tersebut, maka itu akan memungkinkan kita untuk mengunggah berbagai file dengan format yang berbeda-beda. Sehingga direktori Google Code tidak lagi berfungsi sebagai ruang penyimpanan file berupa kode saja, tetapi juga bisa kita gunakan untuk menyimpan berbagai macam file seperti halnya situs-situs penyedia layanan hosting file pada umumnya.
Saya masih belum begitu berani untuk mengungkapkan apa itu pengertian MIME. Tapi kalau kamu ingin mencari tahu lebih jauh, kamu bisa membacanya di Wikipedia – MIME
Dengan mendefinisikan properti otomatis pada aplikasi, maka kita bisa mengunggah beberapa file yang bisa dibilang sama sekali tidak ada hubungannya dengan kode seperti PDF, DOC, SWF (Flash), WAV dan lain-lain.
Untuk mengubah masukan berkas Google Code menjadi lebih luas, maka ada dua buah hal yang harus kita lakukan. Pertama adalah menginstal aplikasi TortoiseSVN dan ke dua adalah membuat sebuah halaman proyek baru.
Pekerjaan I: Menginstal TortoiseSVN
Kunjungi situs ini ⇒ http://tortoisesvn.net/downloads.html. Unduh aplikasi tersebut lalu instal. Setelah terinstal, komputer harus di-restart karena aplikasi ini akan terintegrasi dengan menu konteks/menu klik kanan (shell command).
Setelah itu klik kanan pada desktop atau jendela eksplorasi berkas. Pilih menu TortoiseSVN » Settings:
TortoiseSVN » Settings
Akan muncul kotak dialog seperti ini. Klik General dan klik tombol Edit:
Pengaturan TortoiseSVN
Setelah file config terbuka, salin kode ini dan letakkan di bawah komentar # Makefile = svn:eol-style=native
1 Desember 2013: Saya mengomentari beberapa tipe MIME yang biasa digunakan untuk penyalahgunaan akun Google Code, untuk memastikan agar akun kamu cukup aman. Semua data yang kamu simpan di Google Code haruslah digunakan untuk kepentingan kode sumber terbuka yang bisa diakses serta dipelajari oleh siapa saja. Mengompres dan membuat kode menjadi tidak bisa dibaca sangat tidak disarankan jika kamu ingin menggunakan akun Google Code. Kamu bisa mengaktifkannya kembali dengan cara menghapus simbol # sebelum ekstensi jika kamu ingin bisa mengunggah berkas dengan ekstensi tersebut ke Google Code. Tetapi resiko ditanggung sendiri.
Simpan perubahan yang kamu lakukan. Biarkan sampai di sini dulu.
Isi formulirnya, atur pilihan version control system ke Subversion, lalu pilih lisensi yang kamu kehendaki untuk file-file yang diunggah di situ:
Mengisi formulir.
Klik Create Project. Kamu akan dibawa menuju halaman dasbor proyek barumu jika sudah berhasil. Klik tab Source lalu klik tautan googlecode.com password untuk membuat password. Ini digunakan untuk menghubungkan aplikasi dengan proyek Google kamu:
Mengenerasikan password Google Code.
Catat password yang tampil:
Password —dan alamat email— sudah digenerasikan.
Mulai Mengunggah
Buka aplikasi TortoiseSVN dengan cara mengeklik kanan pada desktop atau jendela eksplorasi berkas lalu pilih TortoiseSVN » Repo-browser:
Repo browser.
Akan muncul kotak dialog untuk memasukkan URL proyek:
Memasukkan URL proyek.
Pola URL selalu berbentuk seperti ini:
https://nama_proyek.googlecode.com/svn/trunk/
Yang harus diingat dan yang paling sering membuat gagal dalam pengunggahan file: Saat menuliskan URL proyek di aplikasi, gunakan https, tapi saat ingin melihat hasilnya atau mengakses hasil kerjanya secara online, gunakan http
Klik OK. Tunggu sampai proses memuat selesai.
Buka folder dimana terdapat file yang ingin diunggah. Seret file yang diinginkan ke area daftar file unggahan:
Mengunggah file.
Tunggu beberapa saat, maka kamu akan diminta untuk mengautentikasikan akun Google Code kamu seperti ini:
Autentikasi akun Google Code.
Isi alamat email dan password yang sebelumnya sudah kamu catat. Centang Save authentication agar kita tidak perlu berkali-kali login pada saat pengunggahan file di masa mendatang.
Dengan menggunakan aplikasi subversi, selain bisa mengunggah berbagai file yang tidak biasa, kita juga bisa mengedit file yang sudah kita unggah. Sehingga kita tidak perlu menghapus file lama dan mengunggah file yang baru berulang kali seperti saat menggunakan akun Google Code pada umumnya.
Untuk memeriksa hasil kerja satu per satu secara online, akses pola URL ini:
http://nama_proyek.googlecode.com/svn/trunk/
Kita juga bisa mengedit (hanya mengedit) file melalui situs Google Code secara langsung (jika kita memberikan izin pada pengaturan pengeditan secara online). Kunjungi pola URL ini:
Fungsi ini digunakan untuk memastikan bahwa JavaScript tidak akan mengalami gangguan/error jika salah satu variabel tidak sempat ditentukan. Hal ini biasanya disebabkan karena kelalaian pengguna yang lupa menuliskan variabel yang dibutuhkan, sehingga salah satu variabel yang harus ada untuk mengaktifkan plugin yang dia pakai tidak hadir/hilang; Atau karena developer plugin tersebut telah memperbaharui plugin buatannya dengan menambahkan beberapa variabel baru, sementara para pengguna yang menggunakan plugin melalui hosting dari sumber plugin secara langsung sudah cukup banyak. Developer tidak mungkin memberitahu para pengguna untuk mengeset variabel baru agar plugin mereka bisa bekerja kembali. Itu merepotkan:
function handleVars(options) {
// Set beberapa variabel default/standar di sini:
var defaults = {
"name": "Anonymous",
"age": "Unknown",
"site": "Not available",
"email": "Not available",
"address": "Unknown"
};
// Cek apakah key `options[i]` tidak hadir/tidak ditentukan.
// Jika tidak hadir, gantikan dengan `defaults[i]`
for (var i in defaults) {
options[i] = (typeof options[i] == "undefined") ? defaults[i] : options[i];
}
return options;
}
Anda bisa menentukan/menambah/mengedit beberapa variabel standar/default pada plugin yang Anda buat di dalam objek defaults. Fungsi di atas akan menjaga para pengguna dari gangguan yang disebabkan oleh ketidakhadiran variabel yang diperlukan karena kesalahan atau pembaharuan. Fungsi di atas akan memastikan bahwa: jika variabel tidak hadir, maka variabel tersebut akan digantikan oleh variabel standar yang sudah dituliskan di dalam objek defaults.
Sebagai contoh, variabel pada plugin yang harus ada adalah name, age, site, email dan address. Sedangkan yang kita tuliskan/deklarasikan hanya tiga variabel:
Tidak masalah. Beberapa variabel yang tidak sempat dideklarasikan akan mengikuti variabel standar yang telah kita tentukan di dalam handleVars, sehingga myWidgetConfig akan menghasilkan konfigurasi seperti ini secara tidak langsung:
