jQuery UI .tabs() Contentless tab?

» javascript » jQuery UI .tabs() Contentless tab?

By : Vegarhalo

Date : November 29 2020, 01:01 AM

I think the issue was by ths following , First of all, the answer to "does this work" is always "try it and see".
Second, it's possible to fake an "empty" tab by intercepting and cancelling the beforeActivate event. Before cancelling your event handler would modify the DOM appropriately to add a new tab and call the refresh method to update the UI.

code :

Share :

UI jQuery Tabs - Create More than One Link to Tabs within Tabs on Same Page

By : user3067086

Date : March 29 2020, 07:55 AM

may help you . I think I would handle this differently using the href on the link itself, perhaps with a class to indicate that it is an intra-tab link, to determine which tab to load and setting up the handlers in the tabs create event.

code :

$('#tabs').tabs({
     create: function(event,ui) {
         $('a.intra-tab',ui.panel).unbind('click').click( function() {
            var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
            $('#tabs').tabs('select',id);
            return false;
         });
     }
});

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Home</a></li>
        <li><a href="#tabs-2">Alarms</a></li>
        <li><a href="#tabs-3">Access Control</a></li>
        <li><a href="#tabs-4">Services</a></li>
        <li><a href="#tabs-5">Contact Us</a></li>
    </ul>
    <div id="tabs-1">
      <p><span class="bodytext"><a href="#tabs-4" class="intra-tab">Check our services</a></span></p>
    </div>
    ...

$('#tabs').tabs();
$('a.intra-tab').live( 'click', function() {
    var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
    $('#tabs').tabs('select',id);
    return false;     
});

jquery tabs - dynamic div below tabs should not slide up when switching tabs

By : PC Mechanics

Date : March 29 2020, 07:55 AM

this will help See http://jsfiddle.net/kXS4g/4/
I'm animating only when the tab is de-selected. There's apparently no deselect event in jQuery ui, so I check for selection by counting the 'ui-tabs-selected' elements (should be zero). Unfortunately, this css class isn't removed until after the select callback is done so the hackish approach I chose to use was setTimeout to delay the function call.

How can I have horizontal tabs nested under vertical tabs with jQuery.tabs()?

By : Ganesh S

Date : March 29 2020, 07:55 AM

Hope that helps The problem is in the CSS.
The CSS provided by the jQuery UI site doesn't select direct descendants. Their CSS is applying the vertical classes to all matches. To be able to have a nested horizontal tabs inside of vertical tabs, you need to modify the jQuery UI classes to only select direct descendants by applying >.

code :

.ui-tabs-vertical {
    width: 55em;
}
.ui-tabs-vertical > .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12em;
}
.ui-tabs-vertical > .ui-tabs-nav li {
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
}
.ui-tabs-vertical > .ui-tabs-nav > li > a {
    display:block;
}
.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
    border-right-width: 1px;
}
.ui-tabs-vertical > .ui-tabs-panel {
    padding: 1em;
    float: right;
    width: 40em;
}

$(function () 
{
    $("#htabs-outer").tabs();

    $("#vtabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#vtabs > ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");

    $("#htabs-inner").tabs();
});

Want to make contentless div responsive to height of adjacent div

By : Novel Martinez

Date : March 29 2020, 07:55 AM

fixed the issue. Will look into that further Flexbox will offer the functionality you need.
Put display: flex on your container class. And flex: 1 on your content div. No matter how much content you place in the content div the colorTab div will match its height.

code :

.wrapper {
  overflow: hidden;
  display: flex;
}

.colorTab {
  position: relative;
  width: 5px;
  border-radius: 5px;
  background: red;
}

.content {
  flex: 1;
}

<div class="wrapper">
  <div class="colorTab">
  
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>

Possible/how to have horizontal tabs nested under vertical tabs with jquery.tabs()?

By : newcomer

Date : March 29 2020, 07:55 AM

around this issue I found myself in a similar situation where I had an outer vertical tab and an inner one rendering vertically where I wanted it to be horizontal. Here's one solution:
Change the style for the vertical tabs to not select a specific class, in this case "filt"