100% of the width of its parent container, adapts to any sized container.
Controls can be above, below, or right/left.
Items width must be set in pixels (they can’t be %, no way to inherit container width from parent’s parent)
Ideally it would not have half-items visible, in JS remove the extra bit or expand the units to fill more space?
使用文档
宽度属性为其父容器的100%,适应于任何尺寸的容器。
控制组件可以在上方,下方或右侧/左侧。
元素宽度必须以像素为单位(不能设为百分比,无法从父级的父级容器继承宽度)
理想情况下,不会显示半个元素,使用JS删除多余的空间或者填充更多的空间也许是个方法?
Brainstorming common markup for tabs, carousel, toggle, and accordion using the html5 syntax.
使用html5语法来设计标签页,走马灯,切换块和手风琴的通用标签。
标签页(tabs)
1 2 3 4 5 6 7 8 9 10 11 12
<divclass="section tabs"> <divclass="control"> <ul><!-- menu? --> <li>Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> </div> <divclass="details open"> Content Area </div> <divclass="details"> Content Area </div> <divclass="details"> Content Area </div> </div>
走马灯(Carousel)
1 2 3 4
<divclass="section carousel"> <divclass="control"> radio buttons for section and buttons for left/right or top/bottom scroll </div> <divclass="details open"> Content Area </div> </div>
切换块(toggle block)
1 2 3 4 5 6
<divclass="section toggle"> <divclass="control"> <h1>Clicking on me toggles the display of the content area</h1> </div> <divclass="details open"> Content Area </div> </div>
<divclass="section accordion"> <divclass="section"> <divclass="control"> <h1>Clicking on me opens the adjacent accordion content area</h1> </div> <divclass="details open"> Content Area </div> </div> <divclass="section"> <divclass="control"> <h1>Clicking on me opens the adjacent accordian content area</h1> </div> <divclass="details"> Content Area </div> </div> <divclass="section"> <divclass="control"> <h1>Clicking on me opens the adjacent accordian content area</h1> </div> <divclass="details"> Content Area </div> </div> </div>