Check all checkbox dengan jquery24 October 2012, 06:26 WIB | Dibaca 717 kaliMelanjutkan artikel sebelumnyaChecked on table cell dengan jquerykali ini kita akan membuat agar checkbox dapat tercentang seluruhnya dengan sekali klik, inti teknik yang akan kita buat hampir sama dengan teknik - teknik yang lain cuman ada sedikit perbaikan agar kode yang akan kita buat sedikit lebih pendek. Gunanya apa sih check all itu? sebenarnya banyak, kalo kalian menggunakanGridtable check all akan sangat membantu kalian, untuk menghapus bagian yang tercentang.OK kita buat 1 file html

Check all Nama Email Alamat Nama saya1 Email.saya@yahoo.com - Nama saya2 Email.saya2@yahoo.com - Nama saya3 Email.saya3@yahoo.com -

file diatas kita sedikit miripkan dengangrid tablekalian dapat modifikasi sesuai dengan keinginan kalian, tentu file diatas masih belum dapat melakukan checkall karena kita belum memberikan Event untuk checkall. Jika kalian lebih teliti tedapat source scriptjavascriptyang mengarah ke google, yup benarjquerysaya ambil langsung dari google dimana kalian harus terkoneksi internet agar dapat menjalankan event checkall atau kalian dapat mendownloadjqueryscript secara manual.ok sekarang kita tambahkan event checkall

