easyui学习笔记11—tab标签页和鼠标动作

这篇我们看看标签页是怎么实现的，默认情况下要靠点击切换标签，也可以用鼠标切换标签选项，就是鼠标放在标签上切换。

首先看看引用的资源文件

1.资源文件

<head>
    <meta charset="UTF-8" />
    <title>Basic Tabs - jQuery EasyUI Demo</title>
    <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" />
    <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" />
    <link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css" />
    <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
</head>

这里我们看到还是这几个文件，这里要说一下jquery.easyui.min.js这个文件是包含所有easyui标签功能的，D:\Serious\phpdev\easyui\jquery-easyui-1.3.5\src这个路径下文件诸如jquery.draggable.js，jquery.linkbutton.js这样的js只是包含单一功能的文件，比jquery.easyui.min.js这个要小。

2.html代码

<body>
    <h2>Basic Tabs</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click tab strip to swap tab panel content.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div id="tt" class="easyui-tabs" style="width:700px;height:auto;">
        <div title="About" style="padding:10px;">
            <p style="font-size:14px;">jQuery EasyUI framework helps you build your web pages 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 Documnets" style="padding:10px;">
            <ul class="easyui-tree" data-options="url:'jquery-easyui-1.3.5/demo/tabs/tree_data1.json',method:'get',animate:true"></ul>
        </div>
        <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px;">
            This is the help content.
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            var tabs = $("#tt").tabs().tabs('tabs');
            for(var  i=0; i<tabs.length; i++){
                tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
                    $('#tt').tabs('select',e.data.index);
                });
            }
        })
    </script>
</body>

这个tabs功能其实也很简单，就是在一个div中包含几个嵌套的div就可以了。class="easyui-tabs"这个就是最主要的功能了，easyui可以将这个div下面的div都识别为标签选项。注意style="width:700px;height:auto;"这个属性，高度是auto的话标签的高度可以根据内容自动调整，如果设置为style="width:700px;height:300px;"这样固定高度的话高度就固定为300px。

注意第二个标签内容是一个树形结构，并且数据还是从其他的文件中取得的，<ul class="easyui-tree" data-options="url:'jquery-easyui-1.3.5/demo/tabs/tree_data1.json',method:'get',animate:true"></ul>这个的意思是使用get方法从jquery-easyui-1.3.5/demo/tabs/tree_data1.json这个文件中取得数据源。来看看那这个文件是什么样子的。

这个文件就存放一个json对象，这里不再深究这个树是怎么实现的。

最后一个标签有点特殊，可以关闭，data-options="iconCls:'icon-help',closable:true"这里设置了一个特性可以关闭。

3.js代码

    <script type="text/javascript">
        $(function(){
            var tabs = $("#tt").tabs().tabs('tabs');
            for(var  i=0; i<tabs.length; i++){
                tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
                    $('#tt').tabs('select',e.data.index);
                });
            }
        })
    </script>

最后看看js标签实现的鼠标放上去切换的动作，首先获取到所有的标签页，然后对每个标签页绑定mouseenter动作，这个动作就是选中当前标签，$('#tt').tabs('select',e.data.index);绑定动作select，第二个参数是当前标签的index。

posted @ 2014-01-25 23:12 nd 阅读(2476) 评论(0) 编辑收藏举报

刷新页面返回顶部

easyui学习笔记11—tab标签页和鼠标动作

公告