In-page tabs
Navigation, global
Summary
In-page tabs are used heavily in the RAFT example of DM-BI applications. When viewing tabular data (like cost objects, projects made up of budgets, time, and people) it is essential to provide views of each content and sub-content type while minimizing clicks for users.
Code
<div> <nav id="tabs_workset"> <span data-contextid="costobjects" data-tabid="tab_workset_costobjects">Cost Objects and People<span></span></span> <span data-contextid="reports" data-tabid="tab_workset_reports">Reports<span></span></span> <span data-contextid="auths" data-tabid="tab_workset_auths">Authorizations<span></span></span> <span data-contextid="comments" data-tabid="tab_workset_comments">Comments<span></span></span> </nav> <div> <div id="tab_workset_costobjects" style="display: none; "> <div style="margin: 12px 0 12px 0"> <label style="display:inline" for="wkBudgetSelect">Budget</label> <select id="wkBudgetSelect"> <option value="000"> Institute Budget </option> <option value="001"> Recurring (Base) Budget </option> <option value="002"> Non-recurring(Non-base)Budget </option> <option value="099"> Sloan School of Management </option> <option value="900"> System Data Maintenance </option> <option value="A00"> School of Architecture </option> <option value="AF"> Annual Forecast Budget </option> <option value="BI1"> Broad Institute </option> <option value="COA"> COEUS Award Budget </option> <option value="E00"> School of Engineering </option> <option value="N01"> Plant Revision 1 </option> </select> </div> <div><h3 id="co_title">Cost Objects in this Workset</h3></div> <span>Actuals are current through yesterday. Right-click on the column header bar below to customize column display.</span> <div style="position:relative;font-size:.87em;"> <div> <div id="co_grid" style="overflow: hidden; outline: 0px; position: relative; "><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div><div tabindex="0" style="width: 100%; "><div><div style="left: -1000px; width: 1796px; " unselectable="on"><div id="slickgrid_197668co-id" style="width: 71px; " title=""><span>Cost Object ID</span><span></span><div></div></div><div id="slickgrid_197668co-name" style="width: 141px; " title=""><span>Cost Object Name</span><span></span><div></div></div><div id="slickgrid_197668eff-date" style="width: 71px; " title=""><span>Eff. Date</span><span></span><div></div></div><div id="slickgrid_197668exp-date" style="width: 72px; " title=""><span>Exp. Date</span><span></span><div></div></div><div id="slickgrid_197668budget" style="width: 72px; " title=""><span>Budget</span><span></span><div></div></div><div id="slickgrid_197668actuals" style="width: 71px; " title=""><span>Actuals</span><span></span><div></div></div><div id="slickgrid_197668forecast" style="width: 71px; " title=""><span>Forecast</span><span></span><div></div></div><div id="slickgrid_197668sibalance" style="width: 71px; " title=""><span>Institute Balance</span><span></span><div></div></div><div id="slickgrid_197668sbbalance" style="width: 71px; " title=""><span>Budget Balance</span><span></span><div></div></div><div id="slickgrid_197668sap-current-balance" style="width: 70px; " title=""><span>SAP Current Balance</span><span></span></div></div></div></div><div tabindex="0" style="display: none; "><div><div style="left: -1000px; width: 0px; " unselectable="on"></div></div></div><div tabindex="0" style="top: 26px; height: 197px; width: 100%; "><div style="display: none; width: 101%; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div style="width: 781px; "></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 197px; width: 100%; "><div tabindex="0" hidefocus="" style="width: 781px; height: 880px; "><div style="top:0px"><div>C1443500</div><div>Lcs-General</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:22px"><div>C1444200</div><div>Csail-General</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:44px"><div>C1444205</div><div>Tig</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:66px"><div>C1444206</div><div>Student Activities Budget</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:88px"><div>C1444214</div><div>Charles Fine Sloan Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:110px"><div>C1444215</div><div>Polansky Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:132px"><div>C1444216</div><div>Lynch Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:154px"><div>C1444217</div><div>Sollins Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:176px"><div>C1444218</div><div>Arvind Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:198px"><div>C1444219</div><div>Indyk Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:220px"><div>C1444220</div><div>Katabi Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:242px"><div>C1444221</div><div>Balakrishanan Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div><div style="top:264px"><div>C1444222</div><div>Peh Wireless Fund</div><div>07/01/2013</div><div>06/30/2014</div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div></div></div></div><div tabindex="0" style="display: none; "><div style="display: none; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 197px; "><div tabindex="0" hidefocus="" style="height: 880px; "></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div></div> <span id="co_data_loading" style="position: absolute; z-index: 2000; display: none; left: 0px; bottom: 225px; width: 796px; "> <span>Loading Next Page...</span> <span></span> </span> </div> </div> <div id="pp_title"> <h3>People paid on Cost Objects in this Workset</h3> <span style="display: none; "></span> <span style="display: none; ">Loading Next Page...</span> </div> <div id="pp_grid" style="overflow: hidden; outline: 0px; position: relative; "><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div><div tabindex="0" style="width: 100%; "><div><div style="left: -1000px; width: 1796px; " unselectable="on"><div id="slickgrid_910160wkPeName" style="width: 240px; " title=""><span>Full Name</span><span></span><div></div></div><div id="slickgrid_910160wkPeAppt" style="width: 350px; " title=""><span>Appointment</span><span></span><div></div></div><div id="slickgrid_910160wkPeStartDate" style="width: 101px; " title=""><span>Appt. Start Date</span><span></span><div></div></div><div id="slickgrid_910160wkPeEndDate" style="width: 90px; " title=""><span>Appt. End Date</span><span></span></div></div></div></div><div tabindex="0" style="display: none; "><div><div style="left: -1000px; width: 0px; " unselectable="on"></div></div></div><div tabindex="0" style="top: 26px; height: 197px; width: 100%; "><div style="display: none; width: 101%; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div style="width: 781px; "></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 197px; width: 100%; "><div tabindex="0" hidefocus="" style="width: 781px; height: 960px; "><div style="top:0px"><div>Adams, Andrew</div><div>Postdoctoral Associate/Acad Appt</div><div>08/22/2011</div><div>02/07/2013</div></div><div style="top:24px"><div>Adelson, Edward H</div><div>Professor/Summer Session Appt</div><div>07/01/2006</div><div>08/31/2012</div></div><div style="top:48px"><div>Adib, Fadel</div><div>Visiting Student/Non-Acad Short Term Appt - Non Exempt</div><div>06/14/2010</div><div>10/16/2010</div></div><div style="top:72px"><div>Agarwal, Shivani</div><div>Postdoctoral Associate/Acad Appt</div><div>06/01/2009</div><div>08/31/2010</div></div><div style="top:96px"><div>Ahmed, Nabeel</div><div>Postdoctoral Associate/Acad Appt</div><div>11/15/2009</div><div>11/14/2011</div></div><div style="top:120px"><div>Akavia, Adi Q.</div><div>Postdoctoral Associate/Acad Appt</div><div>08/16/2008</div><div>09/04/2008</div></div><div style="top:144px"><div>Almeyda, Lily</div><div>Patrol Officer/Non-Acad Regular Appt- Non Exempt</div><div>07/09/2012</div><div>07/15/2012</div></div><div style="top:168px"><div>Amarasinghe, Saman P</div><div>Professor/Summer Session Appt</div><div>07/01/2009</div><div>07/31/2012</div></div><div style="top:192px"><div>Amato, Christopher</div><div>Postdoctoral Associate/Acad Appt</div><div>01/09/2012</div><div>03/31/2012</div></div><div style="top:216px"><div>Asanovic, Krste</div><div>Associate Professor/Summer Session Appt</div><div>07/01/2006</div><div>06/30/2007</div></div><div style="top:240px"><div>Ay, Ferhat</div><div>Visiting Student/Non-Acad Short Term Appt - Non Exempt</div><div>05/17/2010</div><div>08/15/2010</div></div><div style="top:264px"><div>Ayache, Nicholas Jerome</div><div>Visiting Scientist/Acad Appt</div><div>08/01/2007</div><div>12/31/2007</div></div><div style="top:288px"><div>Balakrishnan, Hari</div><div>Professor/Acad Appt - MAP</div><div>09/01/2006</div><div>01/15/2007</div></div></div></div></div><div tabindex="0" style="display: none; "><div style="display: none; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 197px; "><div tabindex="0" hidefocus="" style="height: 960px; "></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div></div> </div> </div> <div> <div id="tab_workset_reports" style="display: none; "> <h3>Reports</h3> <div id="wkReportsTable"></div> </div> </div> <div> <div id="tab_workset_auths" style="display: none; "> <h3 style="padding-bottom:0">Authorizations on This Shared Workset</h3> <div id="authorizationsContainer"> <div style="margin-bottom:15px"> <button id="addPersonAuthToWorkset" type="button">Add Person</button> </div> <div id="authsTable" style="overflow: hidden; outline: 0px; position: relative; "><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div><div tabindex="0" style="width: 100%; "><div><div style="left: -1000px; width: 1811px; " unselectable="on"><div id="slickgrid_694446auth-name" style="width: 100px; " title=""><span> Name</span><div></div></div><div id="slickgrid_694446auth-admin" style="width: 100px; " title=""><span>Admin</span><div></div></div><div id="slickgrid_694446auth-forecast" style="width: 100px; " title=""><span>Forecast Expense</span><div></div></div><div id="slickgrid_694446auth-expense" style="width: 100px; " title=""><span>View Expense</span><div></div></div><div id="slickgrid_694446auth-people" style="width: 99px; " title=""><span>Forecast People</span><div></div></div><div id="slickgrid_694446auth-viewPeople" style="width: 99px; " title=""><span>View People</span><div></div></div><div id="slickgrid_694446auth-comment" style="width: 99px; " title=""><span>Comment</span><div></div></div><div id="slickgrid_694446auth-delete" style="width: 99px; " title=""><span>Delete Person</span></div></div></div></div><div tabindex="0" style="display: none; "><div><div style="left: -1000px; width: 0px; " unselectable="on"></div></div></div><div tabindex="0" style="top: 26px; height: 272px; width: 100%; "><div style="display: none; width: 101%; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div style="width: 796px; "></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 272px; width: 100%; "><div tabindex="0" hidefocus="" style="width: 796px; height: 257px; "><div style="top:0px"><div>Jessica Silver</div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="blank" src="/css/images/blankBox.png"></div></div><div style="top:25px"><div>Amon Horne</div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="checked" src="/css/images/checkedBox.png"></div><div><img data-state="blank" src="/css/images/blankBox.png"></div></div></div></div></div><div tabindex="0" style="display: none; "><div style="display: none; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 272px; "><div tabindex="0" hidefocus="" style="height: 257px; "></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div></div> </div> <div id="addPersonToWorksetAuthsDialog" title="Add Person to Workset" style="display:none"> <form> <input type="text" id="PersonWorksetAuthSearch" autocomplete="off"><span role="status" aria-live="polite"></span> </form> </div> </div> </div> <div> <div id="tab_workset_comments" style="display: block; "> <div id="commentsContainer"><!-- FORM FOR ADDING COMMENT --> <div> <form> <label for="commentTitle">Title</label> <input type="text" id="commentTitle"> <label for="newComment">Comment</label> <textarea rows="4" id="newComment"> </textarea><br> <button type="button" id="addComment">Add Comment</button> </form> </div> <h3>Comments</h3> <div id="commentsList"><div> </div> </div> </div> </div> </div> </div>
Example
Related patterns
Navigation, in-line
Problem
Users need access to a lot of information at once. This information is made up of very different content types. We need to keep the content within its parent view, allowing users to see a complete hierarchy and valuable metadata relevant to all tabs.
Solution
Typically, landing pages serve as summaries, showing the default tab of the most used and most relevant information. Users navigate across tabs to access less used views of content without having to leave the page.
Rationale
We considered placing all the information on a single long scrolling page, but the tables were deemed too long for efficient reading, and users would lose the context of the breadcrumb, page titles, and metadata as they scrolled down.