17EasyUI 布局- 动态添加标签页(Tabs)

简介: 17EasyUI 布局- 动态添加标签页(Tabs)

我们将使用 iframe 动态地添加显示在一个页面上的 Tabs。 当点击添加按钮,一个新的 tab 将被添加。如果 tab 已经存在,它将被激活。

代码:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="keywords" content="jquery,ui,easy,easyui,web">
  <meta name="description" content="easyui help you build your web page easily!">
  <title>jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
  <script>
    function addTab(title, url){
      if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
      } else {
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
          title:title,
          content:content,
          closable:true
        });
      }
    }
  </script>
</head>
<body>
  <div style="margin-bottom:10px">
    <a href="#" class="easyui-linkbutton" "addTab('google','http://www.google.com')">google</a>
    <a href="#" class="easyui-linkbutton" "addTab('jquery','http://jquery.com/')">jquery</a>
    <a href="#" class="easyui-linkbutton" "addTab('easyui','http://jeasyui.com/')">easyui</a>
  </div>
  <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
    </div>
  </div>
</body>
</html>
目录
相关文章
|
JavaScript 容器
47EasyUI 窗口- 窗口与布局
47EasyUI 窗口- 窗口与布局
46 0
|
前端开发 Windows
19EasyUI 布局- 创建 XP 风格左侧面板
19EasyUI 布局- 创建 XP 风格左侧面板
57 0
18EasyUI 布局- 添加自动播放标签页(Tabs)
18EasyUI 布局- 添加自动播放标签页(Tabs)
45 0
|
容器
16EasyUI - 创建标签页(Tabs)
16EasyUI - 创建标签页(Tabs)
47 0
15EasyUI 布局- 创建折叠面板
15EasyUI 布局- 创建折叠面板
61 0
14EasyUI 布局- 在面板中创建复杂布局
14EasyUI 布局- 在面板中创建复杂布局
45 0
|
容器
13EasyUI 布局- 为网页创建边框布局
13EasyUI 布局- 为网页创建边框布局
41 0
|
移动开发 JavaScript 前端开发
easyui01(基本布局)
easyui01(基本布局)
|
JavaScript 测试技术 索引
Easyui 关闭jquery-easui tab标签页前触发事件
Easyui 关闭jquery-easui tab标签页前触发事件
118 0
|
JavaScript 前端开发 API
easyui布局——【入门】
easyui布局——【入门】
easyui布局——【入门】