jquery-ui dialog: how to add tabs to content area ?

Question

How can you add tabbing to the jquery-ui dialog content area ?

Answer 1

Hey find out the code to make tabs inside the JQuery UI Dialog.

Please download the css and js files i.e bundle from jquery website and attach to ur project.

  $(function() {
      $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
      $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
  });

    $(document).ready(function () {
        $("#dialog").dialog({  
            resizable:false,         
            closeOnEscape: false,
            open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            modal: true,
            width:800
        }).parent().find('div.ui-dialog-titlebar').addClass('titleClass');
    });

.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-selected { 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;}

<div id="dialog" style="background-color:Gray; text-align:center;">
    <div class="demo">

• Nunc tincidunt
• Proin dolor
• Aenean lacinia

Content heading 1

Content heading 2

Content heading 3