easyui-tabbar右击弹出菜单资源-CSDN下载

共4个文件

html：4个

需积分: 10 173 浏览量 2016-09-14 10:25:07 上传评论收藏 7KB RAR 举报

在IT行业中，jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的UI组件，用于快速构建用户界面。本文将详细探讨如何利用EasyUI的TabPanel（tabs）组件实现一个功能丰富的右键菜单，包括关闭当前、关闭其他、关闭左侧和关闭右侧的选项。让我们了解EasyUI的TabPanel组件。TabPanel是EasyUI中的一个核心组件，它允许开发者在同一个页面上展示多个独立的内容区域，每个区域以标签页的形式展现。用户可以通过点击标签来切换不同的内容，这在Web应用中非常常见，尤其在需要组织大量信息时。要添加右键菜单，我们需要对TabPanel的每个标签页进行操作。在JavaScript中，我们可以利用jQuery的选择器找到每个标签页，并为其绑定右键点击事件。在事件处理函数中，我们将创建一个上下文菜单（即右键菜单），并定义相应的操作，如关闭当前标签、关闭所有其他标签等。具体实现步骤如下： 1. **创建HTML结构**：在页面中，我们需要为TabPanel和右键菜单设置基本的HTML结构。TabPanel通常由`<div class="easyui-tabs">`包裹，而右键菜单则可以使用`<ul>`和`<li>`元素表示菜单项。 2. **初始化EasyUI TabPanel**：通过JavaScript调用`$.fn.tabs()`方法初始化TabPanel，添加所需的标签页。例如： ```javascript $('#tabpanel').tabs({ items: [ // 标签页配置 {title: '标签1', content: '内容1'}, {title: '标签2', content: '内容2'} ] }); ``` 3. **添加右键事件监听**：遍历TabPanel的所有标签页，使用`.on('contextmenu')`方法为每个标签页添加右键点击事件。例如： ```javascript $('#tabpanel').children('.tabs-tab').each(function() { $(this).on('contextmenu', function(e) { e.preventDefault(); // 阻止默认的右键行为 // 显示右键菜单 showMenu(e); }); }); ``` 4. **创建和显示右键菜单**：在`showMenu`函数中，根据需求创建并显示菜单。这通常涉及到动态创建`<ul>`和`<li>`元素，以及为每个菜单项绑定点击事件。例如： ```javascript function showMenu(e) { var menu = '<ul id="contextMenu">'; menu += '<li>关闭当前</li>'; menu += '<li>关闭其他</li>'; menu += '<li>关闭左侧</li>'; menu += '<li>关闭右侧</li>'; menu += '</ul>'; $(menu).appendTo('body') // 添加到页面 .menu() // 初始化菜单组件 .position({ // 定位菜单 my: 'left top', at: 'right top', of: e }) .show(); // 绑定菜单项点击事件 $('#contextMenu').on('click', 'li', function() { switch ($(this).text()) { case '关闭当前': closeCurrentTab(); break; case '关闭其他': closeOtherTabs(); break; case '关闭左侧': closeLeftTabs(); break; case '关闭右侧': closeRightTabs(); break; } $('#contextMenu').hide(); // 隐藏菜单 }); } ``` 5. **实现菜单项的功能**：我们需要编写关闭当前、关闭其他、关闭左侧和关闭右侧的逻辑。这些功能通常通过查询TabPanel的状态，然后调用`tabs('close', index)`方法实现。例如： ```javascript function closeCurrentTab() { var activeIndex = $('#tabpanel').tabs('getSelected').index(); $('#tabpanel').tabs('close', activeIndex); } function closeOtherTabs() { var activeIndex = $('#tabpanel').tabs('getSelected').index(); $('#tabpanel').tabs('tabs').not(':eq(' + activeIndex + ')').each(function() { $('#tabpanel').tabs('close', $(this).index()); }); } function closeLeftTabs() { var activeIndex = $('#tabpanel').tabs('getSelected').index(); $('#tabpanel').tabs('tabs').slice(0, activeIndex).each(function() { $('#tabpanel').tabs('close', $(this).index()); }); } function closeRightTabs() { var activeIndex = $('#tabpanel').tabs('getSelected').index(); $('#tabpanel').tabs('tabs').slice(activeIndex + 1).each(function() { $('#tabpanel').tabs('close', $(this).index()); }); } ``` 以上就是如何使用jQuery EasyUI实现TabPanel的右键菜单功能的详细过程。通过这个功能，用户可以更方便地管理和操作标签页，提高Web应用的用户体验。同时，这也展示了EasyUI的灵活性和可扩展性，开发者可以根据实际需求自定义各种交互和功能。

资源推荐

资源详情

资源评论

收起资源包目录

easyui-tabbar右击弹出菜单.rar （4个子文件）

easyui-tabbar右击弹出菜单

easyui-tab-contextmenu-1.html 4KB

easyui-tab-contextmenu-2.html 4KB

easyui-tab-contextmenu-4.html 7KB

