PoNG Module: Navigation Bar

From EWIKI
Jump to navigation Jump to search

This module is a uses header hook to add a navigation DIV in PoNG. The whole page is reloaded and the layout structure can be switched to a different one.

Please have a look at the other standard modules coming with PoNG.

This module uses the "layout" control feature of PoNG. So if you utilize the GET parameter "layout" the value will be used to determine the layout definition, so if you load http://mysite.xyz/basedir/index.html?layout=XYZ the structure JSON is get from http://mysite.xyz/basedir/svc/layout/XYZ/structure

Usage in "structure"

Simply add a action to the actions array with "type": "modal-form"

Example structure file extract:

{
  "layout": {
     ...
     "header": [
     {
        ...
        "modules" : [ { "id": "MainNav", "type": "pong-navbar", "param": { "confURL":"nav" } } ] 
     },
     ...
   ],
   ...
}

Configuration

The confURL should be like this example:

{
   "navigations" : [
      { "layout":"main", "label":"Main"  },
      { "layout":"crm", "label":"CRM"  }
   }
}

You can use page_name alternatively to identify pages for tabs -- if page_mode is set to php.

Usage with embedded configuration

Example:

{
 "layout": {
    ...
    "header": [
    {
       ...
       "modules" : [ 
           {  
              "id": "MainNav", 
              "type": "pong-navbar", 
              "moduleConfig": {
                    "navigations": [
                           {
                               "layout": "123",
                               "page_name": "ORLpAl",
                               "label": "Tab1"
                           },
                           {
                               "layout": "124",
                               "page_name": "1fRK2h",
                               "label": "tab2"
                           }
                    ]
               }
           } 
       ] 
    },
    ...
  ],
  ...
}

Example result

Here is a Nav Bar result:

PoNG-NavBar.png

HTML is:


 <html>
 <head>...</head>
 <body>
    <div id="maindiv" class="page-width">
    <div id="header">
                ...
      <div id="MainNav" class="pong-navbar">
        <div class="pongNavBarItem pongNavBarItemActive">
            <a href="index.html?layout=main">
                Main
            </a>
        </div>
        <div class="pongNavBarItem">
            <a href="index.html?layout=crm">
                CRM
            </a>
        </div>
     </div>
     ...

CSS

TODO