I am trying to show a jquery-ui tab in a plugin page through the function billing_settings_page
. As jQuery and jQuery UI are loaded automaically, so I thought I wouldn't need to include them. But a bit googling told me to include jQuery UI tab as well. My code follows. I do not even find ay console error in browser. The code does not show any jQuery UI tab however.
<?php
add_action('admin_enqueue_scripts','nibiz_billing_init');
function nibiz_billing_init() {
wp_enqueue_script( 'jquery-ui-tabs' );
wp_enqueue_script( 'nibiz', plugins_url( '/js/customer.js', __FILE__ ));
}
add_action('admin_menu', 'billing_settings_menu');
function billing_settings_menu() {
add_menu_page( 'Billing Settings', 'Billing Link',
'manage_options', __FILE__, 'billing_settings_page',
screen_icon('edit'));
add_submenu_page( __FILE__, 'About My Plugin',
'About', 'manage_options','nibiz_about',
'billing_settings_page_about' ) ;
}
function billing_settings_page() {
?>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt
nibh. Cras orci urna, blandit id, pretium vel, aliquet
ornare, felis. Maecenas scelerisque sem non nisl.
Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a,
dignissim quis, sollicitudin eu, felis. Pellentesque
nisi urna, interdum eget, sagittis et, consequat
vestibulum, lacus. Mauris porttitor ullamcorper
augue.</div>
</div>
<?php
}
?>
The custom.js
file has the following code :
//jquery-ui-tabs
jQuery(document).ready(function($) {
jQuery('#tabs').tabs();
});
What am I supposed to do to make the tab work ?