曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的JS库才能达到这个功能效果。下面学步园小编来讲解下如何使用details元素和summary元素?
如何使用details元素和summary元素
—WHATWGHTML5specification
理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在我们可以放入我们任何想放入的内容.
浏览器的支持情况
在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持元素.Opera很快就会支持Operawillsupportitsoon,让我们来用chrome演示这种效果吧.
这里有两个相关的元素:和可选的
让我们来看下面的代码:
Show/Hideme
Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.
你可以通过下面的链接察看效果seethisinactionoveratjsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.
OPen属性
在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将默认的视觉属性通过布尔值作修改,让其当我们加载页面的时候是展开的:
Show/Hideme
Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.
注意,这里并没有closed属性,因为只要你移除open属性,执行的就是closed属性效果。
元素
我们已经简要的看了
的作用。因为它是短语内容,我们可以使用内联(inline)标签。我们为什么会有这种想法呢?也许这样子能更方便的通过而外样式控制显示效果或者像spec建议的那样:为一个表单元素增加一个标签。如果他能生效的话,至少能让我很顺手:Name:
常理看,我们点击summary的任何位置都应该展开元素的内容。但是在这个例子中,我们点击并没有展开内容,因为你点击的是他会将焦点放到标签-即使那部分内容被隐藏在标签。
很明显,在这点需要更好的声明,你认为这个地方应该发生什么事情呢?可能某个浏览器生产商能看一下这个效果。
元素多层嵌套
你可以在中嵌套,可以完美的案例查看这个效果:
Question1
Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.Vestibulumtortorquam,feugiatvitae,ultricieseget,temporsitamet,ante.Doneceuliberositametquamegestassemper.Aeneanultriciesmivitaeest.Maurisplacerateleifendleo.Quisquesitametestetsapienullamcorperpharetra.Vestibulumeratwisi,condimentumsed,commodovitae,ornaresitamet,wisi.Aeneanfermentum,elitegettinciduntcondimentum,erosipsumrutrumorci,sagittistempuslacusenimacdui.Donecnoneniminturpispulvinarfacilisis.Utfelis.
Relateddocuments
Loremipsumdolorsitamet,consectetueradipiscingelit.
Aliquamtinciduntmauriseurisus.
Loremipsumdolorsitamet,consectetueradipiscingelit.
Aliquamtinciduntmauriseurisus.
使用案例
在哪些情况时会用到?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表,所以是这一效果的最佳效果。
考虑到这一系列内容,它可能被固定在某一区域,当我们滚动内容的时候。像这样子?
你也可以使用来操作博客的评论内容,用户简介,下载列表,复杂的表单,或者像规范中描述下面的应用:
如何使用details元素和summary元素
Anexampleofthe
实际上,只要你看看我写的wordpress,会发现有大量的使用的机会。让我们在评论中了解一下你的观点和想法。
样式格式化
你如何对这个定义样式?同时,在webkit浏览器中我们可以使用伪类样式::-webkit-details-marker。你可以看到这个小的案例:
detailssummary::-webkit-details-marker{
background:red;
color:#fff;
font-size:500%;
}
我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们如何将默认的组件Icon自定义呢?那就是用属性选择器(attributeselector),你可以用来检测元素是打开的还是关闭的,然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果,使用:afterpseudo-element元素定义成我们喜欢的背景图片:
summary::-webkit-details-marker{
display:none
}
summary:after{
background:red;
border-radius:5px;
content:"+";
color:#fff;
float:left;
font-size:1.5em;
font-weight:bold;
margin:-5px10px00;
padding:0;
text-align:center;
width:20px;
}
details[open]summary:after{
content:"-";
}
在上面的例子中,我们使用文本“+”和“-”来定义这个组件的状态,根据你的设计需要,你可能希望使用:before来代替:after,这两个为类元素都可以使用image.
details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生,下面是我们装饰后的效果,下面是截屏效果:
DetailselementinChrome
Styled
如果我们可以用过css的动画效果来修饰打开和关闭时的状态,这样设计就更完美了,但是目前为止我们还没有办法做到这点。
可访问性
不幸的是在我们写这篇文章的时候,h还无法通过键盘访问,SteveFaulkner写到:
Bottomlineis,currentlynokeyboardsupportandnousableinformationexposedtoassistivetechnology.
自己试一下,如果你使用鼠标打开元素,你可以使用键盘到达内容部分,但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态,不过我们相信这个小国很快会被改进。
向后兼容
在我们抱怨其在IE6中无法生效之前,感谢这些聪明的人们,我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站veryhandycollectionofcross-browserpolyfills,这两个都需要jQuery:
Another
更新:感谢的评论。上面的代码并不是100%可靠,因为他在某些chrome版本下会失败。你可以使用thisModernizrsnippet。
我们为何使用这种类型的交互?
言归正传,为什么会有这个效果在HTML5中?就像其它HTML5的效果,使用这种效果能够更简单。比如时间选择,Datepickers,sliders,progressindicators,现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么?如果是tabs标签那就好了。
以上就是关于“如何使用details元素和summary元素”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!