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()
按钮未直接位于滚动条
按钮滚动内容（并消失）

重新创建Office Ribbon的“样式”下拉区域？

1 个答案: