Click here to Skip to main content
Click here to Skip to main content
 
Add your own
alternative version

Anatomy of HTML5/JavaScript Single Page Application in Samples (basics, navigation, composition, communications with the server)

, 20 Dec 2012 CPOL
Describes Single Page Applications and a new BPF Framework that helps to develop SPAs.
BPF.zip
BPF
bpf.js.bundle
bpf.min.js.map
UsefulBPFPlugins
SPA_ARTICLE_CODE.zip
SPA_ARTICLE_CODE
ChainOfPluginsCompositionSample
ChainOfPluginsCompositionSample.csproj.user
ChainOfPluginsCompositionSample.v11.suo
HTML
Images
busy_indicator.gif
Properties
Scripts
BPF
ComplexProductNavigationTest
ComplexProductNavigationTest.csproj.user
ComplexProductNavigationTest.v11.suo
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
jQuery.UI.Combined.1.9.2
Content
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Scripts
jQuery.UI.Combined.1.9.2.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
BPF
CompositionAndNavigationSample
CompositionAndNavigationSample.csproj.user
CompositionAndNavigationSample.v11.suo
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
HTML
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
jQuery.UI.Combined.1.9.2
Content
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Scripts
jQuery.UI.Combined.1.9.2.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
BPF
HierarchicalSPAWithNavigation
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
HierarchicalSPAWithNavigation.csproj.user
HierarchicalSPAWithNavigation.v11.suo
Properties
Scripts
BPF
ParameterizedPluginSample
HTML
Images
busy_indicator.gif
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
ParameterizedPluginSample.sln~
ParameterizedPluginSample.v11.suo
Properties
Scripts
BPF
ParamNavigationTest
ParamNavigationTest.v11.suo
ParamNavigationTest
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
HTML
ParamNavigationTest.csproj.user
Properties
Scripts
BPF
ViewModels
SilverlightPluginSample
ClientBin
AnimatedBanner.xap
MultiplePointPathAnimation.xap
RunningLetters.xap
HTML
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
BPF
SilverlightPluginSample.csproj.user
SilverlightPluginSample.v11.suo
SimpleCompositionSample
HTML
Images
busy_indicator.gif
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
BPF
SimpleCompositionSample.csproj.user
SimpleCompositionSample.v11.suo
SimpleProductNavigationTest
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
jQuery.UI.Combined.1.9.2
Content
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Scripts
jQuery.UI.Combined.1.9.2.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
BPF
SimpleProductNavigationTest.csproj.user
SimpleProductNavigationTest.v11.suo
SPA_POSTingObjectToServer
App_Start
Controllers
Global.asax
Models
Properties
Scripts
SPA_POSTingObjectToServer.suo
SPA_POSTingObjectToServer.v11.suo
SPAComplexObjectGetter
App_Start
Controllers
Global.asax
Models
Properties
Scripts
SPAComplexObjectGetter.csproj.user
SPAComplexObjectGetter.sln~
SPAComplexObjectGetter.suo
SPAComplexObjectGetter.v11.suo
SPAServerStringCommunications
App_Start
Controllers
Global.asax
Properties
Scripts
SPAServerStringCommunications.csproj.user
SPAServerStringCommunications.suo
SPAServerStringCommunications.v11.suo
TwoPageOrdinaryHTMLApp
Properties
TwoPageOrdinaryHTMLApp.csproj.user
TwoPageOrdinaryHTMLApp.suo
TwoPageSPA
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
TwoPageSPA.csproj.user
TwoPageSPA.suo
TwoPageSPAWithNavigation
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
jQuery.UI.Combined.1.9.2
Content
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Scripts
jQuery.UI.Combined.1.9.2.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
BPF
TwoPageSPAWithNavigation.csproj.user
TwoPageSPAWithNavigation.v11.suo
TwoPageSPAWithTabs
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
packages
jQuery.1.8.3
Content
Scripts
jQuery.1.8.3.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
jQuery.UI.Combined.1.9.2
Content
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
minified
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Scripts
jQuery.UI.Combined.1.9.2.nupkg
Tools
common.ps1
install.ps1
uninstall.ps1
Properties
Scripts
TwoPageSPAWithTabs.csproj.user
TwoPageSPAWithTabs.suo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <title></title>
    <style>
        body
        {
            /*reduced the size of text to fit everything within the page of reasonable width*/
            font-size: 11px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td style="vertical-align: top">
                <div id="MyTopics">
                    <ul>
                        <li><a href="#TopicA">TopicA</a></li>
                        <li><a href="#TopicB">TopicB</a></li>
                    </ul>

                    <div id="TopicA">
                        My topic A
                        <table>
                            <tr>
                                <td style="vertical-align: top;">
                                    <div id="A1Subtopics">
                                        <ul>
                                            <li><a href="#A1Subtopic1">A1Sub1</a></li>
                                            <li><a href="#A1Subtopic2">A1Sub2</a></li>
                                        </ul>

                                        <div id="A1Subtopic1">
                                            A1 Sub Topic1
                                            <div id="A1Sub1Sub">
                                                <ul>
                                                    <li><a href="#A1Sub1Sub1">A1S1S1</a></li>
                                                    <li><a href="#A1Sub1Sub2">A1S1S2</a></li>
                                                </ul>
                                                <div id="A1Sub1Sub1">A1 Sub1 Sub1</div>
                                                <div id="A1Sub1Sub2">A1 Sub1 Sub2</div>
                                            </div>
                                        </div>
                                        <div id="A1Subtopic2">A1 Sub Topic2</div>
                                    </div>
                                </td>
                                <td style="vertical-align: top;">
                                    <div id="A2Subtopics">
                                        <ul>
                                            <li><a href="#A2Subtopic1">A2Sub1</a></li>
                                            <li><a href="#A2Subtopic2">A2Sub2</a></li>
                                        </ul>

                                        <div id="A2Subtopic1">A2 Sub Topic1</div>
                                        <div id="A2Subtopic2">A2 Sub Topic2</div>
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="TopicB">
                        The Topic B
                    </div>
                </div>
            </td>
            <td style="vertical-align: top">
                <div id="SomeOtherTopics">
                    <ul>
                        <li><a href="#SomeOtherTopicA">AnotherA</a></li>
                        <li><a href="#SomeOtherTopicB">AnotherB</a></li>
                    </ul>
                    <div id="SomeOtherTopicA">Some Other A </div>
                    <div id="SomeOtherTopicB" style="background-color: pink">Some Other B</div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/jquery-ui-1.9.2.min.js"></script>
<script src="Scripts/BPF/bpf.js"></script>

<script>
    $(document).ready(function () {
        // create topics JQuery UI tabs
        var topics = $("#MyTopics").tabs();

        // create otherTopics tabs
        var otherTopics = $("#SomeOtherTopics").tabs();

        var A1Subtopics = $("#A1Subtopics").tabs();

        var A2Subtopics = $("#A2Subtopics").tabs();

        var A1Sub1Sub = $("#A1Sub1Sub").tabs();

        // top level node is a product node for
        // the Cartesian product of the states
        var topLevelNode = new bpf.nav.ProductNode();

        // add "topics" node to be a child of topLevelNode under key "topics"
        var topicsNode = bpf.nav.addJQTabsChild(topLevelNode, "topics", topics);

        // add "otherTopics" node to be a child of topLevelNode under key "othertopics"
        bpf.nav.addJQTabsChild(topLevelNode, "othertopics", otherTopics);

        var aSubtopicsProductNode = new bpf.nav.ProductNode();

        topicsNode.addChildNode("TopicA", aSubtopicsProductNode);

        var A1SubNode = bpf.nav.addJQTabsChild(aSubtopicsProductNode, "a1subs1", A1Subtopics);
        bpf.nav.addJQTabsChild(aSubtopicsProductNode, "a1subs2", A2Subtopics);

        bpf.nav.addJQTabsChild(A1SubNode, "A1Subtopic1", A1Sub1Sub);

        // create the one to one relationship between the states and the URL
        bpf.nav.connectToUrlHash(topLevelNode);

        // change the original URL to be based on the navigation states
        bpf.nav.setKeySegmentToHash(topLevelNode);
    });
</script>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nick Polyak
Architect AWebPros
United States United States
I have 15 years of experience developing enterprise software, starting from C++ and Java on UNIX and moving towards C# on Windows platforms.
I am fascinated by the new .NET technologies especially WPF, Silverlight and LINQ.
Recently I decided to make a move and start my own contracting consulting and mentoring company AWebPros.
I can be contacted via my web site awebpros.com or through my blog at nickssoftwareblog.com

| Advertise | Privacy | Mobile
Web02 | 2.8.141015.1 | Last Updated 20 Dec 2012
Article Copyright 2012 by Nick Polyak
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid