Inilah contoh yang sangat mendasar ..
/*
Code assumes it will be in the theme functions.php file
Update the enqueue path if using it elsewhere
*/
add_action( 'add_meta_boxes_post', 'add_post_metabox' );
function add_post_metabox() {
wp_enqueue_script( 'mytabs', get_bloginfo( 'stylesheet_directory' ). '/mytabs.js', array( 'jquery-ui-tabs' ) );
add_meta_box( 'examplebox' , __('Example box'), 'my_example_metabox', 'post', 'side', 'core'/*,array()*/);
}
function my_example_metabox() {
?>
<div id="mytabs">
<ul class="category-tabs">
<li><a href="#frag1">Tab 1</a></li>
<li><a href="#frag2">Tab 2</a></li>
<li><a href="#frag3">Tab 3</a></li>
</ul>
<br class="clear" />
<div id="frag1">
<p>#1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag2">
<p>#2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag3">
<p>#3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<?php
}
JQuery untuk mytabs.js direferensikan di enqueue.
jQuery(document).ready(function($) {
$("#mytabs .hidden").removeClass('hidden');
$("#mytabs").tabs();
});
CATATAN:
- Digunakan di dalam plugin, enqueue harus memanggil
plugins_url( '/mytabs.js', __FILE__ )
menggantikan get_bloginfo
string.
- Tautan jangkar untuk setiap tab harus cocok dengan ID elemen konten yang dimaksud, misalnya. frag1, frag2, dll.
- Kelas tersembunyi diterapkan untuk setiap DIV konten setelah yang pertama sehingga mereka disembunyikan di halaman memuat (kalau tidak Anda akan melihat lompatan singkat di halaman), kelas dihapus setelah memuat halaman, kalau tidak mereka akan tetap tersembunyi.
- Tindakan teratas harus diperbarui untuk mencerminkan jenis posting yang ingin Anda efek
add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );
, saya gunakan post
dalam contoh ..
- Anda harus merender kotak metabox di samping untuk memanfaatkan CSS WordPress yang ada yang menempatkan elemen LI tab inline (Anda selalu dapat memuat stylesheet Anda sendiri untuk berurusan dengan CSS).
Lihat di sini untuk info lebih lanjut tentang cara mengkonfigurasi skrip tab.
http://docs.jquery.com/UI/Tabs
Semoga itu bisa membantu ..