jquery ui tabs functions for each tab -
How do you tie functions to each index of the jquery UI tab?
For example, I'm making a 3 part slide sign, step 1 is a form and validation, I want to place that code inside the load of step 1 while the # 2 and # To disable 3, tab is to add classes, while on 1, disable # 2 and # 3
There is no need to tie a function in the tab, it is built in the plugin:
to:
$ ('# tab'). Tab ({Select: Function (Event, UI) {...}}); Inside the
function, you can define the current tab that you are doing and what you have to do from there:
-
Get current tab index
currentTabIndex = $ ('# tab'). Get the current tab Content ID (from href) - can be an easy way, but I can not get it right now. Not found until
currentTabContent = $ ($ ('ui-tabs-selected) ') .Fund (' A '). Att ('href'));
HTML
& lt; Div id = "tabs" & gt; & Lt; Ul class = "nav" & gt; & Lt ;! - This part is used to make tabs for each div using jquery - & gt; & Lt; Li class = "ui-tab-selected" & gt; & Lt; A href = "# part-1" & gt; & Lt; Span & gt; A & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#section-2" & gt; & Lt; Span & gt; Two & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# part-3" & gt; & Lt; Span & gt; Three & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "part-1" & gt; & Lt; Form name = "myForm" method = "post" action = "" id = "myForm" & gt; & Lt; Div class = "error" & gt; & Lt; / Div & gt; Part 1 & lt; Br / & gt; Input type = "checkbox" /> Check me out # 1! & Lt; Br / & gt; & Lt; Br / & gt; & Lt; Input ID = "Submit form" type = "button" disabled = "disabled" value = "next>> gt; & gt; / & Gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; Div id = "part-2" & gt; & Lt; Div class = "error" & gt; & Lt; / Div & gt; Part 2 & lt; Br / & gt; Search & lt; Input type = "text" / & gt; & Lt; Br / & gt; & Lt; Br / & gt; & Lt; Input id = "donePart2" type = "button" value = "next>> gt; & gt; / & Gt; & Lt; / Div & gt; & Lt; Div id = "part-3" & gt; & Lt; Div class = "error" & gt; & Lt; / Div & gt; Part 3: & lt; Br / & gt; Here are some other information & lt; / Div & gt; & Lt; / Div & gt;
script
$ (document) .ready (function () {// Enable next button when form $ ('# myForm') ('Disabled', '')} and {$ ('# submitForm') atr ('disabled', 'disabled') (ft ('disabled', 'disabled')}}) enabled. Click on the next button $ ('# submitForm'). (Function () {// Enable the disabled tab before you can switch it, switch, then disable others if nxtTab (1,2);}) // Enable part2 next button $ ('# donePart2'). Click (function () {var okForNext = true; // check anything else, if OK, return (okForNext) nxtTab (2,1 tabs $ ('# tab'). Tab ({disabled Valid: [1,2], 'Selected': 0});} Validate the function (if ($ ('$ myForm') .Find (': checkbox'). (': Check')) return true; Description is false;} nxtTab (n, o) {// n = Next tab, o = other disabled tab (this works only for 3 total tabs) $ ('# tab'). Data ('disabled. Tabs', []). Tab ('Select', n). Data ('disabled.tabs', [0, o]);}
Comments
Post a Comment