Bottom Tab Bar Visual Editor

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
}

Trigger JavaScript Commands from Tab Menu Options

Learn more