Bottom Tab Bar Visual Editor

📘

Similar to Sidebar Navigation, you may specify icons, labels, and links to include in each tab menu. You may then specify for which URLs the tab menu will appear by entering a regular expression to match page URLs. Use ".*" to match all URLs so that your tabs will always appear.

Trigger Javascript Commands from Tab Menu Options

If you'd prefer your links to trigger various javascript commands, you may wish to specify URLs in the Visual Editor with the following syntax (Option 1). Alternatively, you can set the URL with the javascript command directly in the JSON (Option 2).

/* Option 1 - Visual Editor */
javascript:alert('test');
/* Option 2 - JSON */
{
  "tabSelectionConfig": [
    {
      "id": "1",
      "regex": ".*"
    }
  ],
  "tabMenus": [
    {
      "items": [
        {
          "subLinks": [],
          "icon": "fa-home",
          "label": "Home",
          "url": "javascript:alert('test')" //specify javascript commands like this
        },
        {
          "subLinks": [],
          "icon": "fa-search",
          "label": "Search",
          "url": "javascript:alert('You selected tab 2. These tabs are only shown on the about page')"
        }
      ],
      "id": "1"
    }
  ],
  "active": true
}

A more complicated example is to click an element when it exists, otherwise load a new URL.

/* Option 1 - Visual Editor */
javascript:if (typeof jQuery === 'undefined' || jQuery('#linkElement').length == 0) 
    window.location = 'http://example.com/target'; 
else
    jQuery('#linkElement').click();
/* Option 2 - JSON */
{
  "tabSelectionConfig": [
    {
      "id": "1",
      "regex": ".*"
    }
  ],
  "tabMenus": [
    {
      "items": [
        {
          "subLinks": [],
          "icon": "fa-home",
          "label": "Home",
          "url": "javascript:if (typeof jQuery === 'undefined' || jQuery('#linkElement').length == 0) window.location = 'http://example.com/target'; else jQuery('#linkElement').click();"
        },
        {
          "subLinks": [],
          "icon": "fa-search",
          "label": "Search",
          "url": "javascript:alert('You selected tab 2. These tabs are only shown on the about page')"
        }
      ],
      "id": "1"
    }
  ],
  "active": true
}

Learn more