热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

探究HTML5应用中的三种Accordion交互效果

在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。

HTML5应用中accordion三种效果的探索


摘要:Accordion(手风琴,又名"抽屉")效果,因其收展样式形如手风琴而得名。通过层级关系,在信息展示和页面布局上,达到巧妙的平衡。因此,广泛运用于Web以及App交互设计中。在以往的项目中Accordion通常是由Javascript编码实现。本次分享,着重探索两种不依靠JS,采用纯CSS3或HTML5来实现其效果。并对其优缺点作初步的对比。


传统JS实现方式


1、原生Javascript


2、调用JS库文件,jQuery、jQuery Mobile


$'.menu_lev1').clickfunction) {


    var _this=$this),


        _next=_this.next);


    if _next.is':visible')) {


        $'.menu_lev1').removeClass'on');


        $'.menu_lev2').slideUp600);


        _this.addClass'on');


        _next.slideDown600);


    } else {


        _next.slideUp600);


        _this.removeClass'on');


    }


    return true;


});


缺点:效率低,成本高,行为和样式耦合紧密。 


 CSS3 伪类:target


target 是 CSS3 中新增的伪类之一。其能通过锚点,为目标元素添加指定的样式。因其页面中锚点的唯一性,能实现互斥的轮换效果。 


示例代码1:h2一级目录/h2>


ul id="ac1">


      li>二级菜单1/li>


      li>二级菜单2/li>


      li>二级菜单3/li>


 /ul>



ul{ display:none;}


ul:target{display:block;}


示例代码2:c1">一级目录/a>/h2>


ul id="ac1">


      li>二级菜单1/li> 


      li>二级菜单2/li> 


      li>二级菜单3/li>


/ul>


h2>2">一级目录/a>/h2>


ul id="ac2">


      li>二级菜单1/li> 


      li>二级菜单2/li> 


      li>二级菜单3/li>


/ul>


h2>一级目录/a>/h2>


ul id="ac3">


      li>二级菜单1/li> 


      li>二级菜单2/li> 


      li>二级菜单3/li>


/ul>



ul{ display:none;}


ul:target{display:block;}


示例代码3:div id="ac1" >


h2>a >一级目录/a>span>/span>/h2>


ul>


      li>二级菜单1/li>


      li>二级菜单2/li>


/ul>


/div>


div id="ac2" >


          h2>a >一级目录/a>span>/span>/h2>


          ul>


               li>二级菜单1/li>


               li>二级菜单2/li>


          /ul>


/div>


div id="ac3" >


          h2>a 3">一级目录/a>span>/span>/h2>


          ul>


               li>二级菜单1/li>


               li>二级菜单2/li>


          /ul>


/div>



ul{-webkit-transition:all ease 1s; } 


div:target ul{height:400px;}


div:target span{-webkit-transform:rotate90deg);}


Css3 伪类:targetl 缺点:1、不具有二元性。2、过渡动画高度不可自动获取。


HTML5 标签 summary & details


summary & details是HTML5中两个新标签,除了具有很强的语义化之外,它还有令人惊喜的动态效果。因此,抓住这一特性,我们也能很容易的制作出轻量级的手风琴效果来。一般来讲,应该成对使用这两个标签。


 示例代码1:details>


       summary>一级目录/summary>  


       ul>


            li>二级菜单/li>


            li>二级菜单/li>


            li>二级菜单/li>


       /ul> 


/details>


默认样式:可以给details添加open属性,使详情默认展开。 该标签目前仅webkit内核支持。


示例代码2:details>


       summary>一级目录/summary>  


       ul>


            li>二级菜单/li>


            li>二级菜单/li>


            li>二级菜单/li>


       /ul> 


      details>


            summary>二级菜单/summary>  


           ul>


               li>三级菜单/li>


               li>三级菜单/li>


               li>三级菜单/li>


           /ul> 


      /details>  


/details>


说明:可以嵌套使用,形成三级活更多级别菜单。


details summary::-webkit-details-marker {background: red;color: #fff;font-size: 200%;} 


summary::-webkit-details-marker { display: none }


summary:after { content: "+";}


details[open] summary:after {content: "-";}


缺点:1、不具有互斥性。2、目前还不支持过渡动画效果。 


小  结JS实现accordion效果,成本高,效率低,目前而言能实现最为丰富的效果。 CSS3实现accordion效果,成本低,效率高,虽可以实现丰富的动画效果,但不具有二元性。HTML5实现accordion效果,成本低,效率高,但缺乏动画效果,且不具有互斥性。目前支持的浏览器内核有限。


展 望 CSS3 和 HTML5 的引入和发展,某种程度上进一步推进结构,样式,行为三者分离的Web设计的理念。从而减小表现上对JS的依赖,降低网页制作的成本且提高网页运行的效率。 没有理由不期待css3和HTML5不断完善,假以时日能够提供更为强大的功能。


建 议


在含有内容较多的web app中,基于性能优先的原则,适当优雅降级,采用HTML5标签实现Accordion效果。至少Html5doctor作者是比较推崇 Wordpress 中采用的。


转载自:CUBE



推荐阅读
author-avatar
静2502882443
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有