Saya tidak tahu apakah cara ini bisa mempercepat kerja animasi atau tidak (Saya malas mengetesnya). Tapi Saya pikir cara ini bisa mempermudah kita di dalam membangun deret animasi berlebih-lebihan tanpa harus mendeklarasikan jQuery .animate() secara berlebihan. Selain itu, dengan cara mempopulasikan properti animasi di dalam array, maka ini memungkinkan kita untuk menciptakan gerak animasi yang berbeda-beda pada elemen yang berbeda dengan cara meletakkan array animasi ke dalam atribut elemen. Misalnya seperti ini:
Setelah itu, cukup gunakan method manipulasi atribut untuk mendapatkan nilai atribut pada masing-masing elemen. Konversi nilainya agar menjadi array (bukan string) dengan eval():
$('div').each(function() {
var anim = eval($(this).data('animation')), // Mengambil nilai atribut `data-animation` dari elemen
$div = $(this);
$.each(anim, function(i) {
$div.animate(anim[i], 1000);
});
});
Fungsi ini digunakan untuk mengubah deret angka menjadi pola mata uang dimana setiap tiga deret angka akan ditambahi sebuah titik atau koma setelahnya/sebelumnya, dimulai dari belakang:
Kode ini memungkinkan kita untuk mengambil node komentar HTML yang kemudian bisa kita gunakan sebagai elemen HTML biasa. Sehingga jika komentar HTML adalah berupa elemen HTML yang mengandung permintaan HTTP, maka kita bisa memuat elemen tersebut secara tidak langsung dengan cara menuliskannya sebagai komentar HTML terlebih dahulu:
#fake-elem-container adalah elemen yang akan dijadikan sebagai penampung komentar HTML, sedangkan #container akan menjadi penampung node komentar yang sudah berubah menjadi elemen HTML:
Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada
<b:if cond='data:post.allowComments'> adalah kondisional template yang berfungsi untuk menyatakan bahwa pemilik blog mengizinkan pengunjung untuk menuliskan komentar. Anda biasanya akan melihat kode ini membungkus semua elemen di dalam seksi komentar sehingga jika administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung lain menuliskan komentar baru melalui panel pengaturan utama (bukan opsi pada pengaturan posting), maka seluruh komentar yang telah masuk akan ikut menghilang (disembunyikan):
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<!--
Seluruh konten di bagian ini akan menghilang jika
Administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung
menuliskan komentar baru.
-->
</b:if>
</div>
Biasanya hal ini akan merugikan blog-blog bertipe diskusi yang ramai pengunjung, terutama jika komentar-komentar yang diterbitkan berguna untuk pembaca lain sebagai referensi tambahan.
Suatu saat mungkin Anda akan mengalami masa-masa sibuk atau katakanlah “sedang tidak mampu untuk membalas komentar-komentar yang masuk”. Saat Anda mengalami itu biasanya hal yang akan Anda lakukan adalah menutup komentar posting secara temporer dengan cara menyembunyikannya seperti ini:
Menonaktifkan sekaligus menyembunyikan komentar pada semua posting.
Untuk menjaga agar komentar-komentar lama tidak hilang, Anda bisa memindahkan/memperbaharui wilayah kondisional <b:if cond='data:post.allowComments'> menjadi lebih sempit. Cukup hilangkan formulir komentarnya saja dan biarkan komentar-komentar yang sudah ada tetap pada tempatnya. Caranya adalah hapus kode <b:if cond='data:post.allowComments'> ... </b:if> yang mengelilingi elemen <div class='comments' id='comment'> sehingga akan tersisa seperti ini:
Masing-masing kode biasanya akan ditemukan dua buah, termasuk juga untuk seksi komentarnya. Dimana salah satu adalah elemen komentar yang akan aktif pada blog versi biasa dan satunya lagi aktif pada blog tampilan seluler.
Alat ini digunakan untuk menggenerasikan kode-kode karakter spesial HTML yang bisa Anda gunakan untuk menghiasi tulisan atau untuk keperluan-keperluan lain seperti penambahan ikon pada menu tanpa gambar dan sebagainya. Cukup tentukan angka awal dan banyak karakter yang akan ditampilkan kemudian tekan tombol Show the Code List untuk menampilkan deret karakter beserta kodenya.
Anda juga bisa menggenerasikan kueri URL berdasarkan deretan simbol yang ditampilkan. URL ini bisa Anda gunakan sebagai URL berbagi atau URL bookmark untuk karakter-karakter favorit Anda:
Saya hanya akan menjelaskan konsep ini secara cepat dan nyaris nonverbal, jadi perhatikan dan jangan lupa untuk membaca komentar-komentar di dalam kode CSS dan HTML yang Saya tuliskan. Pada dasarnya kita hanya akan membuat menu biasa, yang kemudian kita lengkapi dengan ikon sebagai tombol penampil menu. Secara normal, ikon tersebut akan disembunyikan dan menu navigasi akan ditampilkan pada perangkat desktop/device berukuran besar, sampai ketika kita berada pada perangkat yang lebih kecil, maka CSS akan melakukan hal sebaliknya, yaitu akan menyembunyikan menu dan menampilkan ikon/navicon.
Kita membutuhkan enam buah elemen HTML yaitu <nav>, <ul>, <li>, <input type="checkbox">, <label> dan <a>
Tag HTML
Keperluan
<nav>, <ul>, <li>
Semantik. Semua navigasi standar dibangun dengan elemen ini
<a>
Setiap navigasi juga memiliki tautan-tautan yang berfungsi untuk mengarahkan pengunjung menuju sebuah tempat tertentu saat tautan-tautan tersebut diklik
<input type="checkbox">
Elemen ini digunakan untuk menampilkan dan menyembunyikan menu pada tampilan mobile. Dengan CSS3 :checked, kita bisa membuat efek toggle menggunakan elemen checkbox (baca di sini)
<label>
Elemen ini digunakan untuk keperluan visual saja. Lebih tepatnya, elemen ini akan menjadi ikon yang akan tampak sebagai tombol, padahal tombol menu yang sebenarnya adalah elemen checkbox yang disembunyikan dengan opacity:0.
Pertama-tama kita set dasar dimensi menu dengan mengatur tampilan elemen <nav> meliputi tipe font, warna latar dan huruf:
/* navigasi: tentukan font, warna huruf dan latar */
nav {
font:normal bold 11px Arial,Sans-Serif;
color:gray;
background-color:black;
height:30px;
}
Kemudian set layout daftar menu menjadi horizontal. Hapus margin, padding dan bullet bawaan dari User Agent Style Sheet:
/* daftar menu: hilangkan margin, padding dan bullet */
nav ul,
nav li {
margin:0 0;
padding:0 0;
list-style:none;
}
/* set tinggi menu */
nav ul {height:30px}
/* set layout menu menjadi berjajar/horizontal */
nav li {
float:left;
display:inline;
}
Ubah semua tautan di dalam navigasi menjadi elemen blok agar lebih mudah dalam pengaturan tinggi, padding dan hal-hal lain yang kebanyakan bisa dilakukan oleh elemen blok:
/* tautan */
nav a {
display:block;
line-height:30px;
padding:0 14px;
text-decoration:none;
color:white;
}
Ganti juga warna item menu jika pointer mouse berada di atasnya:
/* sikap hover item menu */
nav a:hover {background-color:#39f}
Ikon Menu (Navicon)
Bentuknya seperti ini: `≡`. Simbol disamping Saya buat dengan entitas HTML ≡. Kita akan meletakkan simbol itu di dalam elemen <label> seperti ini:
<label>≡</label>
Sebenarnya ada beberapa bentuk lain yang biasa dijadikan sebagai simbol untuk menyatakan menu (baca di sini), tapi bentuk yang paling mudah dibuat dan yang paling umum digunakan adalah bentuk yang Saya tuliskan di atas.
Kali ini kita akan mengerjakan CSS elemen checkbox dan label. Secara normal tampilannya akan disembunyikan:
nav input {display:none}
nav label {display:none}
Kemudian set beberapa pengaturan. Sembunyikan wujud elemen checkbox dengan mendeklarasikan opacity:0, dan atur dimensinya dengan tinggi dan lebar yang (disarankan) sama dengan tinggi menu:
/* checkbox: sebagai tombol menu pada tampian mobile */
nav input {
display:none;
margin:0 0;
padding:0 0;
width:30px;
height:30px;
opacity:0; /* sembunyikan wujud */
cursor:pointer;
}
/* elemen label: sebagai ikon */
nav label {
display:none;
font-size:200%;
width:30px;
height:30px;
/* teks berada di tengah secara vertikal dan horizontal */
line-height:30px;
text-align:center;
}
Media Queries
Hanya membutuhkan satu media query untuk menyatakan bahwa kita sedang berada pada perangkat mobile. Misalnya berada pada ukuran layar maksimal 767px
@media (max-width:767px) {
...
}
Saat kita berada pada ukuran layar maksimal 767 piksel, set tampilan menu sebagai menu vertikal. Tampilkan ikon dan sembunyikan semua menu:
@media (max-width:767px) {
nav {
/* kita akan mengeset posisi menu dan ikon sebagai elemen absolut terhadap navigasi, jadi kita memerlukan deklarasi ini */
position:relative;
}
nav ul {
background-color:#200;
position:absolute;
top:100%;
right:0;
left:0;
height:auto;
display:none; /* sembunyikan menu */
}
/* set tampilan menu agar bersusun secara vertikal */
nav li {
display:block;
float:none;
width:auto;
}
nav input,
nav label {
position:absolute;
top:0;
right:0;
display:block; /* tampilkan elemen checkbox dan label */
}
nav input {z-index:4} /* selalu pastikan bahwa checkbox berada di atas label */
}
Kemudian buat efek toggle dengan CSS :checked. Ubah warna ikon saat tombol menu diklik, dan tampilkan menu yang tersembunyi:
@media (max-width:767px) {
...
...
/* ubah warna ikon saat tombol menu diklik, dan tampilkan menu yang tersembunyi saat checkbox dicek */
nav input:checked + label {color:white}
nav input:checked ~ ul {display:block}
}
/* horizontal navigation: define the navigation font and basic background */
nav {
background-color:black;
font:normal bold 11px Arial,Sans-Serif;
color:gray;
height:30px;
}
/* lists: remove the nested list margin, padding & bullets */
nav ul,
nav li {
margin:0 0;
padding:0 0;
list-style:none;
}
/* navigation height */
nav ul {height:30px}
/* inline layout menu */
nav li {
float:left;
display:inline;
}
/* the anchor */
nav a {
display:block;
line-height:30px;
padding:0 14px;
text-decoration:none;
color:white;
}
/* hover state menu */
nav a:hover {background-color:#39f}
/* checkbox element: for mobile navigation button */
nav input {
display:none;
margin:0 0;
padding:0 0;
width:30px;
height:30px;
opacity:0;
cursor:pointer;
}
/* for visual purpose */
nav label {
display:none;
font-size:200%;
width:30px;
height:30px;
/* center vertically and horizontally */
line-height:30px;
text-align:center;
}
/* MOBILE NAVIGATION */
@media (max-width:767px) {
nav {
/* we want to absolute positioning the menu, checkbox and label element to its parent, so this is needed */
position:relative;
}
nav ul {
background-color:#200;
position:absolute;
top:100%;
right:0;
left:0;
height:auto;
display:none; /* hide the menu */
}
/* set the menu as a block list item */
nav li {
display:block;
float:none;
width:auto;
}
/* now show the checkbox and label element in mobile device */
nav input,
nav label {
position:absolute;
top:0;
right:0;
display:block; /* show the menu icon */
}
nav input {z-index:4} /* always place the checkbox above the label element */
/* highlight the label element and show the menu if the checkbox is checked */
nav input:checked + label {color:white}
nav input:checked ~ ul {display:block}
}
Untuk indentasi karakter yang akurat, kode hendaknya dituliskan di dalam elemen <pre> atau elemen blok apapun yang dikenai deklarasi white-space:pre dan bertipe font Monospace:
<!-- Dengan tag `PRE` -->
<pre>
Teks dan unikode di sini ...
</pre>
<!-- Dengan tag HTML biasa -->
<div style="white-space:pre;word-wrap:break-word;font-family:Monospace;">
Teks dan unikode di sini ...
</div>
Demo
A
├─── AA
│ └─── AAA
├─── AB
│ ├─── ABA
│ ├─── ABB
│ └─── ABC
└─── AC
A
├─── AA
│ └─── AAA
├─── AB
│ ├─── ABA
│ ├─── ABB
│ └─── ABC
└─── AC
Ini adalah plugin jQuery yang Saya buat berdasarkan konsep selectbox kustom yang pernah Saya temukan dan Saya catat di sini. Fungsinya adalah untuk mengubah tampilan selectbox biasa menjadi selectbox yang mudah dimodifikasi tampilannya. Saya suka dengan metodenya yang sangat sederhana untuk mengubah tampilan selectbox asli tanpa harus menghilangkan elemen aslinya dan hanya membungkusnya dengan elemen baru, sehingga kita bisa menyesuaikan dimensi selectbox palsu berdasarkan dimensi selectbox yang asli tanpa menggunakan perhitungan JavaScript yang rumit. Di sini Saya hanya memanfaatkan dimensi selectbox asli untuk mengubah ukuran lebar elemen inline-block:
Letakkan CSS sebelum jQuery dan plugin setelah jQuery, kemudian aktifkan .customSelectBox() pada elemen <select> yang dikehendaki. Setelah itu Anda bisa menjalankan perintah-perintah lain yang diperlukan terhadap elemen selectbox asli melalui event .change():
<link href="css/jquery.select.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.select.min.js"></script>
<script>
$(document).ready(function() {
$('select').customSelectBox().change(function() {
// Lakukan sesuatu di sini seperti halnya saat kita melakukan sesuatu ...
// ... dengan event `change` jQuery pada elemen selectbox
var val = this.value;
alert(val);
});
});
</script>
Itu saja.
Konfigurasi Lanjutan
Konfigurasi lanjutan ini hanya berputar di sekitar modifikasi kelas. Tidak ada efek-efek khusus tambahan pada plugin ini:
