仓酷云

标题: 来讲讲：HTML5教程:怎样利用details元素和summary元素 [打印本页]
作者: 不帅    时间: 2015-1-15 23:14
标题: 来讲讲：HTML5教程:怎样利用details元素和summary元素
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。
网页制造Webjx文章简介：details和summary元素.
曾多少时,我们创立能够显现/埋没一些内容的小组件时,我们不能不利用Javascript.偶然候你大概不能不为这个小功效,下载一个完全的JS库才干到达这个功效效果.为上面的时候喝彩吧!HTML5供应了创立这类拖拽特性的办法,我们仅仅必要复杂的几行html代码就可以取得这类效果(从今朝而言,这类效果还依附于利用的扫瞄器,固然,在不久的未来,这大概不是成绩).上面让我们一同来看看<detail>元素.
上面就是标准中的形貌
Thedetailselementrepresentsadisclosurewidgetfromwhichtheusercanobtainadditionalinformationorcontrols.
—WHATWGHTML5specification
实际上我们能够用它创立那种折叠的小组件,用户能够有翻开和封闭的交互.在<details>我们能够放进我们任何想放进的内容.
扫瞄器的撑持情形

在我们入手下手之前,实践一点,让我们看看今朝扫瞄器的撑持情形,今朝只要chrome撑持<details>元素.Opera很快就会撑持Operawillsupportitsoon,让我们来用chrome演示这类效果吧.
<details的利用办法

这里有两个相干的元素:<details>和可选的
让我们来看上面的代码:
1234<details><summary>Show/Hideme</summary><p>Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.</p></details>你能够经由过程上面的链接观察效果seethisinactionoveratjsbin.这是一个复杂的例子可是能够将效果完善展示的代码,没有任何Javascript.
OPen属性

在下面的例子中,在页面加载的时分内容是埋没的。我们能够将<detail>默许的视觉属性经由过程布尔值作修正，让其当我们加载页面的时分是睁开的：
1234<detailsopen><summary>Show/Hideme</summary><p>Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.</p></details>注重，这里并没有closed属性，由于只需你移除open属性，实行的就是closed属性效果。
<summary>元素
我们已扼要的看了
的感化。由于它是短语内容，我们可使用内联(inline)标签<span;>。我们为何会有这类设法呢？大概如许子能更便利的经由过程而外款式把持显现效果大概像spec倡议的那样：为一个表单位素增添一个<label>标签。假如他能失效的话，最少能让我很随手：
1234<details><summary><labelfor="name">Name:</label></summary><inputtype="text"id="name"name="name"/></details>常理看，我们点击summary的任何地位都应当睁开<detail>元素的内容。可是在这个例子中，我们点击<summary>并没有睁开内容，由于你点击的是<label>他会将核心放到<input>标签-即便那部份内容被埋没在<details>标签。
很分明，在这点必要更好的声明，你以为这个中央应当产生甚么事变呢？大概某个扫瞄器临盆商能看一下这个效果。
<details>元素多层嵌套

你能够在<details>中嵌套<details>，能够完善的案例检察这个效果：
12345678910111213<details><summary>Question1</summary><p><strong>Pellentesquehabitantmorbitristique</strong>senectusetnetusetmalesuadafamesacturpisegestas.Vestibulumtortorquam,feugiatvitae,ultricieseget,temporsitamet,ante.Doneceuliberositametquamegestassemper.<em>Aeneanultriciesmivitaeest.</em>Maurisplacerateleifendleo.Quisquesitametestetsapienullamcorperpharetra.Vestibulumeratwisi,condimentumsed,<code>commodovitae</code>,ornaresitamet,wisi.Aeneanfermentum,elitegettinciduntcondimentum,erosipsumrutrumorci,sagittistempuslacusenimacdui.<ahref="#">Donecnonenim</a>inturpispulvinarfacilisis.Utfelis.</p><details><summary>Relateddocuments</summary><ul><li><ahref="#">Loremipsumdolorsitamet,consectetueradipiscingelit.</a></li><li><ahref="#">Aliquamtinciduntmauriseurisus.</a></li><li><ahref="#">Loremipsumdolorsitamet,consectetueradipiscingelit.</a></li><li><ahref="#">Aliquamtinciduntmauriseurisus.</a></li></ul></details></details>利用案例

