<%@ 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. js中，object可以调用style对象，[]不可以调用style对象

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content=&q ...

  2. [转] Maven.pom.xml 配置示例

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  3. [转]NSIS：判断D盘存在与否确定安装路径

    转载自:http://www.flighty.cn/html/bushu/20140704_239.html   现在我们想实现这样的功能: 如果目标机器存在D盘,那么就安装程序到D盘,否则安装在系统 ...

  4. [转]LAMP（Linux-Apache-MySQL-PHP）网站架构

    本文转自 http://www.williamlong.info/archives/1908.html LAMP(Linux-Apache-MySQL-PHP)网站架构是目前国际流行的Web框架,该框 ...

  5. [UE4]通过代码改变材质

    OrangeMaterial = ConstructorStatics.OrangeMaterial.Get(); , OrangeMaterial); 使用到的结构体如下: struct FCons ...

  6. 解决Mac nginx问题 [emerg] 54933#0: bind() to 0.0.0.0:80 failed (13: Permission denied)

    brew services restart nginx Stopping nginx... (might take a while) ==> Successfully stopped nginx ...

  7. https://127.0.0.1:8080/test?param={%22..报错

    使用场景:spring boot 1.5.x,内置的tomcat版本为8.5.1 原因: tomcat自tomcat 8.0.35版本之后对URL参数做了比较规范的限制,必须遵循RFC 7230 an ...

  8. 关于THINKPHP5模型关联的初步理解

    初步理解的意思是,使用最常用的关联模型,然后可以正常运行 还是打个比方 文章表  和文章分类表 一个文章分类可以有多个文章  所以  文章分类模型和文章建立 hasMany的关联 而文章和文章分类表则 ...

  9. 12.mysql高级查询

    1. mysql 支持三种类型的连接查询: on 后面跟的是关联条件 内连接查询 select s.name,c.name from students as s inner join classes ...

  10. 0_Simple__simpleCubemapTexture

    立方体纹理贴图 ▶ 源代码.用纹理方法把元素按原顺序从 CUDA3D 数组中取出来,求个相反数放入全局内存,输出. #include <stdio.h> #include "cu ...