您的位置：首页 > 产品设计 > UI/UE

UI的dialogr和easyui中的tab的结合使用

2013-08-16 11:29 351 查看
用了两天的时间，终于给弄出来，项目开发的时候要求打开页面和在浏览器中打开标签一样，可以并列查看的，并且有最大化，最小化，我做的功能页面如下：



主要代码如下：

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/ui.dialogr.js"></script>
<script type="text/javascript" src="js/typeface-0.14.js"></script>
<script type="text/javascript" src="js/museo_700.typeface.js"></script>

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

<link href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.dialogr.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript">

$(function() {

//var myw = screen.availWidth;
// var myh = screen.availHeight;

$("#dialog3").dialogr({ autoOpen: true, maximized:true, minHeight: 140, minWidth: 310, height: 440, width: 810 });
$("#open-btn3").click(function () {
$("#dialog3").dialogr( 'open' );
});
});

</script>

<script type="text/javascript">
$(function(){
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler: function(){
addTab2();
}
}]
});
});

//设置tabs大小
function setTabs(){
var leftWidth=$('#dialog3').width();
var leftHight=$('#dialog3').height();
$("#tt").tabs({height:leftHight-100,width:leftWidth});
}

//添加tab
var index2 = 0;
function addTab2(){
index2++;
$('#tt').tabs('add',{
title:'New Tab ' + index2,
content:'Tab Body ' + index2,
//iconCls:'icon-save',
closable:true,
width:"auto",
height:"auto"
});
}

//点击打开某个页面
var index = 0;
function addTab(){
var ifexist= $('#tt').tabs('exists',"Tab_name");//判断此页面是否打开
if (ifexist==false){ //如果tab里面没有，则新增
$('#tt').tabs('add',{
title:'Tab_name',
content:'<iframe scrolling="yes" frameborder="0" src="t2.htm" style="width:100%;height:98%;"></iframe>', //显示内容
//iconCls:'icon-save',
closable:true
});
}
}
function getSelected(){
var tab = $('#tt').tabs('getSelected');
alert('Selected: '+tab.panel('options').title);
}
function tabhide(){
tab_option = $('#tt').tabs('getTab',"Tab3").panel('options').tab;
tab_option.hide();
}
function tabshow(){
tab_option = $('#tt').tabs('getTab',"Tab3").panel('options').tab;
tab_option.show();
}
</script>
</head>
<body>

<div id="dialog3" title="UI的dialogr和easyui中的tab的结合使用">

<div id="tt" class="easyui-tabs"  fit="true" fitColumns="true" border="true" style="width:auto;height:auto;">
<div title="Tab1" closable="true" style="padding:20px;" border="true" style="width:auto;height:auto;">
<iframe scrolling="yes" frameborder="0" src="t1.htm" style="width:100%;height:98%;"></iframe>
</div>
<div title="Tab3"  closable="true" style="padding:20px;" border="true" style="width:auto;height:auto;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
</table>
</div>
<div title="Tab5 with sub tabs" closable="true"  style="padding:10px;" border="true" style="width:auto;height:auto;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1" style="padding:10px;">Content 1</div>
<div title="Title2" style="padding:10px;">Content 2</div>
<div title="Title3" style="padding:10px;">Content 3</div>
</div>
</div>
</div>

</div>

<a href="#" id="open-btn3" class="open-btn"></span>Open Dialogr 3</a>

<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="setTabs()">setTabs</a>

<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab2()">add tab</a>
<a class="easyui-linkbutton" icon="icon-search" href="javascript:void(0)" onclick="addTab()">open tab</a>
<a class="easyui-linkbutton" href="javascript:void(0)" onclick="tabhide()">hide Tab3</a>
<a class="easyui-linkbutton" href="javascript:void(0)" onclick="tabshow()">show Tab3</a>
<a class="easyui-linkbutton" href="javascript:void(0)" onclick="getSelected()">getSelected</a>
</div>

压缩包我已经上传到资源，包括js,css ,具体的步骤，下载后打开test.html，即可看到效果，需要的可以下载：
http://download.csdn.net/detail/u011518709/5958633
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航