Menu icon Foundation

Engineer | Portland, OR

.NET Nerd

My Posts

No Content

My Comments

PhillipPDX commented on David Kavanagh's post over 5 years

Alok,

In your example below, is there anyway to interrogate the tab object to see which tab is selected?

$('#myTabs').on('toggled', function (event, tab) {
console.log(tab);
});

Thanks,
Phillip

PhillipPDX commented on David Kavanagh's post over 5 years

I have come up with a fairly simple solution that has helped me pseudo deep link to specific tabs using JS.

I have 2 tabs (Sign In) and (Create Your Profile) as follows:
HTML
<dl class="tabs" data-tab>
<dd class="active"><a href="#pnlSignIn"><i class="ss-password"></i>&nbsp;@G.GlobalResources.LIT_SignIn</a></dd>
<dd><a href="#pnlCreateProfile" ><i class="ss-add-user"></i>&nbsp;@G.GlobalResources.LIT_CreateYourProfile</a></dd>
</dl>

I have links on each tab that will allow you go navigate to the other tab (showing the one for Create Your Profile):
HTML
<span id="noProfile">@string.Format(G.GlobalResources.MES_NewToApp, T.Shared.ApplicationName) &nbsp;&nbsp;<a href="#pnlCreateProfile" id="switchCreate" onclick="showCreateProfileTab();">@G.GlobalResources.LIT_CreateProfile &gt;</a></span>

// Show create profile tab.
function showCreateProfileTab() {
$('#pnlSignIn').removeClass('active');
$('#pnlCreateProfile').addClass('active');
$("#FirstName").focus();
}

// Show sign in tab.
function showSignInTab() {
$('#pnlCreateProfile').removeClass('active');
$('#pnlSignIn').addClass('active');
$("#UserName").focus();
}

PhillipPDX commented on David Kavanagh's post over 5 years

Martin makes some very valid points in his post above. I have no problem moving to tabs as they currently are but not being able to deep link to specific tab is VERY inconvenient. This is something I feel that you guys should really address.

Best,
Phillip

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on David Kavanagh's post over 5 years

Alok,

In your example below, is there anyway to interrogate the tab object to see which tab is selected?

$('#myTabs').on('toggled', function (event, tab) {
console.log(tab);
});

Thanks,
Phillip

You commented on David Kavanagh's post over 5 years

I have come up with a fairly simple solution that has helped me pseudo deep link to specific tabs using JS.

I have 2 tabs (Sign In) and (Create Your Profile) as follows:
HTML
<dl class="tabs" data-tab>
<dd class="active"><a href="#pnlSignIn"><i class="ss-password"></i>&nbsp;@G.GlobalResources.LIT_SignIn</a></dd>
<dd><a href="#pnlCreateProfile" ><i class="ss-add-user"></i>&nbsp;@G.GlobalResources.LIT_CreateYourProfile</a></dd>
</dl>

I have links on each tab that will allow you go navigate to the other tab (showing the one for Create Your Profile):
HTML
<span id="noProfile">@string.Format(G.GlobalResources.MES_NewToApp, T.Shared.ApplicationName) &nbsp;&nbsp;<a href="#pnlCreateProfile" id="switchCreate" onclick="showCreateProfileTab();">@G.GlobalResources.LIT_CreateProfile &gt;</a></span>

// Show create profile tab.
function showCreateProfileTab() {
$('#pnlSignIn').removeClass('active');
$('#pnlCreateProfile').addClass('active');
$("#FirstName").focus();
}

// Show sign in tab.
function showSignInTab() {
$('#pnlCreateProfile').removeClass('active');
$('#pnlSignIn').addClass('active');
$("#UserName").focus();
}

You commented on David Kavanagh's post over 5 years

Martin makes some very valid points in his post above. I have no problem moving to tabs as they currently are but not being able to deep link to specific tab is VERY inconvenient. This is something I feel that you guys should really address.

Best,
Phillip

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content