Pages: 12
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
You are viewing a post by tekfatliu. View all 30 posts in 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.
2008-09-06 05:13:37
- tekfatliu
- » n00b
69
0
1969-12-31
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
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
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)
 |