实现TabView(页签)效果
今天花了点时间,设计了一个网页上用的tabview(页签、tabcontrol)效果。个人觉得实现得比较不错,网页元素用得比较少,js代码也比较精练。测试了一下支持IE、FireFox以及chrome。支持同一页面上多处使用。
没有什么过多说的。先看一下效果。
页面中用到一个图片:
页面代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head><title>tabview示例(欢迎访问我的博客:http://wallimn.iteye.com)</title>
- <meta http-equiv=content-type content="text/html; charset=GBK">
- <script type="text/javascript">
- function tabclick(obj){
- if(obj.className=='cur')return;
- var idx;
- ; n<obj.parentNode.childNodes.length; n++){
- obj.parentNode.childNodes[n].className="";
- if(obj==obj.parentNode.childNodes[n])idx=n;
- }
- obj.className="cur";
- var pc = obj.parentNode.nextSibling;
- while(pc.nodeType==3)pcpc=pc.nextSibling;
- ; n<pc.childNodes.length; n++){
- pc.childNodes[n].className="hdn";
- }
- pc.childNodes[idx].className="";
- }
- </script>
- <style type="text/css">
- .debug{
- border:1px solid red;
- }
- .hdn{
- display:none;
- }
- ul.tabbar,ul.tabpage{
- list-style-type:none;
- margin:0;
- font-size:12px;
- padding:0;
- }
- ul.tabbar{
- background:url(tabview.gif) repeat-x 0 -68px;
- height:34px;
- }
- ul.tabbar li{
- float:left;
- width:83px;
- height:34px;
- line-height:34px;
- text-align:center;
- background:url(tabview.gif);
- cursor:pointer;
- cursor:hand;
- }
- ul.tabbar li.cur{
- background:url(tabview.gif) 0 -34px;
- }
- ul.tabpage{
- border-style:ridge;
- border-color:#dceefd;
- border-width:0 2px 2px 2px;
- height:302px;
- overflow:hidden;
- }
- ul.tabpage li{
- height:300px;
- border-width:0;
- overflow-y:auto;
- }
- </style>
- </head>
- <body>
- <ul class="tabbar">
- <li style="margin-left:1em" class="cur" onclick="tabclick(this)">过滤条件</li>
- <li onclick="tabclick(this)">排序条件</li>
- <li onclick="tabclick(this)">分 组</li>
- <li onclick="tabclick(this)">计算字段</li>
- </ul>
- <ul class="tabpage">
- <li>显示过滤条件</li>
- <li class="hdn">显示排序条件</li>
- <li class="hdn">显示分 组</li>
- <li class="hdn">显示计算字段</li>
- </ul>
- </body>
- </html>
转:http://wallimn.iteye.com/blog/353867
03-25进一步简化了代码,仅使用一个js函数;
03-27修正了FF及Chrome浏览器中,对于nextSibling的解释为"\n",然后才是ul,这个很奇怪。
实现TabView(页签)效果的更多相关文章
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- WPF如何实现一个漂亮的页签导航UI
最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下.经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现.下面介绍一下主要的思路: 1 U ...
- JavaScript选项卡/页签/Tab的实现
选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...
- android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现
## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...
- Tab页签切换
js之tab页签切换效果 现在web网站,很多地都需要用到tab页签. 示例: $(document).ready(function(){ va ...
- Winfon 页签切换及窗体控件自适应
由于公司的业务调整,最近不仅开发bs,还有不熟悉的cs,人手也不足,项目还多,对于cs来说,算是小白,虽然是一个人,也是硬着头皮写,拖拽控件,自定义控件.一个项目下来,对cs有了很深的认识,这里好好感 ...
- easyui tabs页签显示在底部属性
data-options="tabPosition:'bottom'" 如果没有该属性 页签默认显示在最上面,效果如下 当加上了该属性 ,页签会出现在底部
- EBS OAF开发中怎样实现功能页签(Global Tab)
EBS OAF开发中怎样实现功能页签(Global Tab) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...
- Android实现图片滚动控件,含页签功能,让你的应用像淘宝一样炫起来
首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...
随机推荐
- Nodejs学习笔记(十四)— Mongoose介绍和入门
目录 简介 mongoose安装 连接字符串 Schema Model 常用数据库操作 插入 更新 删除 条件查询 数量查询 根据_id查询 模糊查询 分页查询 其它操作 写在之后... 简介 Mon ...
- 虚拟机锁定文件失败,开启模块snapshot失败解决办法
今天由于没有正常关闭虚拟机,导致出现打开虚拟机提示:锁定文件失败 虚拟机开启模块snapshot失败,后来从网上找打了资料解决了.解决办法:一:打开你存放虚拟机系统文件的文件夹,注意,是系统文件,不是 ...
- FreeMarker模板语法
四.FreeMarker模板语法 要编写复杂的模板需要熟悉FreeMarker语法规则,官网有详细说明,中文帮助也比较详细了,下面这些内容是从网上收罗来的,感谢网友的分享,经过整理与修改的内容如下.建 ...
- Leetcode 66 Plus One STL
题意让大数加1 我的做法是先让个位+1,再倒置digits,然后进位,最后倒置digits,得到答案. class Solution { public: vector<int> plusO ...
- 用inno Setup做应用程序安装包的示例脚本(.iss文件)(
用innoSetup做应用程序安装包的示例脚本(.iss文件),具体要看innoSetup附带的文档,好象是pascal语言写的脚本. 示例1(应用程序.exe,客户端安装): ;{089D6802- ...
- Android视觉规范-间距规范与文字规范单位换算(dip、sp与px)
http://blog.csdn.net/shimiso/article/details/29826073 1.dip与px Android工程师在写页面时,margin值的单位是dip,而视觉设计师 ...
- Spark使用总结与分享
背景 使用spark开发已有几个月.相比于python/hive,scala/spark学习门槛较高.尤其记得刚开时,举步维艰,进展十分缓慢.不过谢天谢地,这段苦涩(bi)的日子过去了.忆苦思甜,为了 ...
- 解决adb server端口被占用的问题
先执行adb nodaemon server ,查看adb server的端口是多少 C:\Users\xxxx>adb nodaemon server cannot bind 'tcp:5 ...
- python数据结构之二叉树遍历的实现
本篇是实现二叉树的三种遍历,先序遍历,中序遍历,后序遍历 #!/usr/bin/python # -*- coding: utf-8 -*- class TreeNode(object): def _ ...
- NSBundle 的理解和 mainBundle
http://www.360doc.com/content/15/0629/10/20918780_481405304.shtml