easyui Tabs 小记

公司的业务页面基本上是通过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慢慢看。

发表评论

电子邮件地址不会被公开。 必填项已用*标注