easyui-tab-contextmenu-3.html 4KB

<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <script type="text/javascript"> var myTabs = $("#my-tabs"); $(function(){ myTabs.tabs({ onContextMenu : function (e, title, index) { e.preventDefault(); $('#tab-menu').menu('show', { left : e.pageX, top : e.pageY }).data("tabTitle", title); } }); $("#tab-menu").menu({ onClick : function (item) { closeTab(this, item.id); } }); // 删除Tabs function closeTab(menu, type) { var myTabs = $("#my-tabs"); var allTabs = myTabs.tabs('tabs'); var allTabtitle = []; $.each(allTabs, function (i, n) { var opt = $(n).panel('options'); if (opt.closable){ allTabtitle.push(opt.title); } }); var curTabTitle = $(menu).data("tabTitle"); var currentTab = myTabs.tabs("getTab", curTabTitle); var curTabIndex = myTabs.tabs("getTabIndex", currentTab); if (type === "close-curTab") { if(currentTab.panel("options").closable){ myTabs.tabs("close", curTabIndex); return false; } }else if (type === "close-otherTab") { for (var i = 0; i < allTabtitle.length; i++) { if (curTabTitle != allTabtitle[i]){ myTabs.tabs('close', allTabtitle[i]); } } myTabs.tabs('select', curTabTitle); }else if (type === "close-allTab") { for (var i = 0; i < allTabtitle.length; i++) { myTabs.tabs('close', allTabtitle[i]); } }else if (type === "close-leftTab") { for (var i = 0; i < curTabIndex - 1; i++) { myTabs.tabs('close', allTabtitle[i]); } myTabs.tabs('select', curTabTitle); }else if (type === "close-rightTab") { for (var i = curTabIndex; i < allTabtitle.length; i++) { myTabs.tabs('close', allTabtitle[i]); } myTabs.tabs('select', curTabTitle); }else if(type === "refresh-tab"){ currentTab.panel("refresh"); // 刷新有点问题 } } /*双击关闭TAB选项卡*/ $(".tabs-header").bind('dblclick',function(){ var tab = myTabs.tabs('getSelected'); var index = myTabs.tabs('getTabIndex',tab); if(tab.panel("options").closable){ myTabs.tabs('close',index); } }); }); </script> </head> <body> <h2>Basic Tabs</h2> <p>Click tab strip to swap tab panel content.</p> <div style="margin:20px 0 10px 0;"></div> <div id="my-tabs" class="easyui-tabs" style="width:700px;height:250px" data-options="fit:true, tools:'#tab-tools'"> <div title="About" style="padding:10px"> <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p> <ul> <li>easyui is a collection of user-interface plugin based on jQuery.</li> <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li> <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li> <li>complete framework for HTML5 web page.</li> <li>easyui save your time and scales while developing your products.</li> <li>easyui is very easy but powerful.</li> </ul> </div> <div title="My Documents" data-options="closable:true" style="padding:10px"> My Documents <script> document.write(new Date()); </script> </div> <div title="Help" data-options="iconCls:'icon-help',closable:false" style="padding:10px"> This is the help content. </div> </div>  <div id="tab-menu" class="easyui-menu"> <div id="refresh-tab"> 刷新 </div> <div class="menu-sep"></div> <div id="close-curTab"> 关闭当前 </div> <div id="close-allTab"> 关闭全部 </div> <div id="close-otherTab"> 关闭其他 </div> <div class="menu-sep"></div> <div id="close-leftTab"> 关闭左侧 </div> <div id="close-rightTab"> 关闭右侧 </div> </div>  <div id="tab-tools"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a> </div> <div id="tab-tools-"> <a href="#" class="easyui-linkbutton l-btn l-btn-small" onclick="javascript:addPanel()"> <span class="l-btn-left"> <span class="l-btn-text">Open</span> </span> </a> <a href="#" class="easyui-linkbutton l-btn l-btn-small" onclick="javascript:removePanel()"> <span class="l-btn-left"> <span class="l-btn-text">Close</span> </span> </a> </div> <script type="text/javascript"> var myTabs = $('#my-tabs'); var index = 0; $(function(){ index = myTabs.tabs("tabs").length + 1; }); function addPanel(){ index++; myTabs.tabs('add',{ title: 'Tab'+index, content: '<div style="padding:10px">Content'+index+'</div>' + new Date(), closable: true, tools: [{ iconCls: 'icon-mini-refresh', handler: function() { myTabs.tabs("select", $(this).parent().parent().first().first().text()); var tab = myTabs.tabs('getSelected'); // get selected panel myTabs.tabs('update', { tab: tab, options: { content:'<div style="padding:10px">Content' + index + '</div>' + new Date() } }); // tab.panel('refresh'); } }] }); } function removePanel(){ var tab = myTabs.tabs('getSelected'); if (tab){ var index = myTabs.tabs('getTabIndex', tab); myTabs.tabs('close', index); } } </script> </body> </html>

评论收藏

内容反馈