公司的业务页面基本上是通过JS配置生成的,通过配置然后解析生成页面,也就是说基本上我们都没有能直接看到的页面。
但是作为一种规范这样也很好维护,业务页面也极少看到第二种写法,个人觉得这样的模式还是很不错的。
但是由于是JS生成的.而项目由使用了easyui的效果.在生成具体的页面的时候发现TAB并没有没easyui渲染。
easyui tabs的基本写法是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tabs - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Tabs</h2>
<div>
<div></div>
<div>Click tab strip to swap tab panel content.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="width:700px;height:250px">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" style="padding:10px">
<ul data-options="url:'../tabs/tree_data1.json',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
</body>
</html>
只要有一个class为easyui-tabs的div,里面嵌入含有属性为title的div。 中间的代码跟你需要展示的代码一样的。
可是在公司的js页面框架下,我发现并没有被easyui渲染.
在查询了官方的文档后.知道有有
$(‘#tabs’).tabs();
的方法,可以实现二次渲染。
然后还知道了一些其他的方法。
编程创建Tabs
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
增加新的 tab panel
// 增加一个新的 tab panel
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true
});
获取选中的 Tab
// 获取选中的 tab panel 和它的 tab 对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的 tab 对象
还有相关的属性 事件 我就懒得去搬了，下个easyui的api慢慢看。