...
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
Code Block |
---|
<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
...