jquery Layout中添加tab标签的例子

发布时间:2019-09-30编辑:脚本学堂
本文介绍了jquery Layout中添加tab标签的方法,有关jquery Layout的实例,有需要的朋友参考下。

例子,jquery Layout中添加tab标签 实例代码。
 

复制代码 代码示例:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="增加tab.aspx.cs" Inherits="MyStartEasyUi.tabs.增加tab" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>jquery Layout中添加tab标签_www.jb200.com</title>
    <script src="/jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="/jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
 $(function () {
     $("#cc").layout();
 })
    </script>
</head>
<body id="cc">
    <form id="form1">
 <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
 </div>
 <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
 </div>
 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
 </div>
 <div data-options="region:'west',title:'West',split:true" style="width: 100px;">
 </div>
 <div data-options="region:'center',title:'我是中间面板'" href='/tabs/tabChild/UserManager.htm' style="overflow:hidden">
 </div>
    </form>
</body>
</html>
style="overflow:hidden"是为了兼容google浏览器的滚动条
UserManager.htm内容
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
    <div title="Tab1" style="padding:20px;display:none;"> 
 tab1  
    </div> 
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> 
 tab2  
    </div> 
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> 
 tab3  
    </div> 
</div> 

注意:不能直接按下面方式写,否则layout的布局将不会显示,不能直接包在form中
 

复制代码 代码示例:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="增加tab.aspx.cs" Inherits="MyStartEasyUi.tabs.增加tab" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title></title>
    <script src="/jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="/jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
 $(function () {
     $("#cc").layout();
 })
    </script>
</head>
<body>
<form id="form1">
<div id="cc" filt="true">
 <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
 </div>
 <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
 </div>
 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
 </div>
 <div data-options="region:'west',title:'West',split:true" style="width: 100px;">
 </div>
 <div data-options="region:'center',title:'我是中间面板'" href='/tabs/tabChild/UserManager.htm' style="overflow:hidden">
 </div>
</div>
</form>
</body>
</html>