java-easyui动态添加tab

layout效果

代码:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/demo.css">
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>

<body class="easyui-layout">
   <div id="mymenu" style="width:150px;">
        <div>item1</div>
        <div>item2</div>
    </div>
        <div region="north" title="" split="true" style="height:100px;padding:10px;">
            <div id="top">
             <div id="toppiz">
               <div class="huanying">欢迎 <span id="lblBra">admin</span> 登陆| <span id="clock"></span> </div>
               <div class="anniu">
                       <div  class="bb"><a class="tuichu" href="/epm/s/logout"></a><a id="open_change_password" class="xiugai"  href="javascript:void(0);"></a></div>
               </div>
             </div>
        </div>
        </div>
        <div region="west" split="true" title="菜单" style="width:280px;padding1:1px;overflow:hidden;">
            <div class="easyui-accordion" fit="true" border="false">
                <div title="业务信息" style="overflow:auto;" selected="true">
                    <p onclick="addTab(‘java_test01‘,‘http://www.baidu.com‘)">java_test01</p>
                    <p onclick="addTab(‘java_test02‘,‘http://www.sina.com‘)">java_test02</p>
                </div>
            </div>
        </div>
        <div region="center" title="Main Title" style="overflow:hidden;">
            <div id="tabs" class="easyui-tabs" fit="true" border="false">

            </div>
        </div>
</body>

<script language="JavaScript">
function addTab(title,url){
    if($(‘#tabs‘).tabs(‘exists‘,title)){
        $(‘#tabs‘).tabs(‘select‘,title)
    }else{
        var content = ‘<iframe scrolling="auto" frameborder="0"  src="‘+url+‘" style="width:100%;height:100%;"></iframe>‘;
          $(‘#tabs‘).tabs(‘add‘,{
              title:title,
              content:content,
              closable:true
          });
    }
}
</script>
</html>
时间: 2024-08-04 17:43:49

java-easyui动态添加tab的相关文章

easyUI树形节点点击和动态添加Tab-

easyUI是一种基于jQuery的UI框架,可以直接阅读官网的API教程学习,最近做的项目要用到这个框架,就一边看一边做,先看一下动态添加Tab,实际项目中我们都是希望点击一个节点,增加一个iframe的窗口出来,但是昨天看着API做一个简单的点击A标签增加iframe,死活就是不行,晚上回去终于搞定,看一下官方的例 [html] view plain copy print? function addTab(title, url){ if ($('#tt').tabs('exists', ti

EasyUI创建异步树形菜单和动态添加tab页面

创建异步树形菜单 添加树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写js代码,对菜单的ul标签元素使用tree函数 $('#treeMenu').tree({ url:'tree_data.json' //url的值是异步获取数据的页面地址 }); 写用来异步获取数据的页面(tree_data.json页面).返回的需是Json值(此处用数组代替从数据库获取的数据,以省略连接数

Easy-UI 动态添加DataGrid的Toolbar按钮

在前人的基础上进行的修改,不知道他是从哪里引用来的,所以没有粘贴引用地址. 原代码不支持1.3.6. 修改功能: 1.如果之前没有添加过工具,用这个方法不能添加(已修复): 2.估计是不支持1.3.6,所以在1.3.6下不能删除按钮(已修复): 3.添加了在删除最有一个按钮后把按钮容器删除掉: 插件代码: $.extend($.fn.datagrid.methods, { addToolbarItem: function (jq, items) { return jq.each(function

QML TabView动态添加tab和赋初值

通过调用TabView的addTab  动态添加新的选项卡:Tab addTab(string title, Component component),其中title为选项卡标题,component为选项卡内的组件(var component = Qt.createComponent("souces.qml"). 动态添加完成后,返回一个Tab,通过引用Tab的item可以访问component内的方法和属性 动态添加Tab和给Tab内的component赋初值源码: var comp

JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$("#id").datebox('getValue'),但是这是为什么捏? 经过一翻研究和探索,小菜发现,如果一个input加上class="easyui-datebox&q

easyui 动态添加标签页,总结

步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a> <a href="#" class="easyui-linkbut

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

转自:http://www.cnblogs.com/sunjie9606/archive/2012/09/13/2683636.html 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等 处理方法: 在html片段加载完毕后使用 Js代码 $.parser.parse(context) 即可重新渲染. 实现原理: 首先附上jquery.parser.js的源码 Js代码 (function($){ $.parser

Android中动态添加tab

来源过于啰嗦,这里只有简化后的. 转载请注明出处  http://www.cnblogs.com/zaiyuzhong/p/add-tab-dynamic-in-android.html 建立对应的布局配置:/res/layout/activity_main.xml <?xml version="1.0" encoding="utf-8"?> <TabHost android:layout_width="fill_parent"

New UI-Java代码动态添加控件或xml布局

New UI-Java代码动态添加控件或xml布局  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://blog.