Sebenarnya terdapat berbagai macam versi dari Show/Hide box, namun pada intinya adalah box akan Show/Hide apabila kita meng-click Header dari box (Toggle). Ada juga yang melakukan Show/Hide-nya dengan mouse hover. Bedanya dengan versi [b]Accordion[/b] ini, hanya boleh ada satu box yang show. Jadi kalau box ControlPanel sedang terbuka kita meng-click box PublicComment, maka box ControlPanel akan di Hide dulu sebelum box PublicComment di Show. Kalau ngak salah konsep [b]Accordion[/b] dari dulu juga gitu. Setup sangat mudah, tidak perlu meng-inject JS cukup setting array variabel, Show/Hide bisa dengan di-click atau di-mousehover, Bisa membuat semua box jadi satu Accordion atau memisahkan jadi 2 Accordion, satu untuk kolom kanan dan satu untuk kiri. [b]Credits:[/b] tekfatliu, [color=skyblue]Moo[/color]Tools [Update 15-09-2008] Menambahkan Tutorial mengenai FX.Slide() [b]Live preview:[/b] -- [url=http://profiles.friendster.com/50738231]Profile Tester[/url] Copy n Paste di JS Files kamu [b]JS Codes:[/b] <">Berikut adalah cara menset feature2 [b]Option:[/b] [spoiler]- Kita bisa menaruh semua box id dlm satu group, termasuk box yg kita buat sendiri [quote]... addBox("RIGHT","My addBox Header",sTemp,[b]"myAddBox"[/b],"2"); ... // group abc var a = ['0','1','6','18','2',[b]'myAddBox'[/b]]; var b = ['content_0','content_1','content_6','content_18','content_2',[b]'content_myAddBox'[/b]]; var c = []; tflAccordion(a,b,c);[/quote] - Default nya semua box di Hide pas pertama loading, [b]kecuali[/b] untuk item [b]pertama[/b] [quote]var a = [[b]'0'[/b], '1', '6', '18']; var b = [[b]'content_0'[/b],'content_1','content_6','content_18'];[/quote] - Jadi kalo pengen Public Comment yg di Show pas pertama loading, rubah urutan nya [quote]var a = [[b]'18'[/b], '0', '1', '6']; var b = [[b]'content_18'[/b],'content_0','content_1','content_6'];[/quote] - Kita juga bisa punya lebih dari satu group [quote]// Make 1st group abc (For all the box on the Left Side) var a = ['0', '1', '6', '18']; var b = ['content_0', 'content_1', 'content_6', 'content_18']; var c = []; tflAccordion(a,b,c); // Make 2nd group xyz (For all the box on the Right Side) var x = ['2', '8']; var y = ['content_2', 'content_8']; var z = []; tflAccordion(x,y,z,'mouseenter'); //... More group(s)[/quote] - Box id hanya boleh ada, di satu group saja [quote]var a = [[b]'0'[/b], '1', '6', '18']; ... var x = [[b]'0'[/b],'2', '8'];// This is wrong[/quote] - Kalau kamu punya box tapi ngak dimasukkin id nya, maka box itu akan [b]Open[/b] terus. - Selain di-Click, box juga bisa di Show/Hide dengan mouse hover di box header [quote]// call using 'mouseenter' option tflAccordion(x,y,z,'mouseenter');[/quote] [/spoiler] Accordion sendiri dibuat berdasarkan FX.SlideIn dari MooTools. Buat yg mau belajar, mengenai FX.SlideIn Berikut Tutorial mengenai FX.SlideIn dengan beberapa [b]contoh terpisah[/b]: [spoiler]-- Membuat ControlPanel box Show/Hide-able. [b]Ex 1:[/b] [spoiler][quote]var objContent0 = new Fx.Slide('content_0'); $('controlpanel_header').addEvent('click',function(){objContent0.toggle();});[/quote] Penjelasan: var objContent0 = new Fx.Slide('content_0'); Membuat var untuk menampung Slide Object dari ID yang mau di Show/Hide dalam hal ini Content_0 $('controlpanel_header').addEvent('click',function(){objContent0.toggle();}); Menambahkan ClickEvent_ID pada Header dari ControlPanel box (ID='controlpanel_header'), jadi kalau Header dari ControlPanel box di-click maka objContent0 akan di-Toggle antara Show/Hide. Untuk mencoba silahkan click Header dari ControlPanel box.[/spoiler] -- Sama seperti Ex 1, tapi sliding-nya Horisontal. [b]Ex 2:[/b] [spoiler][quote]var objContent0 = new Fx.Slide('content_0'[b], {mode: 'horizontal'}[/b]); $('controlpanel_header').addEvent('click',function(){objContent0.toggle();});[/quote] Penjelasan: Tambahkan opsi, [b]{mode: 'horizontal'}[/b] pada Slide object. Box tidak Open/Close hanya isi box bergeser keluar/masuk secara horisontal.[/spoiler] -- Bagaimana untuk box2 yang lain2? Seperti photos, moreabout, publiccomment, ... [b]Ex 3:[/b] [spoiler]Kita harus membuat var Slide Object yang baru, dan ClickEvent_ID yang baru untuk [b]setiap box[/b] yang ada. [quote]//Photos var objContent1 = new Fx.Slide('content_1'); $('1').getFirst().addEvent('click',function(){objContent1.toggle();}); //More About var objContent6 = new Fx.Slide('content_6'); $('6').getFirst().addEvent('click',function(){objContent6.toggle();}); //Public Comment var objContent18 = new Fx.Slide('content_18'); $('18').getFirst().addEvent('click',function(){objContent18.toggle();}); ... Untuk box2 selanjutnya, copy n paste lalu rubah box ID[/quote] Penjelasan: Yang perlu diperhatikan: code pada Click event di atas, berbeda dengan Ex 1 [b]$('1').getFirst().[/b]addEvent('click',function(){objContent18.toggle();}); [b]$('6').getFirst().[/b]addEvent('click',function(){objContent18.toggle();}); [b]$('18').getFirst().[/b]addEvent('click',function(){objContent18.toggle();}); ... more box berbeda dengan [b]$('controlpanel_header')[/b].addEvent('click',function(){objContent0.toggle();}); dikarenakan hanya pada header ControlPanel box sudah terdapat sebuah ID Dapat dilihat dari HTML source profile kita. [quote]<div class="clearfix commonbox controlpanel" id="0"> <h1 id=[b]"controlpanel_header"[/b]>TF ControlPanel Title<h1>[/quote] Untuk box2 yg lain tidak ada! Jadi untuk box2 yang lain kita mempergunakan ID yang ada di <div> Tag, lalu ambil Header box dalam hal ini adalah tag<h2>, dengan mmpergunakan getFirst() method. [quote]<div class="clearfix commonbox photos" id=[b]"1"[/b]> <h2>TF's Photo Gallery Title<a name="1"></a><a name="photos">[/quote] ClickEvent_ID nya jadi seperti ini [b]$('1').getFirst().[/b]addEvent('click',function(){objContent18.toggle();}); Untuk standarisasi dan menset ke dalam array var (nanti di dalam Ex 6), maka sebaiknya untuk ControlPanel box kita samakan saja coding-nya : [b]$('0').getFirst().[/b]addEvent('click',function(){objContent0.toggle();});[/spoiler] Untuk box2 yang kita buat sendiri bagaimana? [b]Ex 4:[/b] [spoiler]Masukkan saja box id, untuk Content id tambahkan 'content_' di depan box id [quote]addBox("RIGHT","BoxHeader","Box Content","[b]MyBoxID[/b]","2"); var objContentMyBox = new Fx.Slide('[b]content_MyBoxID[/b]'); $('[b]MyBoxID[/b]').getFirst().addEvent('click',function(){objContentMyBox.toggle();});[/quote] Pastikan anda membuat boxnya dulu, baru set Show/Hide addBox(...); ... var objContentMyBox = new Fx.Slide('[b]content_MyBoxID[/b]'); $('[b]MyBoxID[/b]').getFirst().addEvent('click',function(){objContentMyBox.toggle();});[/spoiler] Syntax dari FX.Slide itu sendiri: [quote]var SLIDEOBJVAR = new Fx.Slide(CONTENT_ID);[/quote] SLIDEOBJVAR = Slide Object CONTENT_ID = Content yang mau di Show Hide Selama ini kita mempergunakan ClickEvent untuk mengakses toggle method $('controlpanel_header').addEvent('click',function(){[b]objContent0.toggle()[/b];}); Sebenarnya method tersebut bisa kita panggil secara langsung [b]Ex 5:[/b] [spoiler][quote]var objContent0 = new Fx.Slide('content_0'); //Pertama kali page load, ControlPanel box akan di-close objContent0.toggle();[/quote] Click Event sendiri tidak perlu ada $('controlpanel_header').addEvent('click',function(){objContent0.toggle();}); tapi tentu saja header tidak akan bisa di click[/spoiler] Berikut beberapa method yang ada : SLIDEOBJVAR.slideIn(); SLIDEOBJVAR.slideOut(); SLIDEOBJVAR.toggle(); SLIDEOBJVAR.hide(); [b]Ex 5:[/b] [spoiler]Disini ke-empat method di-assign ke button <">[/spoiler] Disini kita mepergunakan array dalam men-setting Show/Hide [b]Ex 6:[/b] [spoiler]Untuk Ex 3, kita akan membuat array untuk menset Show/Hide box ini. [quote]var arrHeaderID=['0','1','6','18']; var arrContentID=['content_0','content_1','content_6','content_18']; var arrObjFXSlideIn=[]; arrHeaderID.each(function(el,i){ arrObjFXSlideIn.push(new Fx.Slide(arrContentID[i])); $(arrHeaderID[i]).getFirst().addEvent('click',function(){arrObjFXSlideIn[i].toggle();}); });[/quote] [/spoiler] Coba contoh nya satu persatu, pahami satu Ex lalu pindah ke Ex berikutnya. Show/Hide Accordion sendiri dasar pembuatan-nya seperti ini, dengan logika Jika ada box yang di click maka box yang sedang open di-close dulu, baru open box yang diclick. Kecuali box yang diclick sudah open.[/spoiler] Selamat Mencoba

Last edited by tekfatliu (2008-10-03 07:30:16)