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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

ndblog 2014-01-25 23:12:00 浏览318
展开阅读全文

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

首先看看引用的资源文件

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。

 

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

网友评论

登录后评论
0/500
评论
ndblog
+ 关注