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;...