easyUi学习之tabs的学习

easyui的选项卡使用:
1.导入需要的css和js
 <head>
	<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/jquery/jquery-easyui-1.2.1/themes/icon.css">
	<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery/jquery-easyui-1.2.1/jquery.easyui.min.js"></script>
	
  </head>

2.页面是有一个button按钮和三个选项卡,点击按钮然后添加一个选项卡,这个选项卡的内容是从另一个页面通过url获取到的,代码如下:
<body>
  <button id='addTabs' onclick='addTestTab1();'>add</button>
    <div id='tt1' class="easyui-tabs" style="height: 250px;width: 500px">
    	<div title='tab1' style="padding: 20px;display: none"  >
    		tab1
    	</div>
    	<div title='tab2' style="overflow: auto;display: none;padding: 20px" closable='true'>
    		tab2
    	</div>
    	<div title='tab3' icon="icon-reload" closable='true' style="padding: 20px;display: none">
    		tab3
    	</div>
    </div>
  </body>


button按钮时间代码如下:
 <script type="text/javascript">
  	function addTestTab(){
  		$("#tt").tabs('add',{
  			title:'保存',
  			content:'测试内容',
  			closable:true,
  			icon:'icon-save',
  			href:'http://localhost:8082/TestEasyUi/tab1.jsp'
  		});
  	}
  </script>
  </script>


ta1.jsp的代码和上面的代码一样,可以直接coppy过去

我用的是eclispe创建的web项目,所以启动服务器,输入路径,结果如下:

easyUi学习之tabs的学习_第1张图片

easyUi学习之tabs的学习_第2张图片

你可能感兴趣的:(easyui)