Jasinski Technical Wiki

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

PoweredBy

jQuery-UI Tab Code Generator

RSS
Modified on Tue, Oct 16, 2012, 9:39 AM by Administrator Categorized as ASP·NET MVC, ASP·NET Web Forms, Code Generator, JavaScript, jQuery, and Angular, SQL Server
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();

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2018, Patrick Jasinski.