如何使用 Syncfusion ej2 在上下文菜单中创建关闭功能
How to create close functionality in context menu with Syncfusion ej2
我想使用 Syncfusion ej2 在我的选项卡上创建一个具有关闭选项卡功能的右键单击上下文菜单。但是我找不到有关此特定功能的任何文档。
您可以将 Syncfusion 的上下文菜单作为内容模板添加到您的选项卡。希望以下文档对您有所帮助。
上下文菜单文档:
https://ej2.syncfusion.com/angular/documentation/context-menu/getting-started/
我们已经检查了您报告的要求,它可以通过使用打开和关闭方法在我们的上下文菜单中实现。更多详情,请参考以下链接。
API Links : https://ej2.syncfusion.com/documentation/api/context-menu/#open
https://ej2.syncfusion.com/documentation/api/context-menu/#close
文档 Link:https://ej2.syncfusion.com/documentation/context-menu/how-to/open-and-close-contextmenu/
能否请您查看以上链接,如果您需要进一步的帮助,请与我们联系。
此致,
桑吉塔 M
您可以通过传递相应的索引来使用选项卡的“removeTab”public 方法来关闭选项卡。我们已经根据您的要求准备了样品。
<div>
<ejs-tab id="appTab" showCloseButton="true">
<e-tab-tabitems>
<e-tab-tabitem header="ViewBag.headerTextOne" content="@contentOne"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerTextTwo" content="@contentTwo"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerTextThree" content="@contentThree"></e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
<ejs-contextmenu id="contextmenu" target="#appTab" items="ViewBag.menuItems" select="menuClick"></ejs-contextmenu>
</div>
<script>
function menuClick(args) {
if (args.item.text == "Close All") {
var tab = document.getElementById('appTab').ej2_instances[0];
for (i = $('#appTab .e-toolbar-item').length; i >= 0; i--) {
tab.removeTab(i);
}
} else if (args.item.text == "Close This Tab") {
var tab = document.getElementById('appTab').ej2_instances[0];
var activeTab = tab.selectedItem;
tab.removeTab(activeTab);
}
}
</script>
样本:https://www.syncfusion.com/downloads/support/directtrac/298062/ze/TabComponent673764834
https://ej2.syncfusion.com/documentation/api/tab/#removetab
此致,
桑吉塔 M
我想使用 Syncfusion ej2 在我的选项卡上创建一个具有关闭选项卡功能的右键单击上下文菜单。但是我找不到有关此特定功能的任何文档。
您可以将 Syncfusion 的上下文菜单作为内容模板添加到您的选项卡。希望以下文档对您有所帮助。
上下文菜单文档:
https://ej2.syncfusion.com/angular/documentation/context-menu/getting-started/
我们已经检查了您报告的要求,它可以通过使用打开和关闭方法在我们的上下文菜单中实现。更多详情,请参考以下链接。
API Links : https://ej2.syncfusion.com/documentation/api/context-menu/#open https://ej2.syncfusion.com/documentation/api/context-menu/#close
文档 Link:https://ej2.syncfusion.com/documentation/context-menu/how-to/open-and-close-contextmenu/
能否请您查看以上链接,如果您需要进一步的帮助,请与我们联系。
此致, 桑吉塔 M
您可以通过传递相应的索引来使用选项卡的“removeTab”public 方法来关闭选项卡。我们已经根据您的要求准备了样品。
<div>
<ejs-tab id="appTab" showCloseButton="true">
<e-tab-tabitems>
<e-tab-tabitem header="ViewBag.headerTextOne" content="@contentOne"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerTextTwo" content="@contentTwo"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerTextThree" content="@contentThree"></e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
<ejs-contextmenu id="contextmenu" target="#appTab" items="ViewBag.menuItems" select="menuClick"></ejs-contextmenu>
</div>
<script>
function menuClick(args) {
if (args.item.text == "Close All") {
var tab = document.getElementById('appTab').ej2_instances[0];
for (i = $('#appTab .e-toolbar-item').length; i >= 0; i--) {
tab.removeTab(i);
}
} else if (args.item.text == "Close This Tab") {
var tab = document.getElementById('appTab').ej2_instances[0];
var activeTab = tab.selectedItem;
tab.removeTab(activeTab);
}
}
</script>
样本:https://www.syncfusion.com/downloads/support/directtrac/298062/ze/TabComponent673764834 https://ej2.syncfusion.com/documentation/api/tab/#removetab
此致, 桑吉塔 M