Getting and setting options
Like the destroy method, the option method is exposed by all the different components found in the library. This method is used to work with the configurable options and functions in both getter and setter modes. Let's look at a basic example; add the following <button> after the Tabs widget in tabs9.html:
<button type="button" id="show">Show Selected!</button>
Then change the final <script> element so that it is as follows:
<script>
$(document).ready(function($){
$("#myTabs").tabs();
$("#show").click(function() {
$("<p></p>", {
text: "Tab at index " + $("#myTabs").tabs("option", "active") + " is active"
}).appendTo(".ui-tabs-nav").fadeOut(5000);
});
});
</script>We also need to tweak the positioning of the text shown, so remove the link to tabSelect.css in the existing code, and add the following in the <head> section:
<style type="text/css">
ul.ui-tabs-nav p { margin-top: 2px;...