Thursday, September 1, 2011

jQuery UI Tab scroller plugin V 1.0

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 ?

15 comments:

  1. whe i can find demo >?????

    ReplyDelete
  2. Hi Anonynous,

    The demo is inside the folder that you have downloaded.

    ReplyDelete
  3. 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.

    ReplyDelete
  4. Thank you for your complement. I will think about it.

    ReplyDelete
  5. when 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!

    ReplyDelete
  6. I like it. But is there any way I can apply just the arrows/scrolling to my existing code:

    $(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" );
    });

    ReplyDelete
    Replies
    1. Hi Justin,

      I 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.

      Delete
  7. I tried implementing drag n drop with your scrollable tabs. IT doesnt work.
    http://www.infoheights.com/AOA/UserModule/

    Can you help?

    ReplyDelete
    Replies
    1. Hi Anu,
      This 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

      Delete
  8. can i provide next - previous arrow in my static tab? if yes then how?
    i 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?

    ReplyDelete
  9. boo! Doesn't work with new Jquery scripts

    ReplyDelete
  10. Google 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

    ReplyDelete