javascript - 重新创建 "Styles"Office 功能区的下拉区域？

Question

我正在尝试重新创建 Office 功能区的“样式”部分: http://www.winsupersite.com/images/reviews/office2007_b2_06.jpg

我喜欢它一开始只有一行，然后您可以滚动浏览这些行，然后单击箭头将所有内容展开成一个表格，如上所示。有没有人对如何重新创建整个交互有任何想法？？

Answer 1

CSS

#container { width:200px;height:50px;overflow-x:hidden;overflow-y:auto;
             border:1px solid black; position:relative }
#expander { position:absolute;right:0;bottom:0px;font-size:10px;margin:0;padding:1;
             border:1px solid black; border-width:1px 0 0 1px }
.item { float:left; font-size:30px;height:40px;width:50px;
         margin:5px; background:gainsboro;text-align:center }

HTML

<div id='container'>
  <div class='item'>A</div>
  <div class='item'>B</div>
  <div class='item'>C</div>
  <div class='item'>D</div>
  <div class='item'>E</div>
  <div class='item'>F</div>
  <div class='item'>G</div>
  <div class='item'>H</div>
  <div class='item'>I</div>
  <div class='item'>J</div>
  <div class='item'>K</div>

  <button id='expander' onclick='expand()'>&#9650;</button>
</div>

JS

function $(id) { return document.getElementById(id); }

function expand() {
  $('container').style.overflow = "auto";
  $('container').style.height = "300px";
  $('container').style.width = "300px";
}

function contract() {
  $('container').style.overflow = "hidden";
  $('container').style.height = "50px";
  $('container').style.width = "200px";
}

...应该让你开始。它有一些你必须弄清楚的错误:

• 何时调用contract()
• 按钮不在滚动条正下方
• 按钮随内容滚动(并消失)