Hi, i am using CJuiTab for listing some static data. Now tabs contains more items and after the width of the tab division, tab items are listed in rows. i want add a more button to the right of tab menu for showing other tabs.
Thanks for your rply. This script i added in view but there is no change in the view. Where is the divisions for class view more? any other divisions required?
I suspect it’s running before the tabs have loaded. You could probably get it working properly by registering the javascript using Yii::app()->clientScript->registerScript() after the widget has been created.
For a quick fix, check whether it is an ordering issue by wrapping the code in a timeout, something like this:
<script type="text/javascript">
$(document).ready(function(){
$('body').on('click', '.ui-tabs .ui-tabs-nav .view-more-link', function(){
var moreTab = $(this).closest('.view-more');
var tabContainer = moreTab.closest('.ui-tabs-nav');
moreTab.remove();
tabContainer.find('li').show();
return false;
});
window.setTimeout(function(){
$(this).find('.ui-tabs .ui-tabs-nav').each(function(){
var tabContainer = $(this);
var tabContainerWidth = tabContainer.width() - 80;
var cumulativeTabWidth = 0;
tabContainer.find('li').each(function(){
cumulativeTabWidth += $(this).width();
if (cumulativeTabWidth > tabContainerWidth)
$(this).hide();
});
if (cumulativeTabWidth > tabContainerWidth)
{
var moreContainer = $('<li>').addClass('view-more')
.css({float:'right'});
moreContainer.append($('<a>').addClass('view-more-link')
.attr('href', '#').text('More'));
tabContainer.append(moreContainer);
}
});
}
}, 100);
});
</script>
I’m not sure what else you were asking, but there’s no additional code required to create the functionality I showed in the screenshots.
Hey, the more button not a tab in my tab menu. its displayed when tabs with exceeds the division width and i would like to show all other tabs by clicking more button.- (in a scroll wise or any other format)
Given that you’ll need to be able to understand this code when a bug is inevitably found, you should try to understand it and add the extra functionality yourself.
The first part handles the click on the More link, the second part handles the initial hiding of the tabs. You should be able to use the code I’ve given you to add the extra link that you need.
If you need more help after attempting a solution, post your code here and I (or someone else) will try to help you.
Here i’m using nested JuiTabs and when i insert the more tab script, it shows some problems. On page load it works fine, but when i click 2nd tab in index.php the content shows more button only. The screen shots are below. How can avoid it?
<script type="text/javascript">
$(document).ready(function(){
$('body').on('click', '.ui-tabs .ui-tabs-nav .view-more-link', function(){
var moreTab = $(this).closest('.view-more');
var tabContainer = moreTab.closest('.ui-tabs-nav');
moreTab.remove();
tabContainer.find('li').show();
return false;
});
$("body").on("tabscreate", function(event, ui){
hideTabs(event.target);
});
$("body").on("tabsactivate", function(event, ui){
$(ui.newPanel).find('.ui-tabs').each(function(){hideTabs(this);});
});
});
function hideTabs(tabWidgetElem)
{
var tabWidget = $(tabWidgetElem);
// Only remove tabs once
if (tabWidget.hasClass('tabs-removed'))
return;
var tabContainer = tabWidget.find(".ui-tabs-nav");
var tabHeight = tabContainer.find("li:first").height();
// Only add 'more' link if tabs have already wrapped
if (tabContainer.height() > tabHeight * 2)
{
var moreContainer = $('<li>').addClass('view-more')
.css({float:'right'});
moreContainer.append($('<a>').addClass('view-more-link')
.attr('href', '#').text('More'));
tabContainer.append(moreContainer);
tabWidget.addClass('tabs-removed');
}
// While tabs are taking more than one line, hide the last visible tab
while (tabContainer.height() > tabHeight * 2)
tabContainer.find('li:not(.view-more):visible:last').hide();
}
</script>
Demonstrated here (resize the result pane and hit Run).
