Membuat jQuery Plugin: Fancy String - Bagian 2
Ridwan Fajar 23 Januari 2016
Pendahuluan
Anda sudah dapat melihat bagaimana membuat jQuery plugin di artikel "Membuat jQuery Plugin: Fancy String - Bagian 1". Untuk itu akan kita lanjutkan dengan membuat beberapa fitur lainya seperti:- mengubah semua huruf pada kata menjadi huruf kecil (toUpperCase)
- mengubah semua huruf pada kata menjadi huruf besar (toLowerCase)
- mengubah huruf terakhir menjadi huruf besar (uppercaseLastLetter)
- mengubah huruf menjadi besar kecil (zigzag)
- menukar huruf kapital menjadi huruf kecil dan sebaliknya (swapcase)
- mengubah kata menjadi kata alay (simpleAlay)
- mengubah kata menjadi kata djadoel atau Indonesia tempo dulu. (djadoel)
Mengubah Function Fancy String
Sekarang kita mulai dengan mengubah pilihan pada switch yang terdapat di dalam function fancy_string()--- kode jquery.fancy-string.js 1 ---
(function($){
$.fn.fancy_string = function(settings)
{
console.log('memanggil fancy string...');
var opts = {
mode : "",
};
var opts = $.extend(opts, settings);
var raw_text = $(this).html();
var result_text = raw_text;
switch (opts.mode){
case "uppercase":
result_text = raw_text.toUpperCase();
break;
case "lowercase":
result_text = raw_text.toLowerCase();
break;
case "title":
raw_text = result_text = raw_text.toLowerCase();
result_text = title(raw_text);
break;
case "uppercase_last_letter":
result_text = uppercaseLastLetter(raw_text);
break;
case "zigzag":
result_text = zigzag(raw_text);
break;
case "swapcase":
result_text = swapcase(raw_text);
break;
case "simple_alay":
result_text = simpleAlay(raw_text);
break;
case "djadoel":
result_text = djadoel(raw_text);
break;
default:
result_text = raw_text;
break;
}
$(this).html(result_text);
};
// kode lain akan ditulis dibawah
})(jQuery);
Untuk fitur toUpperCase dan toLowerCase, tidak diperlukan function tersendiri karena sudah terdapat built-in function Javascript yang sudah menangani masalah tersebut. Kita langsung saja membuat function uppercaseLastLetter
--- kode jquery.fancy-string.js 2 ---
(function($){
// ada kode sebelumnya silahkan scroll keatas
function title(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = word.replace(word.charAt(0), word.charAt(0).toUpperCase());
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
function uppercaseLastLetter(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var last_index = word.length-1;
var temp_word = word.replace(word.charAt(last_index), word.charAt(last_index).toUpperCase());
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
// kode selanjutnya akan ditulis setelah komentar ini
})(jQuery);
Pada fitur zigzag kita akan menggunakan operasi modulus untuk mengetahui huruf pada posisi genap dan ganjil. Huruf pada indeks genap sebuah kata akan diubah menjadi huruf kecil, sebaliknya akan diubah ke huruf kapital.
--- kode jquery.fancy-string.js 3 ---
(function($){
// ada kode sebelumnya silahkan scroll keatas
function uppercaseLastLetter(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var last_index = word.length-1;
var temp_word = word.replace(word.charAt(last_index), word.charAt(last_index).toUpperCase());
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
function zigzag(raw_text)
{
console.log('zigzag....')
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = "";
for (var i = 0; i < word.length; i++)
{
if (i % 2 == 1)
{
temp_word += word[i].toLowerCase();
}
else
{
temp_word += word[i].toUpperCase();
}
}
console.log(temp_word);
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
// kode selanjutnya akan ditulis setelah komentar ini
})(jQuery);
Pada fitur swapcase kita akan memeriksa apakah sebuah huruf adalah huruf kapital atau bukan. Jika asalnya kapital akan diubah ke huruf kecil. Begitupun sebaliknya
--- kode jquery.fancy-string.js 4 ---
(function($){
// ada kode sebelumnya silahkan scroll keatas
function zigzag(raw_text)
{
console.log('zigzag....')
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = "";
for (var i = 0; i < word.length; i++)
{
if (i % 2 == 1)
{
temp_word += word[i].toLowerCase();
}
else
{
temp_word += word[i].toUpperCase();
}
}
console.log(temp_word);
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
function swapcase(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = "";
for (var i = 0; i < word.length; i++)
{
if (word[i] == word[i].toUpperCase())
{
temp_word += word[i].toLowerCase();
}
else
{
temp_word += word[i].toUpperCase();
}
}
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
// kode selanjutnya akan ditulis setelah komentar ini
})(jQuery);
Pada fitur simpleAlay kita akan mengubah huruf 'a' menjadi '4', 'i' menjadi '1', 'e' menjadi '3', dan 'o' menjadi '0'
--- kode jquery.fancy-string.js 5 ---
(function($){
// ada kode sebelumnya silahkan scroll keatas
function swapcase(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = "";
for (var i = 0; i < word.length; i++)
{
if (word[i] == word[i].toUpperCase())
{
temp_word += word[i].toLowerCase();
}
else
{
temp_word += word[i].toUpperCase();
}
}
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
function simpleAlay(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = "";
for (var i = 0; i < word.length; i++)
{
if (word[i].toLowerCase() == 'a')
{
temp_word += '4';
}
else if (word[i].toLowerCase() == 'i')
{
temp_word += '1';
}
else if (word[i].toLowerCase() == 'e')
{
temp_word += '3';
}
else if (word[i].toLowerCase() == 'o')
{
temp_word += '0';
}
else {
temp_word += word[i];
}
}
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
// kode selanjutnya akan ditulis setelah komentar ini
})(jQuery);
Pada fitur djadoel kita akan mengubah huruf 'u' menjadi 'oe', 'j' menjadi 'dj', 'y' menjadi 'j', dan 'c' menjadi 'tj'
--- kode jquery.fancy-string.js 6 ---
(function($){
// ada kode sebelumnya silahkan scroll keatas
function simpleAlay(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = "";
for (var i = 0; i < word.length; i++)
{
if (word[i].toLowerCase() == 'a')
{
temp_word += '4';
}
else if (word[i].toLowerCase() == 'i')
{
temp_word += '1';
}
else if (word[i].toLowerCase() == 'e')
{
temp_word += '3';
}
else if (word[i].toLowerCase() == 'o')
{
temp_word += '0';
}
else {
temp_word += word[i];
}
}
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
function djadoel(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = "";
for (var i = 0; i < word.length; i++)
{
if (word[i].toLowerCase() == 'u')
{
temp_word += 'oe';
}
else if (word[i].toLowerCase() == 'j')
{
temp_word += 'dj';
}
else if (word[i].toLowerCase() == 'y')
{
temp_word += 'j';
}
else if (word[i].toLowerCase() == 'c')
{
temp_word += 'tj';
}
else {
temp_word += word[i];
}
}
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
})(jQuery);
Contoh Pemakaian
Pemakaian fitur yang telah dibangun diatas hampir sama pada tutorial sebelumnya. Anda tinggal melewatkan mode yang diinginkan.<!DOCTYPE html>
<html>
<head>
<title>Membuat Plugin jQuery</title>
</head>
<body>
<div style="margin:0 auto; padding:50px">
<p class="fancy-string-1">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
<p class="fancy-string-2">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
<p class="fancy-string-3">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
<p class="fancy-string-4">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
<p class="fancy-string-5">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
<p class="fancy-string-6">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
<p class="fancy-string-7">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
<p class="fancy-string-8">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
</div>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.fancy-string.js"></script>
<script type="text/javascript">
$('p.fancy-string-1').fancy_string({'mode':'uppercase'});
$('p.fancy-string-2').fancy_string({'mode':'lowercase'});
$('p.fancy-string-3').fancy_string({'mode':'title'});
$('p.fancy-string-4').fancy_string({'mode':'uppercase_last_letter'});
$('p.fancy-string-5').fancy_string({'mode':'zigzag'});
$('p.fancy-string-6').fancy_string({'mode':'swapcase'});
$('p.fancy-string-7').fancy_string({'mode':'simple_alay'});
$('p.fancy-string-8').fancy_string({'mode':'djadoel'});
</script>
</body>
</html>
hasil penggunaan fancy string[/caption]
Penutup
Setelah Anda memahami cara membuat jQuery plugin Anda dapat menambahkan berbagai fitur tambahan untuk menambah keragaman fitur dari jQuery plugin yang Anda kembangkan. Semoga semakin banyak pembuat jQuery plugin dari Indonesia.Source Code Lengkap
Referensi
- Learning jQuery
- jQuery API Documentation
- W3Schools - jQuery
- TutorialsPoint - jQuery