I have just create my first jQuery plugin for scrolling UI tabs. The plugin basically add next and previous link in jQuery tab when the number of tab exceeds the width of tab panel. When you add/delete tab it automatically august the remaining tabs.
You can check it on google code with full example. https://github.com/riteshjha/scrolltab or just click HERE
Does it work for you ?
whe i can find demo >?????
ReplyDeleteHi Anonynous,
ReplyDeleteThe demo is inside the folder that you have downloaded.
Great plugin, the only downside is that you have to have fixed width tabs. If you had one that works with tabs of multiple sizes it would be a winner.
ReplyDeleteThank you for your complement. I will think about it.
ReplyDeletenice work, bro!
ReplyDeletethanks
Deletewhen i click anywhere on the tab area it doesn't get selected, only when i click on the tab name that respective tab is selected. Try to fix that too.. otherwise its good!
ReplyDeleteI like it. But is there any way I can apply just the arrows/scrolling to my existing code:
ReplyDelete$(function() {
$( "#tabs" ).tabs();
// fix the classes
$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
.removeClass( "ui-corner-all ui-corner-top" )
.addClass( "ui-corner-bottom" );
// move the nav to the bottom
$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
});
Hi Justin,
DeleteI am glad that you like it. Its long time i haven't review the code, so please just review the code and made changes to fit your requirement.
I tried implementing drag n drop with your scrollable tabs. IT doesnt work.
ReplyDeletehttp://www.infoheights.com/AOA/UserModule/
Can you help?
Hi Anu,
DeleteThis library is not for adding tab using drag and drop. To add drag and drop feature you have to use jQuery drag and drop plugin and then you need to call this library's add tab method on drop callback function. Make tabs main div as droppable. Hope this will help you.
$( "#tabs" ).droppable({
drop: function( event, ui ) {
//call library's addTab function here with all required data
}
});
Thanks,
Ritesh
can i provide next - previous arrow in my static tab? if yes then how?
ReplyDeletei have total 10 tab and from that 5 is visible?is there any option to provide dynamically totaltab and visibletab??
in this plugin arrow is displayed only after addTab.without addTab can i apply arrow?
boo! Doesn't work with new Jquery scripts
ReplyDeleteGoogle code will be taken out of the air soon, not to be disrespectful but I've created my own plugin with mobile focus, check it out! https://github.com/LucasLazaro/bootstrap-nav-tab-scrollable
ReplyDeleteThanks bro
ReplyDelete