jQuery tabs custom action for one!

I have a jQuery tabs element that is working great at loading remote content.

However I want to add another button say called "Reset" that calls a custom javascript. Am quite new to jQuery but love it to pieces and can't work out how to get this done.

Here is the .js making the tabs at the moment, this is the default from the jQuery site!

$(document).ready(function() {
$( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible.");
            }
        }
    });
});

Then in my PHP I have the following. I开发者_运维技巧 want to attach the custom action to the new "Reset" tab.

<div id="tabs">
<ul>
    <li><a href="#map_canvas" title="content">Home</a></li>
    <li><a href="test.php" title="content">How this works?</a></li>
    <li><a href="test.php" title="content">View this at home</a></li>
    <li><a href="#reset" title="content">Reset</a></li>
</ul>

<div id="map_canvas">
</div>

</div>

The tabs have a select event which you can put in the constructor option object.

$(document).ready(function() {
    $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible.");
                }
            },
            select: function (event, ui) { // run this when a new tab is clicked
                if ($(ui.tab).attr('href') == "#reset") {
                    // Do stuff here
                }
            }
        });
});