Navigation

	Home Page
	Index
	All Pages

Quick Search
Advanced Search »

Contributor Links

	Create a new Page
	Administration
	File Management
	Login/Logout
	Your Profile

Other Wiki Sections

Software

jQuery-UI Tab Code Generator

The following SQL code will generate HTML code for a set of jQuery-UI tabs, each containing a "Create New" button above a jqGrid with a pager.

with Tab as (
    select TabOrder = 1, Caption = 'Activities', Singular = 'Activity'
    union select 2, 'Contacts', 'Contact'
    union select 3, 'Addresses', 'Address'
    union select 4, 'Notes', 'Note'
    union select 5, 'Attachments', 'Attachment'
)
,TabExt as (
    select
        *
        ,TabName    = REPLACE(Caption, ' ', '') + 'Tab'
        ,TabID      = REPLACE(Caption, ' ', '')
        ,SingularID = REPLACE(Singular, ' ', '')
    from
        Tab
    )
      select Sort1 = 010, Sort2 = 1,        Sort3 = 01, html = '<div id="tabPanel">'
union select Sort1 = 020, Sort2 = 1,        Sort3 = 01, html = ''
union select Sort1 = 030, Sort2 = 1,        Sort3 = 01, html = '    @*--- Tab Strip ---*@'
union select Sort1 = 040, Sort2 = 1,        Sort3 = 01, html = '    <ul>'
union select Sort1 = 050, Sort2 = TabOrder, Sort3 = 01, html = '        <li id="' + TabName + '"><a href="#' + TabID + '"><span>' + Caption + '</span></a></li>' from TabExt
union select Sort1 = 060, Sort2 = 1,        Sort3 = 01, html = '    </ul>'
union select Sort1 = 070, Sort2 = 0,        Sort3 = 01, html = ''
union select Sort1 = 070, Sort2 = TabOrder, Sort3 = 10, html = '    @*--- ' + Caption + ' tab ---*@' from TabExt
union select Sort1 = 070, Sort2 = TabOrder, Sort3 = 20, html = '    <div id="' + TabID + '">' from TabExt
union select Sort1 = 070, Sort2 = TabOrder, Sort3 = 25, html = '        <input type="button" class="newItemButton" id="btnNew' + SingularID + '" onclick="new' + SingularID + '();" value="New ' + Singular + '" /><br />' from TabExt
union select Sort1 = 070, Sort2 = TabOrder, Sort3 = 30, html = '        <div id="grid' + TabID + '"><table id="jqgrid' + TabID + '"></table></div>' from TabExt
union select Sort1 = 070, Sort2 = TabOrder, Sort3 = 40, html = '        <div id="pager' + TabID + '"></div>' from TabExt
union select Sort1 = 070, Sort2 = TabOrder, Sort3 = 98, html = '    </div>' from TabExt
union select Sort1 = 070, Sort2 = TabOrder, Sort3 = 99, html = '' from TabExt
union select Sort1 = 080, Sort2 = 1       , Sort3 = 01, html = '</div>'
order by Sort1, Sort2, Sort3

The following JavaScript will initialize the tab panel.

$("#tabPanel").tabs();