Behavior: TabLauncher

posted Dec 14, 2012, 12:11 PM by Eric Patrick
The TabLauncher behavior in qbo.TabLauncher.cs is a Mootools behavior that enables launching new 'tabs' for an existing tab. Examples include:
  • Opening a Decision from a list of Decisions
  • Opening a Processes from a list of Processes
To implement, add the behavior to an element containing links that should launch a new tab. For example, a table containing workflows may contain:

<tbody data-behavior="Selectable TabLauncher" data-tablauncher-options="{{'bind': {{ 'class': 'qbo3.DecisionStepObject', 'method': 'Search', 'data': {{'OrderBy': 'DecisionStepID'}} }} }}" ...>

Then, for each element that should cause a new tab to open:

<a href="..." data-tab=" {{'title': '{Decision}','id':'steps{DecisionID}', 'data': {{'DecisionID': '{DecisionID}', 'OrderBy': 'DecisionStepID'}} }}">

When an element containing a data-tab attribute is clicked, the TabLauncher behavior will:
  • Cancel the click (so any link is not followed)
  • Create a new menu on the tab menu (li tag)
  • Create a new div tag in the tab content
  • Apply the ObjectBind behavior to the new div tag, passing the options found in data-tab with the bind options found in the tab launcher
See /Decision.ashx for an example of the TabLauncher in action.





Comments