在哪些情形时会用到<details>?FAQ表多是我们开始出现的设法。人人常常利用手风琴效果是用在FAQ列表，以是<details>是这一效果的最好效果。
思索到这一系列内容，它大概被流动在某一地区，当我们转动内容的时分。像如许子？
你也能够利用<details>来操纵博客的批评内容，用户简介，下载列表，庞大的表单，大概像标准中形貌上面的使用：
来讲讲：HTML5教程:怎样利用details元素和summary元素
登录/注册后可看大图

Anexampleofthe<details>elementfromthespec实践上，只需你看看我写的wordpress，会发明有大批的利用<details>的时机。让我们在批评中懂得一下你的概念和设法。
款式格局化

你怎样对这个界说款式？同时，在webkit扫瞄器中我们可使用伪类款式::-webkit-details-marker。你能够看到这个小的案例：
12345detailssummary::-webkit-details-marker{background:red;color:#fff;font-size:500%;}我们也能够将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们怎样将默许的组件Icon自界说呢？那就是用属性选择器(attributeselector),你能够用来检测<details>元素是翻开的仍是封闭的，然后为其界说一个符合的背景图片。我们咋上面的例子中作了一个相似的效果，利用:afterpseudo-element元素界说成我们喜好的背景图片：
12345678910111213141516171819summary::-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]属性选择器能制造良多成心思的大概性。由于我们是好大夫，上面是我们粉饰后的效果，上面是截屏效果：
来讲讲：HTML5教程:怎样利用details元素和summary元素
登录/注册后可看大图

Styled<details>elementinChrome假如我们能够用过css的动画效果来润色翻开和封闭时的形态，如许计划就更完善了，可是今朝为止我们还没有举措做到这点。
可会见性

不幸的是在我们写这篇文章的时分，<details>h还没法经由过程键盘会见，SteveFaulkner写到：
Bottomlineis,currentlynokeyboardsupportandnousableinformationexposedtoassistivetechnology.
本人试一下，假如你利用鼠标翻开<details>元素，你可使用键盘抵达内容部分，可是你没法利用键盘翻开和封闭地区。以是今朝这并非幻想形态，不外我们信任这个小国很快会被改善。
向后兼容

在我们埋怨其在IE6中没法失效之前，感激这些伶俐的人们，我们能够供应文雅的像狗兼容。这些效果也被列鄙人面的网站veryhandycollectionofcross-browserpolyfills，这两个都必要jQuery:

12345<script>if(!(openindocument.createElement(details))){alert("Nodetails");}</script>更新：感激的批评。下面的代码并非100%牢靠，由于他在某些chrome版本下会失利。你可使用thisModernizrsnippet。
我们为什么利用这类范例的交互？

言回正传，为何会有这个效果在HTML5中？就像别的HTML5的效果，利用这类效果可以更复杂。好比工夫选择，Datepickers,sliders,progressindicators,如今这类手风琴效果就能够在不利用JavaScript的情形下更便利实行。谁能想到下一个是甚么？假如是tabs标签那就行了。
总结

在这篇文章中，我们论述了怎样往利用<details>和<summary>元素。<details>是一个新元素，经由过程和<summary>元素经由过程扫瞄器能够制造手风琴的交互效果。
今朝，<details>只能在Chrome事情，不外我们等候这会在不久的未来有所改动。这里只要一个csstrick我们可使用::-webkit-details-marker,可是我们具有良多的别的css。让我们在批评中晓得关于<details>元素你在这方面的履历和设法。
中文原文：details和summary元素
英文原文：Thedetailsandsummaryelements

</p>
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
作者: 蒙在股里    时间: 2015-1-17 20:51
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。
作者: 再见西城    时间: 2015-1-26 22:47
滚动条)层属性--溢出(visible/hidden/scroll/auto)
作者: 小妖女    时间: 2015-2-5 06:12
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
作者: 小女巫    时间: 2015-2-11 07:54
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
作者: 飘灵儿    时间: 2015-3-2 01:05
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
作者: 再现理想    时间: 2015-3-11 04:05
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。
作者: 活着的死人    时间: 2015-3-25 08:17
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2