easyui后台界面如何添加选项卡(Tab)

在使用easyui搭建好后台的界面之后，接下来需要做的就是为每个菜单项添加相应的界面来实现和数据的交互。今天将介绍如何实现点击某个菜单项来实现在后台显示出响应的界面。

首先展示下最终的效果：通过点击“新增新闻”，然后在中部显示新增新闻的对应页面

实现的代码很简单：

javascript代码：

                /**添加选项卡方法*/function addTab(title,url){url = url;var tab=$('#tt').tabs('exists',title);    //判断tab是否已经存在if(tab){                                  //防止tab重复添加$('#tt').tabs('select',title);        //如果已经存在tab，则刷新该界面}else{                                    //如果不存在该界面则加载$('#tt').tabs('add',{title:title,content:"<iframe width='100%' height='100%' frameborder='0' scrolling='yes'  src='"+url+"'></iframe>",closable:true          //true表示在tab上显示一个关闭按钮});}}

页面相关代码：

                <div id="tt" class="easyui-tabs" fit="true" border="false">   <div title="主页"><iframe width='100%' height='100%'  id='iframe' frameborder='0' scrolling='no'  src='blank.jsp'></iframe></div> </div>

               <div title="新闻管理" data-options="iconCls:'icon-lesson'" style="padding:10px;"><div class="menu-div" οnmοuseοver="omo(this,0)" οnmοuseοut="omo(this,1)" οnclick="addTab('我的页面','/mssh/my.jsp')"><span class="icon-span">&nbsp;&nbsp;&nbsp;</span>  新增新闻</div></div>

easyui后台界面如何添加选项卡(Tab)相关推荐

wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮
在WordPress编辑器HTML模式界面中添加按钮一文中,我大致介绍了怎么在后台添加一些自定义的按钮,本文则更为详细全面的对wordpress后台编辑器HTML模式下的按钮自定义进行详解,以让开发 ...
Easyui后台管理界面设计
1 Easyui 后台管理界面登陆设计 @{Layout = null; }<!DOCTYPE html><html> <head><meta name=&q ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理 http:// ...
java 动态加载ztree_JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建...
1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统
ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-前言与目录(持续更新中...) 开发工具:VS2015(2012以上)+SQL2008R2以上数据库您可以有偿获取一份最新源码联 ...
JQuery EasyUi之界面设计——前言与界面效果（一）
为什么80%的码农都做不了架构师?>>> 如果冯巩的开场白是"观众朋友们,我想死你们了",那么我的开场白是"最近一直很忙,很久没有发文了" ...
solr后台界面介绍——（十一）
1.加一个collection的方法复制solr-home下的collection1,修改名字为collection2.并且修改collection2文件夹中配置文件core.properties中 ...
Sharepoint学习笔记—Ribbon系列-- 2. 在Ribbon中添加新Tab
有了上面的基础,我们来看看如何向Sharepoint网站的Ribbon中添加我们定义的Tab. 直接进入操作步骤一.创建 SharePoint 项目要添加新选项卡,应首先创建一个空白 ShareP ...
后台界面设计之表格设计规范参考
表格是后台界面中占比十分之重的一个组件,表格中内容的布局.数据的展示.操作项的罗列--每一处设计都值得细细斟酌. 前言表格是后台界面中占比十分之重的一个组件,常以为表格设计十分简单,仔细分析后,会发 ...

easyui后台界面如何添加选项卡(Tab)

easyui后台界面如何添加选项卡(Tab)相关推荐

最新文章

热门文章