Membuat Public Comment Box berformat Tabs [b][update 15-09-2008][/b] Menambah option optOwnBox, supaya Public Comment bisa ditaruh di addBox(...) [b]Update Log:[/b] [spoiler][b][update 13-09-2008][/b] Cara membuat Tab Image sendiri Cara menyisipkan HTML string [b][update 11-09-2008][/b] Perubahan supaya bisa dipakai oleh browser IE Lupa naruh var arrTabsComments di codes, di update sebelumnya Baru ditest local untuk IE, kalau udah ada yg test secara online tolong dishare. [b][update 09-09-2008][/b] JS Codes : Perubahan fungsi & penambahan opsi Effect, dan opsi Durasi CSS Codes : Tidak ada perubahan[/spoiler] [b]Credits:[/b] tekfatliu, [color=skyblue]Moo[/color]Tools [b]Live preview:[/b] -- [url=http://profiles.friendster.com/50738231]Profile Tester[/url] [quote][b]Usage:[/b] var strMyTCLayout = "Your HTML string"; var arrTabsComments = []; tflTabsComment(arrTabsComments, strMyTCLayout,[optEffect],[optDuration],[optOwnBox]);[/quote] Untuk options boleh ada, boleh tidak.Kalau tidak ada maka akan dipakai defaultnya. optEffect = [b]'slide'[/b] atau 'fade' optDuration = number (500, [b]1000[/b], 1500, ...) in ms optOwnBox = [b]'18'[/b] atau Box ID dari addBox(..) [b]Bold[/b] == Default Options Khusus optOwnBox pastikan anda sudah membuat box nya! [quote]addBox("RIGHT","BoxHeader","Box Content","[b]MyBoxID[/b]","2"); var strMyTCLayout = ""; var arrTabsComments = []; tflTabsComment(arrTabsComments,strMyTCLayout,'fade',1500,'[b]MyBoxID[/b]');[/quote] [b]Ex:[/b] tflTabsComment(arrTabsComments,strMyTCLayout); - Effect 'slide', durasi 1000 tflTabsComment(arrTabsComments,strMyTCLayout,'fade'); - Effect 'fade', durasi 1000 tflTabsComment(arrTabsComments,strMyTCLayout,'fade', 1500); - Effect 'fade', durasi 1500 tflTabsComment(arrTabsComments,strMyTCLayout,'', 1500,'MyBoxID'); [b]Incorrect[/b]: tflTabsComment(arrTabsComments,strMyTCLayout,, 1500); [b]Correct[/b]: tflTabsComment(arrTabsComments,strMyTCLayout, [b]''[/b], 1500); [b]Recommended:[/b] [quote]tflTabsComment(arrTabsComments,strMyTCLayout);[/quote] [b]JS Codes:[/b] <">[b]CSS Codes:[/b] <">[hr] Cara membuat Tab Image sendiri: [spoiler]File image tab harus berukuran [b]35x75px[/b]. Tab image yang terlihat di Public Comment berukuran 35x25px, Jadi triknya adalah menggeser posisi dari Tab Image. Hal ini bisa kita lihat dari CSS codes [quote].tfltpwrapper li a{ background-position: left [b]bottom[/b] .tfltpwrapper li a:hover{ background-position: left [b]top[/b] .tfltpwrapper li a.selected{ background-position: left [b]center[/b][/quote] [img]http://tekfatliu.web44.net/FS/images/3dtabxexp.gif[/img] Buat 3 buah gif files, berukuran 35x25px. Buat rounded-rectangle, kasih warna sesuai status tab. Lalu buat satu gif file ukuran 35x75px, tiga buah gif file tadi di-copy/paste dan disusun secara vertikal, seperti ini: Tab Image Status [img]http://tekfatliu.web44.net/FS/images/3dtabxexpfin.gif[/img] Setelah selesai upload ke server, jangan lupa [b]URL[/b] di CSS-nya [b]dirubah[/b] [quote]... background-image: url("http://tekfatliu.web44.net/FS/images/3dtabx.gif"); //direplace dengan background-image: url("[b]URL Tab Image anda[/b]"); ...[/quote] Berikut 2 ready to use Tab Image: -- [url=http://tekfatliu.web44.net/FS/images/3dtabx.gif]Tab Image[/url] -- [url=http://tekfatliu.web44.net/FS/images/3dtabx1.gif]Tab Image[/url][/spoiler] Cara menyisipkan HTML string anda di var strMyTCLayout: [spoiler][quote]var strMyTCLayout= "<table align='center'><tr><td width='150px'bgcolor='#C8E458'><div align='center'>[color=red]Insert your HTML here[/color]</div></td><td width='300px'><div style='text-align:center'>[color=blue]Insert your HTML here[/color]</div></td></tr></table>";[/quote] Anda bisa membuat layout dengan HTML editor seperti Dreamweaver. Tapi disini saya sudah mempersiapkan layout, sebuah table dengan 2 kolom. Ganti text yg berwarna merah dan biru dengan HTML string anda. [color=red]Merah[/color] untuk kolom sebelah kiri [color=blue]Biru[/color] untuk kolom sebelah kanan Yang perlu diperhatikan adalah, jangan menggunakan double quote [b]"[/b] di dalam HTML string anda. Seperti dalam penulisan URL dari image tag: <img src =[b]"[/b]http://...[b]"[/b]> Tapi pergunakanlah single quote [b]'[/b] atau [b]\"[/b] <img src =[b]'[/b]http://...[b]'[/b]> Di dalam HTML string boleh mempergunakan spasi, tidak boleh mempergunakan tombol Enter, pergunakan <br> Tag.[/spoiler]

Last edited by tekfatliu (2008-10-18 04:57:12)