<%@ 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>layout</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"></link>

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"></link>

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

$(function() {

    $("#aa1").click(function() {

        var til = $(this).text();

        if($("#tt").tabs("exists",til)) {

            $("#tt").tabs("select",til)

        }

        else {

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

                padding:"20px",

                title:til,

                content:'Tab Body',

                href:"EasyUI_test",

                closable:true,

                tools:[{

                    iconCls:'icon-mini-refresh',

                    handler:function(){

                        alert('refresh');

                    }

                }]

            });

        }

    });

    $("#bb1").click(function() {

        var tit = $("#bb1").text();

        if($("#tt").tabs('exists',tit)) {

            $("#tt").tabs("select",tit);

        }

        else {

            $("#tt").tabs("add",{

                title:tit,

                content:"这里是这个页面的内容",

                iconCls:"icon-edit",

                closable:true

            })

        }

    })

    $("#cc1").click(function() {

        var ti = $(this).text();

        if($("#tt").tabs("exists",ti)) {

            $("#tt").tabs("select",ti)

        }

        else {

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

                title:ti,

                content:"个人信息的内容",

                closable:true,

                iconCls:"icon-back",

                padding:"20px"

            })

        }

    })

});

</script>

</head>

<body class="easyui-layout">

    <div data-options="border:false,region:'north',title:'顶部的标题栏',href:'EasyUI_test',split:true" style="padding:5px;height:150px;">这里是一段内容</div>

    <div data-options="border:false,region:'west',title:'左边的标题栏',split:true" style="padding:5px;width:200px;">

        <div id="aa" class="easyui-accordion" data-options="fit:true" style="width:300px;height:200px;">

               <div title="Title1" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">

                <h3 style="color:#0099FF;">你好,我是标题</h3>

                <p>你好, 我是这里的内容, 这里可以写很多</p>

                <a class="easyui-linkbutton" href="http://www.baidu.com">百度链接</a><br>

                <a id="aa1" href="#" class="easyui-linkbutton">用户注册</a><br>

                <a id="bb1" href="#" class="easyui-linkbutton">用户编辑</a><br>

                <a id="cc1" href="#" class="easyui-linkbutton">个人信息</a><br>

            </div>

            <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">

                content2

            </div>

            <div title="Title3" data-options="iconCls:'icon-back'">

                content3

            </div>

        </div>

    </div>

    <div id="tt" class="easyui-tabs" data-options="border:false,region:'center',title:'右边的标题栏, 也是中间的'"

    style="padding:5px;background:#eee;">

        <div title="Tab1" data-options="closable:true,iconCls:'icon-man'" style="padding:20px">

            tab1<br>

            <a href="http://www.sina.com.cn">sina链接</a>

        </div>

        <div title="Tab2" data-options="iconCls:'icon-add',closable:true" style="overflow:auto;padding:20px">

            tab2

        </div>

        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px">

            tab3

        </div>

    </div>

</body>

</html>

EasyUI_tabs和layout布局, 点击链接打开标签, 重复点击选中标签的更多相关文章

  1. Android编程实现点击链接打开APP功能示例

    本文实例讲述了Android编程实现点击链接打开APP功能.分享给大家供大家参考,具体如下: 在Android中点击链接打开APP是一个很常见的需求.例如,电商为用户发送优惠券之后经常会下发一条短信: ...

  2. 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

    问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...

  3. js 实现控制点击事件在特定的毫秒内 只允许点击一次(防止重复点击)

    代码 第一种方法 var forbidRepeartClick = (function(){ var instance = null; var canClick = true; function Bu ...

  4. Echarts如何添加鼠标点击事件？防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

  5. android实现通过浏览器点击链接打开本地应用（APP）并拿到浏览器传递的数据

    为了实现这个功能可折腾了我好久,先上一份代码,经楼主验证是绝对可以用的而且也比较清晰的代码!(ps:还是先剧透下吧,第三方大部分浏览器无法成功.) 点击浏览器中的URL链接,启动特定的App. 首先做 ...

  6. html点击链接打开新窗口

    html标记中格式为<a href="url"> text </a> 此时,内容在原来窗口呈现,如果想新开窗口,可以采用下列方式. 1. <a hre ...

  7. PC点击链接打开QQ聊天窗口

    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号码&site=qq& ...

  8. android--实现通过点击链接打开apk(应用图标在桌面消失)

    首先在AndroidManifest.xml的MAIN Activity下追加以下内容.(启动Activity时给予) ※必须添加项 <intent-filter> <action ...

  9. 怎么在android实现通过浏览器点击链接打开apk

    intent://scan/#Intent;scheme=appname://appname/[频道]/[id];package=com.appname.package;end http://m.ch ...

随机推荐

  1. 【pushlet学习】具体实战

    业务需求: 1. 前端界面需要实时显示空调.照明等设备的状态, 如:空调电压.空调电流.光照强度等,这些量每一个称作一个测点: 2. 不同的用户登录系统后,用户只能看到自己设备的运行状态,而看不到其他 ...

  2. ThinkJava-容器深入研究

    第17章 容器深入研究 17.2 填充容器 package com.cy.container; import java.util.*; class StringAddress { private St ...

  3. 学习笔记之数据库Database

    SQL@Wiki http://en.wikipedia.org/wiki/SQL 一篇文章,掌握所有开源数据库的现状 - AI前线 https://mp.weixin.qq.com/s?__biz= ...

  4. jquey XMLHttpRequest cannot load url.Origin null is not allowed by Access-Control-Allow-Origin

    此篇文章原文地址:http://blog.csdn.net/wangsky2/article/details/22961345 正文: 原文地址:http://stackoverflow.com/qu ...

  5. CA证书扫盲，https讲解

    很多关于CA证书的讲解. 1.什么是CA证书. 看过一些博客,写的比较形象具体. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 B 公司的所有 ...

  6. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  7. Flask 进阶二

    flask中的路由系统: endpoint:反向url地址,默认为视图函数名(url_for). from flask import Flask,url_for app = Flask(__name_ ...

  8. python之ConfigParser

    以前傻傻的不知道还有configParser这么方便的模块,都是一个个的解析转换…… 配置文件xxxxx # 注释1 ;  注释2 [section1] # 节点 k1 = v1    # 值 k2: ...

  9. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. CUDA C Programming Guide 在线教程学习笔记 Part 10【坑】

    ▶ 动态并行. ● 动态并行直接从 GPU 上创建工作,可以减少主机和设备间数据传输,在设备线程中调整配置.有数据依赖的并行工作可以在内核运行时生成,并利用 GPU 的硬件调度和负载均衡.动态并行要求 ...