旺铺html框架代码,阿里旺铺装修代码的fx.accordion组件使用详解及HTML模板

本文具体介绍一下阿里巴巴提供的手风琴效果组件(fx.

Accordion)的使用和列出具体的HTML代码。手风琴组件(fx.

accordion)是从特点上有点跟fx.tabs内容切换组件有点类似，但又有本质上的区别，下文会具体讲解

以一个示例HTML CSS代码来说明一下fx.

accordion组件的实操使用。

小耐给网友做的简单滚动特效示例，(文末有该示例代码链接分享)，所有参数和类属性均用默认值。

上图是手风琴效果结构效果图

上图是手风琴效果的HTML结构

上图是手风琴效果的css代码

fxAccordionDemo容器是设置fx.accordion组件的外层容器，这里基本可以什么都不用设置，当然网友可以根据自己实际情况设置宽度，高度，边框，内外边距等。

.fx-accordion-header类的标签是fx.accordion组件默认的触发标签类，此处的标签相当于fx.tabs组件里面的切换标签，交互动作都是通过鼠标经过或者点击此标签来触发手风琴动作。

.fx-accordion-content类的容器是fx.accordion组件默认切换容器pane的类。这里要注意的一个点是css方面的设置：display:none;

所有的容器默认都不显示，如果不添加这个css设置，在网页加载的时候，所有的容器都会先显示出来，然后就会“闪”走。

对于上面三个部分的设置，小耐有以下贴士：

fxAccordionDemo整体的大小设置，如果发现内容的切换会影响页面其他的布局，最好设置好宽高和overflow:hidden;

.fx-accordion-header标签是交互组件，最好设置适当的大小方便交互。而且相邻标签折叠起来的时候最好设置外边距方便区分。

.fx-accordion-content

因为这个大小直接影响到整个fxAccordionDemo容器的大小，尤其是高度，所以在严谨的布局规划下，给.fx-accordion-content设置高度和宽度是有一定的必要的，如果确实内容比较多难以控制，可以考虑将overflow:hidden设置成overflow:scroll。

.fx-accordion-header跟.fx-accordion-content必须是前后的兄弟关系，即触发标签必须是切换内容容器的前面一个。

fx-accordion代码结构相对比较简单，效果也相对单一，详细的参数属性将在下表列出说明

小耐根据实际情况建议网友，duration默认的500毫秒设置视觉效果上有点卡顿可以对应的设置小一点，例如：

data-widget-config=’{“duration”:500}’

(参数类型是数字，500不需要添加双引号)。

小耐以后会分享更多fx.accordion组件的效果。敬请关注小耐说前端今后的分享。

旺铺html框架代码,阿里旺铺装修代码的fx.accordion组件使用详解及HTML模板相关推荐

Joomla远程代码执行漏洞分析小白版（小宇特详解）
Joomla远程代码执行漏洞分析小白版(小宇特详解) 今天看了一下2021陇原战役WP,在看web方向的时候,看到pop链,想了解一下,后来又看到了p师傅在15年的一篇文章,在这里记录一下.这里主要是 ...
40000+字超强总结？阿里P8把Java全栈知识体系详解整理成这份PDF
40000 +字长文总结,已将此文整理成PDF文档了,需要的见文后下载获取方式. 全栈知识体系总览 Java入门与进阶面向对象与Java基础 Java 基础 - 面向对象 Java 基础 - 知识点 ...
Linux智能家居m0代码,看过来！智能家居4大模块详解
原标题:看过来!智能家居4大模块详解关注我们做新生代程序员! (一)什么是智能家居: 智能家居可以理解为一个控制系统,通过物联网将家里的智能设备连接起来,通过手机控制,远程控制,自动控制,语音控制 ...
c++ 代码_C代码对汇编代码中声明的全局符号的访问方式详解
首先声明一点:符号的值是地址,该地址上存储的值才是变量,不明白的话看另一篇文章: "静态链接与动态链接的宏观概述及微观详解". (1)对非数组符号的访问,编译器生成访存指令,要想寻 ...
如何使用python脚本下载git代码_通过pycharm使用git的步骤(图文详解)
前言使用git+pycharm有一段时间了,算是稍有点心得,这边整理一下,可能有的方法不是最优,欢迎交流,可能还是习惯敲命令去使用git,不过其实pycharm已经帮忙做了很多了,我们可以不用记住那 ...
android代码删除wifi,Android Wifi的forget()操作实例详解_Android_脚本之家
Android Wifi的forget()操作实例详解我们在处理某个Wifi连接时,有时会需要忘掉当前连接的密码信息.执行这项操作,我们需要调用WifiManager::forget()函数: / ...
cs6导航栏代码html,总算认识网页设计教程|Dreamweaver-CS6工具栏详解
总算认识网页设计教程|Dreamweaver-CS6工具栏详解日期:2019-08-31 16:18:59 浏览:194 核心提示:网页设计教程|DreamweaverCS6工具栏详解.为了更好地使 ...
Qt开发技术：图形视图框架（二）场景QGraphicsScene、QGraphicsItem与QGraphicsView详解
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/117660217 长期持续带来更多项目与技术分享,咨询请 ...
阿里云安全增强计算型c6t云服务器参数详解
阿里云服务器安全增强计算型实例规格族c6t实例,依托TPM芯片从底层服务器硬件到GuestOS的启动链均进行度量和验证,实现可信启动,InstanceTypes分享阿里云全增强计算型c6t实例CPU. ...

旺铺html框架代码,阿里旺铺装修代码的fx.accordion组件使用详解及HTML模板

旺铺html框架代码,阿里旺铺装修代码的fx.accordion组件使用详解及HTML模板相关推荐

最新文章

热门文章