$(function(){ $("#checkall").'click(function(){ // var status=this.checked; $(":checkbox").each(function(){ this.checked = status; }); });});

cukup simple bukan codenya... hanya beberapa baris saja, inputkan script diatas dibawahjqueryframework atau masih didalam tag head.OK segitu dulu semoga bermanfaat.Simple Javascript Autocomplete20 August 2013, 12:19 WIB | Dibaca 96 kaliTidak seperti plugin autocomplete kebanyakan, Simple Javascript Autocomplete ditulis dengan bahasa javascript model lama alias Native Javascript. Mengapa tidak menggunakan Framework Javascript seperti jQuery, Mootools, Prototype dll? karena pemikiran saya waktu itu ingin membuat suatu library yang tidak bergantung pada library lain maka muncul ide ini ini untuk dibuat.Cara penerapannya pun cukup mudah kok, tidak rumit. Karena ini library sederhana kalian tidak akan menemui fitur - fitur tambahan pada library ini kecuali hanya penerapannya pada kode program kalian. Karena library ini masih tahap development kalian harus sedikit menyesuaikan CSS dengan design website kalian, berikut cara menggunakan library ini1. Buat 1 file bernama index.htmlisi seperti berikut :

#suggestSearch{position: relative;} .suggestList{width:150px;z-index:1;border:1px solid #000000; overflow:auto; height:100px; background-color:#FFFFFF; } .suggestData{padding:2px;cursor:pointer;} .suggestData:hover{background-color:#000;} .suggestData:nth-of-type(odd){background-color:#FFFFFF;} .suggestData:nth-of-type(even){background-color:#F5F5F5;} .mouseOver{background-color: #999!important;} // input juga nama file librarynya

Simple AJAX Autocomplete: Nama : // untuk menampung data ajax

2. Sisipkan script autocomplete sebelum Tag var option = { textID : "nama"// nama id text field ,targetID: "layer1"// nama id untuk ditampilkan ajax ,url : "search_data.php"// file ajax yang akan dipanggil ,queryStr: "search"// nama query string ,minLength : 2// minimal karakter akan menampilkan data }; isoweb.autocomplete(option, function(item){ alert(item['label']);// menampilkan data ajax });

3. Kalian buat 1 file bernama search_data.php isi seperit berikut

Mudah bukan cara penerapannya, saya belum coba bila library ini digabungkan dengan framework lain kalian bisa mencobanya dan report saya bila terjadi error.Callback data dari ajax (item) disesuaikan dengan yang ada pada hasil result Json. penerapan json diatas tidak saya sertakan dengan koneksi database saya anggap kalian pintar bila masih bingung untuk ajax kalian dapat ubek - ubek artikel di website ini.Checked on table cell dengan jquery15 October 2012, 07:14 WIB | Dibaca 628 kaliArtikel ini saya buat untuk menjawab pertanyaan dari seorang teman dimana beliau kesulitan untuk melakukan checked pada tiap - tiap cell table, sebenarnya ini sangat simple dan mudah kalo menggunakan frameworkjquery. Teknik ini hampir sama seperti Check All hanya saja bila check all kalian harus melakukan loop pada tiap - tiap row table, tapi padascriptini kalian cukup melakukan cek kondisi bila telah terchecked atau tidak.OK langsung saja kita liat susunan code nyabuat dahulu filehtmlnya seperti berikut :

Table rows table{border: 1px solid} table tr{cursor:pointer;} Nama Email Status Tgl. entry langga qu4ck@iso.web.id Active 15-10-2012 rudi rudi@yahoo.com Active 15-10-2012 selly selly@yahoo.com Active 15-10-2012

Setelah kalian membuat code html diatas simpan dengan nama table.html, saya tidak menjelaskan code diatas karena basic dari code html kalian dapat mempelajari codehtmllebih lanjut padaw3schools.kita lanjutkan padajavascript, sisipkan code dibawah pada tag Head

$(function(){ $("tbody tr:even").css("background-color","#CCCCCC"); //zebra stripe table $("tbody tr:odd").css("background-color","#FFFFFF"); $("tbody tr").click(function(){ var check = $(this).find("input:checkbox").attr("checked");// apakah target telah terchecked

if (check == true){// even untuk cek target checkbox $(this).find("input:checkbox").removeAttr("checked");//check bila belum terchcked }else { $(this).find("input:checkbox").attr("checked", "checked");// uncheck bila telah terchecked } }); });

Cukup mudah bukan, dan sangat simple untuk melakukan check pada tiap - tiap row table.code lengkapnya

Table rows table{border: 1px solid} table tr{cursor:pointer;} $(function(){ $("tbody tr:even").css("background-color","#CCCCCC"); $("tbody tr:odd").css("background-color","#FFFFFF"); $("tbody tr").click(function(){ var check = $(this).find("input:checkbox").attr("checked");

if (check == true){ $(this).find("input:checkbox").removeAttr("checked"); }else { $(this).find("input:checkbox").attr("checked", "checked"); } }); }); Nama Email Status Tgl. entry langga qu4ck@iso.web.id Active 15-10-2012 rudi rudi@yahoo.com Active 15-10-2012 selly selly@yahoo.com Active 15-10-2012

Semoga bermanfaat.Simple jquery Tabs15 December 2012, 10:54 WIB | Dibaca 539 kaliMembuat sebuah website diperlukan kesabaran dalam hal mendesign tampilan Awal (Front end) agar pengunjung tidak merasan bosan dan akan kembali lagi keesokan harinya, untuk mempercantik website yang telah kalian buat biasanya tidak lepas dari peran javascript agar website telihat lebih professional. Salah satu Component yang biasanya digunakan pada sebuah website untuk membuat halaman group dengan memanfaatkanTabsdengan Tabs website akan telihat lebih Indah dengan Tabs juga dapat menghemat sebuah halaman.Tabs banyak digunakan untuk menggroupkan sebuah data yang begitu banyak dan ingin di tampilkan pada satu halaman yang sama, dengan ini Tabs akan sedikit menggunakan ruang pada website kita. Pada artikel kali ini kita akan membuat Tabs yang simple namun tetap menampilkan sisi keindahan, Tabs yang akan kita bangun disini tetap akan memanfaatkanjquerysebagai framework javascript.PluginTabs yang kita buat masih sederhana akan tetapi sudah cukup untuk memenuhi kebutuhan, plugin ini jangan di bandingkan denganjqueryUIyang sudah mendukung ajax dalam pengambilan tiap halaman (mudah2an kedepannya akan dapat melakukan hal tersebut).1. Buat halaman seperti dibawah ini beri nama index.html

Isoweb jquery Tabs // file css // menggunakan jquery versi Online // Plugin isoweb Tabs $(function(){ $.isoTabs({// cara menggunakan plugin Isoweb Tabs click : "#tabs-nav a" ,list : "#list-tabs" ,show : "#tabs1" });Atau dengan cara $.isoTabs();// Simple sekali bukan cukup menuliskan 1 baris javascript });

Populer

Terkini

Komentar

Tags

www.iso.web.id

http://www.wolusiji.com

List 1

List 2

tabs2 tabs3 Surabaya Jatim vaksin

2. Kemudian buat filecssseperti dibawahul.tabs-nav{margin:0 0 0 5px;padding:0;height:28px;}ul.tabs-nav li{float:left;padding:0;margin:0;list-style-type:none;}ul.tabs-nav a{float:left;font-size:13px;font-weight:bold;display:block;padding:5px 15px;text-decoration:none;border-bottom:0px;border-right:1px solid #ECEDE8;height:18px;color:#333;outline:0;background:url(../image/bg-title.jpg) repeat-x;}ul.tabs-nav a:hover{background-color:#FCD2D2;color:#7a0303;}ul.tabs-nav a.active{background:#FFF;border-bottom:1px solid #FFF;border-right:1px solid #ECEDE8;color:#7a0303;cursor:default;}.css-panes div{display:none;border:1px solid #666;border-width:0 1px 1px 1px;min-height:150px;padding:15px 20px;background-color:#ddd;font-weight:bold;}.list-tabs{border-top:1px solid #D8D8D8;padding:0 8px;background-color: #FFF;}.list-tabs ul{margin:0;padding:0!important;}.list-tabs li{list-style:none;background: url(../image/icon-bullet.gif) no-repeat left center;padding:0 0 0 15px;}.list-tabs a{color:#2D4D89;text-decoration:none;font-size:12px;}.list-tabs a:hover{color:#BB0000;}CSS hanya digunakan untuk mempercantik tampilanTabsyang kita buat.3. kita buat Plugin sederhana untuk menangani event pada saat klik pada header Tabs buat dengan nama isoweb.tabs.js/** Date : 14-12-2012* Author : Airlangga bayu seto* Email :qu4ck@iso.web.id* Website : http://www.iso.web.id*/(function($){ $.isoTabs = function(option){ var opsi = $.extend({// extend nama variabel yang dikirim click : "#tabs-nav a"// default Key click bila dikosongi ,list : "#list-tabs"// default key List bila dikosongi ,show : "#tabs1"// default key show bila dikosongi }, option); var list = opsi.list.substr(1)// deklarasi variabel list dan kurangi 1 karaker dari depan var click = opsi.click.substr(1)// deklarasi variabel click dan kurangi 1 karaker dari depan $(opsi.click).click(function(){// ketika ada event klik pada header Tabs var hr = $(this).attr("href");// ambil value dari attribute href $("#"+click).removeClass("active");// hapus class active pada semua header Tabs $("#"+ list+" div").hide();// hidden semua content Tabs $("#"+list+" "+hr).show();// Tambilkan Content sesuai object yang di klik $(this).addClass("active");// sisipkan class active pada header Tabs return false; }); $("#list-tabs div").hide();// hidden semua content Tabs $(opsi.show).show();// Tampilkan content saat pemanggilan plugin $("#tabs-nav a[href="+opsi.show+"]").addClass("active");// sisipkan class active default header Tabs }})(jQuery);Penggunaan pun sangat mudah, tidak ribet.Apa kegunaan Json Key Click, List dan Show saat pemanggilan plugin isowebTabsClickMaksudnya disini Key yang digunakan sebagai tolak ukur Klik untuk menjalankan suatu eventListMaksudnya pendeklarasian Content yang akan ditampilkanShowAdalah Content yang pertama kali ditampilkan secara default, Misalkan kalian ingin menampilkan Tab ke 2 secara otomatis plugin akan menampilkan Tab bagian ke 2 decara default.Bila kalian menggunakan Tabs diatas tanpa merubah susunan kode HTML kalian cukup memanggil dengan$.isoTabs();sudah cukup mewakili karena secara default sudah dideklarasikan.Mengapa Tabs ini dibuat? kan sudah banyak Tabs2 yang lain, memang banyak sekali plugin2 tabs bila kalian search google, Tapi Plugin ini saya buat khusus untuk sobat isoweb untuk mempermudah pengcodean.Kedepannya isoweb akan mempunyai Archive sendiri untuk masalah pencodean, agar sobat semua dapat membantu sobat isoweb daam hal pengcodean.Simple jquery Ajax CURD12 May 2012, 01:32 WIB | Dibaca 1261 kaliKalian yang sudah lama berkecimpung dalam dunia programing akan sangat Familiar dengan CURD atau singkatan dariCreateUpdateReadDelete, ya teknik ini sangat membantu sekali dalam mempercepat loading page karena tidak perlu refresh halaman. Pada artikel ini kita akan membuat Ajax CURD dengan memanfaatkan Framework jquery, CURD yang akan kita buat akan dibuat sedikit berbeda untuk menghemat bandwith yang keluar paling tidak.Ok langsung saja kita coba buat :1. Buat database terlebih dahulu (saya menggunakan sqlite pada artikel ini)CREATE TABLE "tb_member" ( "MB_ID" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL , "MB_NAME" VARCHAR(75) NOT NULL , "MB_EMAIL" VARCHAR(100) NOT NULL , "MB_SEX" CHAR(1) NOT NULL DEFAULT 1, "MB_ADDRESS" VARCHAR(120))2. Buat file dengan nama index.html untuk load awal ajax curd yang akan kita buat Grid CURD // jquery framework //javascript yang kita buat Tambah // Form input data Name : Email : Gender : Man Women Address : // Grid data

3. Buat folder baru beri namaassetdan buat juga file style.css didalam folder tersebutbody{font:normal 12px Arial, Helvetica, Sans serif;}.grid{width:600px;background-color:#CCC;font-size:12px;}.tleft{text-align:left;}.tright{text-align:right;}.tcenter{text-align:center;}.todd{background-color:#FFF;}.todd td, .tevent td{padding:2px;}.tevent{background-color:#F5F5F5;}

/* Form */.frm_input{display:none;}.tb_form{width:600px;background-color:#F5F5F5;font-size:12px;padding:5px;}.tb_form .text_input{width:300px;}.tb_form .textarea{width:300px;height:40px;}

/* Global */.w150{width:150px;}.w200{width:200px;}.w60{width:60px;}4. Masih didalam folder asset buat file ajaxcurd.js/**** Website: www.iso.web.id* Author : Airlangga bayu seto* Email :qu4ck@iso.web.id** */

function list_data(){// fungsi yg pertama kali di panggil saat halaman diakases $.ajax({ url : "proses.php"// proses data ,type : "get" ,dataType : "json" ,success : function(data){ if(data.list.length > 0){ var kelas; var kelamin;

var rows = "\// Header grid data Name \ Email \ Gender \ Address \ \ "; $.each(data.list, function(k,v){// Loop sebagai data dari json kelas = (v.ID % 2)?"tevent":"todd";// class untuk merubah warna baris grid kelamin = (v.GENDER == "1")?"laki - laki":"Perempuan";// event untuk menentukan jenis kelamin rows +=" \// data yang akan di tampilkan "+ v.NAME +" \ "+ v.EMAIL +" \ "+ kelamin +" \ "+ v.ADDRESS +" \ edit del \ "; });

$("#tb_grid").html(rows);// tampilkan data }else{ alert("No data Fount.");// bila data tidak ditemukan } } ,error : function(){ alert("Error load ajax page.");//bila error memuat proses data } });}function clearData(){// fungsi untuk mengosongkan field $("input[type=text]").val(""); $("textarea").val("");}function showForm(){// fungsi untuk menampilkan form $("#tambah").hide(); $("#frm_input").slideDown();}function hideForm(){// fungsi untuk menghilangkan form $("#tambah").show(); $("#frm_input").slideUp(); clearData();}function showValue(arr){// tampilkan data di field var gender = (arr[2] == "laki - laki")?"1":"2"; $("#name").val([arr[0]]); $("#email").val([arr[1]]); $("#gender").val([gender]); $("#address").val([arr[3]]);}

$(document).ready(function(){ list_data();

$("#frm_input").submit(function(){// ketika tombol submit ditekan var name = $("#name").val(); var email = $("#email").val(); var sex = $("#gender").val(); var addr = $("#address").val(); var id = $("#ids").val();

var inputData = ({name:name,email:email,sex:sex,addr:addr,id:id});// data yang akan di kirim

$.ajax({ url : "proses.php?s=input"// proses input data ,dataType : "json" ,type : "post" ,data : inputData ,success : function(data){ if(data.valid == true){ alert(data.message);// tampilkan pesan clearData();// kosongkan field yang sudah diisi list_data();// memanggil list data (refresh grid) }else{ alert(data.message);// tampilkan pesan } } ,error : function(){ alert("Error load ajax page.");// pesan error ajax } });

return false; });

$("#tambah").click(function(){// tampilkan form input showForm(); });

$("#reset").click(function(){// hilangkan form input hideForm(); });

$(document).on("click", "#edit",function(){//ketika tekan link edit var key = $(this).attr("key"); var arr = new Array(); $("#t"+key+" td").each(function(k){ arr[k] =$(this).text(); }); $("#ids").val([key]); showForm(); showValue(arr); });

$(document).on("click", "#del",function(){//ketika tekan link delete var key = $(this).attr("key"); $("#t"+key).slideUp();

$.ajax({ url : "proses.php?s=delete"// proses delete ,dataType : "json" ,type : "post" ,data : ({id:key}) ,success : function(data){ if(data.valid == true){ alert(data.message); }else{ alert(data.message); } } ,error : function(){ alert("Error load ajax page."); } });

hideForm(); });});5. Buat file untuk memproses data