Done my research and found this is how to call the built-in ui tabs jquery script in wp for the admin area but I’m stuck on implementing the other jquery scripts needed that I believe are built into wp. I know how to add the css and just added html, I just don’t want to cause any problems with other existing plugins so I want to add these scripts below properly that are required.
http://code.jquery.com/jquery-1.8.3.js
http://code.jquery.com/ui/1.9.2/jquery-ui.js
Here is what I’m going to use for javascript (again how to add the scripts above?):
function my_plugin_load_js() {
wp_enqueue_script('jquery-ui-tabs');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );
function mypluginjs() {
echo '<script>
jQuery(function() {
jQuery( "#tabs" ).tabs();
});
</script>';
}
add_action( 'admin_enqueue_scripts', 'mypluginjs' );
Here is what I got so far for html:
<div class="wrap">
<h2>My plugin</h2>
<form method="post" action="options.php">
<?php settings_fields('my_plugin_options'); ?>
<?php $options = get_option('my-plugin'); ?>
<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>
<table class="form-table">
<div id="tabs-1"> options tr/td go here </div>
<div id="tabs-2"> options tr/td go here </div>
<div id="tabs-3"> options tr/td go here </div>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
</p>
</table>
</form>
</div> <!--- wrap end -->