精华内容
下载资源
问答
  • 上面的就是初始的表,接下来我点击“数据表格”的时候,它不会重新打开一个新的页面,是直接嵌套首页的旁边。 先把框架给打好,获取框架的id, <div region="center" title=""> <div clas...

    使用插件和纯JS实现在右边区域打开菜单新增tab

    开发工具与关键技术:MVC,JavaScript
    作者:邱慧敏
    撰写时间:2019.06.16
    

    在这里插入图片描述
    上面的就是初始的表,接下来我在点击“数据表格”的时候,它不会重新打开一个新的页面,是直接嵌套在首页的旁边。
    先把框架给打好,获取框架的id,

    <div region="center" title="">
         <div class="easyui-tabs" fit="true" border="false" id="tabs">
             <div title="首页"></div>
         </div>
    </div>
    <div region="west" class="west" title="树形菜单">
       <ul id="tree"></ul>
    </div>
    <div id="tabsMenu" class="easyui-menu" style="width:120px;">
         <div name="close">关闭</div>
         <div name="Other">关闭其他</div>
         <div name="All">关闭所有</div>
     </div>
    

    引用插件:《注意:引用时要把路径改为自己本地的》

    <script src="~/ifame/js/jquery-1.7.2.min.js"></script>
    <link href="~/ifame/css/easyui.css" rel="stylesheet" />
    <script src="~/ifame/js/jquery.easyui.min.js"></script>
    

    然后开始编打js代码,先把左边的框架给打好,然后把路径放在左边的属性里,而现实在右边的窗口,是获取到“首页”外层的id,然后对id“tabs”进行新增和绑定,在实例化一下“tabsMenu”的点击事件(onclick),这就是简单的描述。
    代码:

     $(function () {
           //动态菜单数据
           var treeData = [{
           //第一个树形菜单
           text: "菜单",
           state: "closed",
           children: [{
                text: "数据表格",//子文件
                state: "",
                attributes: {
                url: "http://www.baidu.com"//页面路径
                }
             }, {
                text: "基础资料",//子文件
                attributes: {
                url: "https://daohang.qq.com/?fr=hmpage"
                 }
               },
              ]
             }
           ];
         //实例化树形菜单
          $("#tree").tree({
             data: treeData,
             lines: true,
             onClick: function (node) {
             if (node.attributes) {
               Open(node.text, node.attributes.url);
               }
             }
          });
       //在右边center区域打开菜单,新增tab
        function Open(text, url) {
        var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';//iframe 是嵌套页面的加载页
           if ($("#tabs").tabs('exists', text)) {
               $('#tabs').tabs('select', text);
               } else {
                       $('#tabs').tabs('add', {
                            title: text,
                            closable: true,
                            content: content
                        });
                    }
                }
                //绑定tabs的右键菜单
                $("#tabs").tabs({
                    onContextMenu: function (e, title) {
                        e.preventDefault();
                        $('#tabsMenu').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        }).data("tabTitle", title);
                    }
                });
                //实例化menu的onClick事件
                $("#tabsMenu").menu({
                    onClick: function (item) {
                        CloseTab(this, item.name);
                    }
                });
                //几个关闭事件的实现
                function CloseTab(menu, type) {
                    var curTabTitle = $(menu).data("tabTitle");
                    var tabs = $("#tabs");
                    if (type === "close") {//关闭
                        tabs.tabs("close", curTabTitle);
                        return;
                    }
                    var allTabs = tabs.tabs("tabs");
                    var closeTabsTitle = [];
                    $.each(allTabs, function () {
                        var opt = $(this).panel("options");
                        if (opt.closable && opt.title != curTabTitle && type === "Other") {
                            closeTabsTitle.push(opt.title);
                        } else if (opt.closable && type === "All") {
                            closeTabsTitle.push(opt.title);
                        }
                    });
                    for (var i = 0; i < closeTabsTitle.length; i++) {
                        tabs.tabs("close", closeTabsTitle[i]);
                    }
                }
            });
    

    效果图:
    在这里插入图片描述

    展开全文
  • 【项目概要】项目中前台页面是EasyUI样式,用户登录后,左侧是导航栏,点击导航栏下内容,在页面右侧显示是具体内容。界面如下图所示:【需求说明】目前项目组长已经实现点击左侧导航菜单某个选项,界面...

    【项目概要】

    项目中前台页面用的是EasyUI样式,用户登录后,左侧是导航栏,点击导航栏下的内容,在页面右侧显示的是具体内容。界面如下图所示:

    d2e4548ba42d05d869e2abdab290a7f3.png

    【需求说明】

    目前项目组长已经实现点击左侧导航菜单下的某个选项,界面右侧出现对应的选项卡内容。而我需要完成的需求是当再次点击右侧已打开的选项卡内容,会回到对应的选项卡内容,而不是总停留在最后打开的一项。

    【实现步骤】

    1.点击,打开对应的选项卡,代码如下:

    //需要显示的具体信息的URL地址

    var content = '';

    //添加选项卡

    $('#tabs').tabs('add', {

    //选项卡标题

    title: title,

    //选项卡内容

    content: content,

    //选项卡面板显示关闭按钮

    closable: true

    });

    2.点击,加上条件判断。判断选项卡是否打开,并跳转到对应的选项卡,代码如下:

    //如果选项卡已经打开

    if($('#tabs').tabs('exists',title)){

    //跳转到指定的选项卡页面

    $('#tabs').tabs('select', title);

    }

    【学习收获】

    1.每一个需求的提出,任务的分配,都是自己学习的机会。

    2.在这一次需求实现的过程中,更多的还是API文档给予自己很大的帮助。其中,对各种控件的方法和属性都有着详细的说明,常用的也有些示例 。通过这次需求实现,至少,Tab选项卡对我来说已经不是新鲜的东西了。

    3.至今,当遇到自己没有接触过的东西,我不再反感或是担心,反而是好奇而充满兴趣。因为,身边有很多巨人,方法也一定很多,根本不用担心不能实现,而主要在于自己能不能想到,敢不敢尝试。有时候,可能会花费时间较长,但这就是我们的积累过程,现在不做、不尝试,等到以后或许会花费更长的时间呢。

    展开全文
  • 只需设置一个URL,该URL将每次打开新选项卡时使用。 右键单击该图标以查看菜单。 您可以使用当前URL或通过从菜单中选择“选项”来输入一个值。 “阻止”子菜单上的选项使您可以阻止创建新的选项卡或窗口。 通过...
  • 2、tab页标题有右键菜单开、全屏打开,刷新。双击标题也可以刷新。 3、可以收放菜单栏。 使用方法: 基本上主框架页面不需要作任何变动了,直接就可以用,就不讲了。 这里主要讲一下使用tabControl: ...
  •  tab页标题有右键菜单开、全屏打开,刷新。双击标题也可以刷新。可以收放菜单栏。  使用方法:  基本上主框架页面不需要作任何变动了,直接就可以用,就不讲了。  这里主要讲一下使用tabControl:  ...
  • 替换您的股票新的选项卡/登录页面为高级用户的意思。 - 带有标签的书签页面(每个标签可以有它自己的... 用供高级用户使用的新标签/目标页面替换库存的新标签/目标页面。 -带有标签的书签页面(每个标签可以具有...
  • JS 打开新窗口

    2019-11-06 15:50:35
    文章目录业务场景情景1html实现js实现方式一方式二方式三情景2...情景2:点击某个导航菜单在当前窗口打开新的TAB页 情景3:点击某个导航菜单后打开新的窗口 情景1 实现这个业务场景又分为2种实现: html实现 <a...

    业务场景

     在前端开发过程中常常会遇到这样的业务场景:

    • 情景1:点击某个导航菜单在当前页面进行跳转
    • 情景2:点击某个导航菜单在当前窗口打开新的TAB页
    • 情景3:点击某个导航菜单后打开新的窗口

    情景1

    实现这个业务场景又分为2种实现:

    html实现

    <a href="https://blog.csdn.net/u011497228/article/details/102922952">跳转至痞子泰的博客</a>
    

    js实现

    方式一

    <button onclick="jump()">跳转至痞子泰博客</button>
    <script>
        function jump() {
            // location在浏览器环境下属于window对象的属性,所以又可写成window.location.href
            const url = "https://blog.csdn.net/u011497228/article/details/102922952";
            location.href = url;
        }
    </script>
    

    方式二

    <button onclick="jump()">跳转至痞子泰博客</button>
    <script>
        function jump() {
            const url = "https://blog.csdn.net/u011497228/article/details/102922952";
            window.open(url);
        }
    </script>
    

    Window open() 方法

    方式三

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <button onclick="jump()">跳转至痞子泰博客</button>
    <script>
        function jump() {
            const url = "https://blog.csdn.net/u011497228/article/details/102922952";
            open_page(url, { a: 1 })
        }
        function open_page(url, param) {
            var form = '<form action="' + url + '"  id="formWinOpen" style="display:none">';
            for (var key in param) {
                form += '<input name="' + key + '" value="' + param[key] + '"/>';
            }
            form += '</form>';
            $('body').append(form);
            $('#formWinOpen').submit();
            $('#formWinOpen').remove();
        }
    </script>
    

    情景2

    实现这个业务场景又分为2种实现:

    html实现

    增加 attribute target

    <a href="https://blog.csdn.net/u011497228/article/details/102922952" target="_blank">跳转至痞子泰的博客</a>
    

    js实现

    方式一

    <button onclick="jump()">跳转至痞子泰博客</button>
    <script>
        function jump() {
            const url = "https://blog.csdn.net/u011497228/article/details/102922952";
            window.open(url,"_blank ");
        }
    </script>
    

    Window open() 方法

    方式二

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <button onclick="jump()">跳转至痞子泰博客</button>
    <script>
        function jump() {
            const url = "https://blog.csdn.net/u011497228/article/details/102922952";
            open_page(url, { a: 1 })
        }
        function open_page(url, param) {
            var form = '<form action="' + url + '" target="_blank" id="formWinOpen" style="display:none">';
            for (var key in param) {
                form += '<input name="' + key + '" value="' + param[key] + '"/>';
            }
            form += '</form>';
            $('body').append(form);
            $('#formWinOpen').submit();
            $('#formWinOpen').remove();
        }
    </script>
    

    情景3

    js实现

    方式一

    <button onclick="jump()">跳转至痞子泰博客</button>
    <script>
        function jump() {
            const url = "https://blog.csdn.net/u011497228/article/details/102922952";
            window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
        }
    </script>
    

    Window open() 方法

    参考资料

    展开全文
  • Newt使用您的特殊书签文件夹填充新的标签页。这使得设置非常容易。这种方法的另一个好处是,您的类别和网站将被同步到您的Google帐户*!这意味着您只需要设置一次Newt,并且所有其他计算机上都将是相同的。您还...
  • tabControl开一个页面实际上是通过JS主显示区域建立一个iframe 把这个iframesrc 指向我们指定的页面。 讨厌BUG: 这个BUG一直都困饶了我好长时间,并且实在不知道怎么解决,甚至连问题出哪里都不知道。 ...
  • 2、tab页标题有右键菜单开、全屏打开,刷新。双击标题也可以刷新。 3、可以收放菜单栏。 使用方法: 基本上主框架页面不需要作任何变动了,直接就可以用,就不讲了。 这里主要讲一下使用tabControl: ...
  • 功能:版本1.3.2代码编辑器上右键单击上下文菜单和所有输入字段以快速输入页面项目名称和替换字符串 改进:版本1.2.4包括错误修复和更快绕过“焦点页面”对话框 改进:版本1.2.3包括错误修复和更快绕过...
  • 将所有图像从一个页面打开到一个新的选项卡窗口。对于像reddit, 4chan这样的关注图像的网站来说是很不错的。 快速访问网站上的高质量图像。 当您厌烦一遍又一遍地打开图像或将图像链接到新的选项卡或窗口中,或者...
  • 要收集打开的标签,请单击右上角屏幕上紫色图标,然后下拉菜单上单击“保存”。 保存数据后将显示它,并且还可以显示每个链接。 通过单击保存文件,它将打开一个包含所有已保存选项卡的新窗口。 夜间按钮模式将...
  • tab页标题有右键菜单开、全屏打开,刷新。双击标题也可以刷新。可以收放菜单栏。 使用方法: 基本上主框架页面不需要作任何变动了,直接就可以用,就不讲了。 这里主要讲一下使用tabControl: ...
  • Ctrl+Tab MRU-crx插件

    2021-03-28 14:53:19
    -为Ctrl + Tab MRU,例如Ctrl + A和Ctrl + Shift + A输入新的组合键。 这些将被写入您的首选项文件。 -从Google Chrome退出。 -现在切换到“文件资源管理器”并打开您的首选项文件:-Windows用户:C:\ Users \ \ ...
  • 使用火狐浏览器,打开保存书签时,默认替换当前标签页,要开标签页只有按住ctrl键再鼠标点击书签,感觉好不方便,今天就把这事给干啦!安装个插件Tab Mix Plus就搞定啦,接下来就说说如何安装这个插件并如何设置...

    使用火狐浏览器,打开保存的书签时,默认替换当前标签页,要新开标签页只有按住ctrl键再鼠标点击书签,感觉好不方便,今天就把这事给干啦!安装个插件Tab Mix Plus就搞定啦,接下来就说说如何安装这个插件并如何设置。

    1. 在浏览器右上角菜单栏处选择附加组件:

    2. 搜索tab mix plus,然后点击安装即可,安装完成后,重启浏览器

    3. 设置tab mix plus,顶部菜单栏处,工具-tab mix plus选项,点击弹出窗口,点击事件tab页面,把书签勾选上就可以啦!



    展开全文
  • New Tab Options-crx插件

    2021-04-03 08:23:27
    语言:English (UK) 设置新标签的URL。...“阻止”子菜单上的选项使您可以阻止创建新的选项卡或窗口。 通过选择“阻止域更改”,您可以防止页面移动到其他站点。 “隐藏广告”可删除Google搜索顶部的广告
  • 打开此标签的新窗口中转到“实验”>“结果”页面。 点击扩展名,所有默认细分都将在新标签页中打开。 问:这有什么意义? 答:可以通过带复选框下拉菜单选择最佳细分。 选择后,用户必须单击更新,并且页面...
  • Clock New Tab(时钟标签页)是一个设计精美起始页,其中包含您可以选项菜单中选择各种时钟。 为了使“起始页”更具自定义性,还增加了选择背景颜色作为时钟设置一部分机会。 起始页面的这种简单设计...
  • tab界面(四种主题)

    2015-11-16 11:12:03
    2、tab页标题有右键菜单开、全屏打开,刷新。双击标题也可以刷新。 3、可以收放菜单栏。 使用方法: 基本上主框架页面不需要作任何变动了,直接就可以用,就不讲了。 这里主要讲一下使用tabControl: ...
  • 前面基础上实现导航跳转功能,点击导航菜单TabPanel中打开一个新Tab在新Tab页中加载对应的页面页面是跳转了可是页面js脚本却没执行。 跳转页面body部分内容很简单 [code="JavaScript"...
  • 对于一些业务场景, 需要点击当前页面按钮,打开一个新的tab页面, 这个时候jeecgboot怎么操作呢, 我们需要面对的问题如下: 1.构建隐藏路由菜单,得到路由名称 2.当前页面进行跳转,两种方式:页面直接跳转,...
  • 亲爱的足球迷,这是我们新的FC Bayern Munich Wallpapers New Tab扩展程序,它提供各种高品质的主题,这些主题将您每次打开新标签时出现。 此外,它提供了各种有用的功能,这些功能将改善您的浏览体验。 将您的新...
  • 将提取所有的facebook标签和任何标题或URL中的“新闻”或“脸谱”选项卡到一个新的窗口。 ✓“ex。” 将所有标签合并到同一个窗口中。这是有效的,因为所有的URL都有一个“。”他们中。 ✓通过使用Tab Extract将...
  • - 当前天气状况(您设置中指定城市) - 电影海报艺术,用于当前和即将到来的电影 - 通过PIXLR Web编辑器内联图像编辑2.2.6变化交换代码要使用React,当多个新的标签页打开时提高响应性。移动菜单栏可掩盖顶部栏。...
  • 3)出现的菜单中,单击“扩展”。 4)从已安装扩展的列表中,找到要卸载的扩展的名称。 5)单击“启用”右边的垃圾桶图标(对于您要卸载的扩展名)。 6)我们的扩展程序(本例中为Migos 4k Wallpapers&...
  • 功能:-过滤搜索选项卡-设置每个会话中打开的选项卡数量限制-达到限制时自动关闭并保存选项卡-达到限制时关闭最旧选项卡-达到限制时关闭最左侧选项卡**更新***-关闭页面的选项,上下文菜单中可用(右键...
  • -出现的菜单中,选择“扩展名”。 -从已安装的应用程序列表中,找到您要卸载的应用程序的名称。 -单击“启用”右边的垃圾桶图标(对于您要卸载的图标)。 -我们的扩展程序应从您的Chrome浏览器中删除。 更简单的...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 173
精华内容 69
关键字:

新的菜单在tab页面打开