Controls inside each tab page in JQuery Tabs
Hi,
I am a newbie to front end development. I need to create a 3 tab-pages. Each page has 2 or more input controls. The number of controls varies for each tab.
I looked into lots of tutorial which explains how to create the tab page suing Jquery. Now, I created a text control in first page.
What needs to be done in the js? meaning how do I bind the text control to the tab page? and how to read the value of the controls when the tab page is clicked?
Here is the code snippet I used,
rel="stylesheet" type="text/css"/>
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<label for="Orig Number">Orig Number</label>
<input id="orignum" name="orignum" />
</div>
<div id="fragment-2">
<p>Tab2</p>
</div>
<div id="fragment-3">
<p>Tab3</p>
</div>
</div>
</body>
</html>