Tab
16 Aug 20182 minutes to read
Tab is a collection of control groups
which enables you to organize related commands into single view. Tabs can be added to Ribbon using tabs
property. id
& text
properties are used to set unique ID and header text to Tab. The manipulation of given text tab in the ribbon control can be done by using addTab
, removeTab
, hideTab
,
showTab
methods and tabAdd
, tabCreate
, tabRemove
, tabClick
and tabSelect
events.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%><%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %><%@ page import="com.syncfusion.*" %><%@ page session="false" import="java.util.ArrayList" %><%@ page session="false" import="java.util.Iterator" %><%@ page session="false" import="org.json.simple.parser.JSONParser" %>
<link rel="stylesheet" href="Content/ejthemes/ribbon-css/ej.icons.css" >
<body>
<ul id="ribbonmenu">
<li>
<a>FILE</a>
<ul>
<li>
<a>New</a>
</li>
<li>
<a>Open</a>
</li>
</ul>
</li>
</ul>
<div id="sendReceive">
Send/Receive All Folders
</div>
<div class="cols-sample-area"><%
JSONParser parser = new JSONParser();
request.setAttribute("new_buttonSettings",parser.parse("{\"contentType\": \"imageonly\",\"imagePosition\": \"imagetop\",\"prefixIcon\": \"e-icon e-ribbon e-new\" }"));
%>
<ej:ribbon id="defaultRibbon" width="65%" isResponsive="true">
<ej:ribbon-applicationTab type="menu" menuItemID="ribbonmenu"></ej:ribbon-applicationTab>
<ej:ribbon-tabs>
<ej:ribbon-tab id="home" text="Home">
<ej:ribbon-tab-groups>
<ej:ribbon-tab-group text="New" alignType="rows">
<ej:ribbon-tab-group-contentCollection>
<ej:ribbon-tab-group-content>
<ej:ribbon-tab-group-content-groups>
<ej:ribbon-tab-group-content-group id="new" text="New" toolTip="New" buttonSettings="${new_buttonSettings}"></ej:ribbon-tab-group-content-group>
</ej:ribbon-tab-group-content-groups>
<ej:ribbon-tabs-groups-content-defaults type="button" height="70" width="60"></ej:ribbon-tabs-groups-content-defaults>
</ej:ribbon-tab-group-content>
</ej:ribbon-tab-group-contentCollection>
</ej:ribbon-tab-group>
</ej:ribbon-tab-groups>
</ej:ribbon-tab>
<ej:ribbon-tab id="sendrec" text="Send/Receive">
<ej:ribbon-tab-groups>
<ej:ribbon-tab-group type="custom" text="Send/Receive" contentID="sendReceive">
</ej:ribbon-tab-group>
</ej:ribbon-tab-groups>
</ej:ribbon-tab>
</ej:ribbon-tabs>
</ej:ribbon>
</div>
</body>
<style>
.cols-sample-area{
width:80%;
}
</style>
</html>