Fixing jQuery Tab Slide Out

William Paoli menerbitkan plugin jQuery yang cukup menarik, yaitu jquery tabslideout. Sebuah plugin yang memungkinkan kita memasang sliding panel di sisi kiri, kanan, atas atau bawah page website kita. Dia merilis plugin tersebut pada tanggal 1 September 2009.

Plugin ini dibikin ketika library jQuery masih versi 1.3.x. Ini adalah plugin perbaikan terakhir yang dibikin oleh Wiliam Paoli. Entah kenapa setelah itu dia tidak mengupdate plugin ini lagi. Mungkin karena menurut dia teknologi ini sudah usang, atau entah.

Nah, bagi teman-teman yang ingin memakai plugins ini dengan menggunakan library jQuery terbaru atau 1.8.x maka perlu mengubah kode bikinan Wiliam Paoli ini. Kode yang perlu diubah tidak banyak, hanya pada line 79 hingga line 82. Dari yang semula:

containerWidth: parseInt(obj.outerWidth(), 10) + ‘px’,
containerHeight: parseInt(obj.outerHeight(), 10) + ‘px’,
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + ‘px’,
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + ‘px’,

menjadi seperti ini:

containerWidth: parseInt(obj.outerWidth(true), 10) + ‘px’,
containerHeight: parseInt(obj.outerHeight(true), 10) + ‘px’,
tabWidth: parseInt(settings.tabHandle.outerWidth(true), 10) + ‘px’,
tabWidth: parseInt(settings.tabHandle.outerWidth(true), 10) + ‘px’,

Selesai, dan plugin ini bisa dipakai di library jQuery versi 1.8.x. Hanya perlu menambahkan true/false untuk outerWidth, outerHeight saja.

Sebenarnya menambahkan argument true atau false itu untuk memberitahu jQuery apakah dia akan menghitung value termasuk margin atau tidak. Tetapi dalam kasus tab slide out ini, memang sudah jelas bahwa outerWidth dan outerHeight ini untuk mendapatkan nilai termasuk marginnya. Sehingga kita bisa memposisikan tab dengan benar di kanan, kiri, atas atau bawah.

Demikian.

NB: sebenarnya saya pingin nulis tentang plugin lain, tetapi yang itu tidak terselesaikan dan masih di dalam draft. Sedang capek bikin screenshoot. *alesan* 😀

One thought on “Fixing jQuery Tab Slide Out

Leave a Reply

Your email address will not be published. Required fields are marked *