`
kavy
  • 浏览: 891171 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

实现TabView(页签)效果

 
阅读更多

 


页面中用到一个图片： 


 



页面代码如下： 

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head><title>tabview示例(欢迎访问我的博客：http://wallimn.iteye.com)</title>  
  4. <meta http-equiv=content-type content="text/html; charset=GBK">  
  5. <script type="text/javascript">  
  6. function tabclick(obj){  
  7.     if(obj.className=='cur')return;  
  8.     var idx;  
  9.     for(var n=0; n<obj.parentNode.childNodes.length; n++){  
  10.         obj.parentNode.childNodes[n].className="";  
  11.         if(obj==obj.parentNode.childNodes[n])idx=n;  
  12.     }  
  13.     obj.className="cur";  
  14.     var pc = obj.parentNode.nextSibling;  
  15.     while(pc.nodeType==3)pcpc=pc.nextSibling;  
  16.     for(var n=0; n<pc.childNodes.length; n++){  
  17.         pc.childNodes[n].className="hdn";  
  18.     }  
  19.     pc.childNodes[idx].className="";  
  20. }  
  21. </script>  
  22. <style type="text/css">  
  23. .debug{  
  24.     border:1px solid red;  
  25. }  
  26. .hdn{  
  27.     display:none;  
  28. }  
  29. ul.tabbar,ul.tabpage{  
  30.     list-style-type:none;  
  31.     margin:0;  
  32.     font-size:12px;  
  33.     padding:0;  
  34. }  
  35. ul.tabbar{  
  36.     background:url(tabview.gif) repeat-x 0 -68px;  
  37.     height:34px;  
  38. }  
  39. ul.tabbar li{  
  40.     float:left;  
  41.     width:83px;  
  42.     height:34px;  
  43.     line-height:34px;  
  44.     text-align:center;  
  45.     background:url(tabview.gif);  
  46.     cursor:pointer;  
  47.     cursor:hand;  
  48. }  
  49. ul.tabbar li.cur{  
  50.     background:url(tabview.gif) 0 -34px;  
  51. }  
  52. ul.tabpage{  
  53.     border-style:ridge;  
  54.     border-color:#dceefd;   
  55.     border-width:0 2px 2px 2px;  
  56.     height:302px;  
  57.     overflow:hidden;  
  58. }  
  59. ul.tabpage li{  
  60.     height:300px;  
  61.     border-width:0;  
  62.     overflow-y:auto;  
  63. }  
  64. </style>  
  65. </head>  
  66. <body>  
  67. <ul class="tabbar">  
  68.     <li style="margin-left:1em" class="cur" onclick="tabclick(this)">过滤条件</li>  
  69.     <li onclick="tabclick(this)">排序条件</li>  
  70.     <li onclick="tabclick(this)">分　　组</li>  
  71.     <li onclick="tabclick(this)">计算字段</li>  
  72. </ul>  
  73. <ul class="tabpage">  
  74.     <li>显示过滤条件</li>  
  75.     <li class="hdn">显示排序条件</li>  
  76.     <li class="hdn">显示分　　组</li>  
  77.     <li class="hdn">显示计算字段</li>  
  78. </ul>  
  79. </body>  
  80. </html>  



03-25进一步简化了代码，仅使用一个js函数； 
03-27修正了FF及Chrome浏览器中，对于nextSibling的解释为"\n"，然后才是ul，这个很奇怪。 

/***********本人原创，欢迎转载，转载请保留本人信息*************/ 
作者：wallimn　电邮：wallimn@sohu.com　时间：2009-03-23 
博客：http://wallimn.iteye.com 
　　　http://blog.csdn.net/wallimn 
网络硬盘：http://wallimn.ys168.com 
/***********文章发表请与本人联系，作者保留所有权利*************/

分享到：
| java前后台json转换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    TabView的horizontalview实现

    - **自定义视觉效果：** 修改标签页的背景颜色、文字样式、选中状态下的高亮效果等。 - **动画过渡：** 当用户切换标签页时，可以添加平滑的过渡动画，提高用户体验。 - **交互反馈：** 例如，触碰反馈、滑动阻力等...

    QML-TabView竖直方向

    在这个特定的场景中，我们关注的是`TabView`在竖直方向上的实现，即标签是垂直排列的，而不是传统上常见的水平排列。这在某些设计中可能是更理想的选择，例如当空间有限或者为了提供独特的用户体验时。 `TabView`的...

    android仿IOS tabview效果

    在Android开发中，为了实现与iOS类似的TabView效果，开发者经常需要进行自定义视图的构建。TabView在iOS中是一种常见的导航模式，通常用于在底部显示多个标签，用户可以通过点击不同的标签切换不同的内容区域。在...

    TabView的例子

    在网页设计和开发中，`TabView` 是一个常见的组件，它允许用户通过点击不同的标签来切换显示不同的内容区域。...在实际项目中，还可以根据需求添加更多的功能，如动画效果、动态加载内容、触摸设备支持等。

    多文档的Tabview示例

    6. **自定义样式和行为**：根据需求，可能需要调整Tab控件的外观，例如设置Tab位置（顶部、底部、左侧、右侧）、间距、字体样式等，并实现特定的用户交互效果，如拖放Tab页。 7. **测试和优化**：完成基本功能后，...

    Root.TabView

    这个组件的亮点在于其无代码（No-Code）特性，这意味着开发者无需编写复杂的JavaScript或HTML代码就能实现多标签页的交互效果。用户只需要在网页中引入必要的资源，就可以轻松创建和管理标签。 标签"HtmlControl"...

    AndroidTabView:安卓标签视图

    在Android开发中，`AndroidTabView`是一种常见的用户界面组件，用于实现多页面间的切换，类似于浏览器中的标签页。这种视图通常与`ViewPager`配合使用，为用户提供平滑的左右滑动体验，同时在顶部展示一个可点击的...

    模仿新版手Q底部TabView

    通过以上步骤，我们就能实现类似手Q底部TabView的交互效果。这种设计不仅提升了用户的操作体验，还使得应用更具现代感和吸引力。在实际开发中，还可以根据项目需求进行定制化设计，比如增加过渡动画、滑动切换页面等...

    Android实现底部切换标签

    最后，在主Activity中，我们需要设置一个`ViewPager`来展示Fragment，并使用`TabLayout`与`ViewPager`配合，实现底部标签的切换效果。`TabLayout`将自动根据`ViewPager`中的页面数量和`TabPagerAdapter`提供的标题来...

    kotlin实现TabLayout效果模仿今日头条.rar

    本教程将详细讲解如何使用Kotlin语言模仿今日头条、微信等应用的TabLayout效果，实现上下导航，上下选项卡功能以及吸顶效果切换。 首先，我们需要了解TabLayout的基本用法。TabLayout是Google提供的Material Design...

    使用ViewPager来实现Tab效果

    `ViewPager`组件是Google提供的Android Support Library的一部分，它允许用户左右滑动查看多个页面，非常适合用来实现这种效果。本篇文章将深入探讨如何使用`ViewPager`来创建Tab功能，并解决`ImageButton`不可点击...

    VC++动画窗体切换的实现实例

    但是完成的这个小功能对VC++来说效果很好——动画切换窗体的实现，就像现在流行的网页选项卡一样，不过本程序是动态的，数据是动态、窗体切换时候也是动态的，像动画一样，点击如图所示的上一页、下一页的时候、两个...

    标签式布局吧

    在本资源包中，包含了可能与实现标签式布局相关的图片和一个名为"TabView"的文件，这可能是某种自定义的Tab布局实现。 首先，让我们了解标签式布局的基本概念。在Android中，我们通常使用`TabHost`、`TabWidget`和`...

    安卓3D标签云卡片热门相关-标签式布局吧.zip

    总的来说，这个压缩包为那些想在自己的Android应用中实现3D标签云卡片效果的开发者提供了一个起点。虽然所有文件可能无法逐一验证，但通过参考源码和说明，开发者们可以学习到如何创建具有视觉冲击力的用户界面，并...

    页卡滑动， 标题跟着滑动，页卡所在标题始终显示在最显眼位置.zip

    总的来说，实现"页卡滑动，标题跟着滑动，页卡所在标题始终显示在最显眼位置"的效果，需要深入理解Android的UI组件，掌握ViewPager和TabLayout的使用，以及自定义布局和事件处理。这是一个很好的机会来提升你的...

    通过jquery实现tab标签浏览效果

    效果和说明文档：http://www.healdream.com/upLoad/html/jquery/tabs/index_zh.html下载：http://www.51files.com/?2LDPUOZ0F56P52ZLDNYD之前通过yui也实现了相同的功能，但是yui有个比较大的缺点就是js文档太大了，...

    超炫的Tab切签

    在Android开发中，TabLayout是谷歌提供的一个用于创建底部导航栏或者顶部标签页的组件，它结合ViewPager可以方便地实现页面间的切换。然而，Android原生的TabLayout在某些情况下可能无法满足开发者对于视觉效果和...

    Android实现带动画效果的Tab Menu

    - 要为Tab切换添加动画效果，我们可以使用自定义`TabLayout.TabView`，并在`onSelected()`和`onUnselected()`方法中添加相应的动画。 - 动画可以是平移、缩放、旋转等，利用`ObjectAnimator`或`ValueAnimator`来...

    实现滑屏效果

    QQ作为一款流行的即时通讯应用，其最新的版本采用了滑屏效果来连接聊天界面和设置界面，同时也在底部实现了Tab功能。接下来，我们将详细讨论如何通过`Fragment`、滑屏和`Tab`实现这样的功能。 1. **Fragment**: 在...

Magicbox
Global site tag (gtag.js) - Google Analytics