重新创建 Office 功能区的“样式”下拉区域？答案

【问题标题】：Recreate "Styles" drop down area of Office Ribbon?重新创建 Office 功能区的“样式”下拉区域？
【发布时间】：2010-10-28 10:03:44
【问题描述】：

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

我喜欢它从只有一行开始的方式，然后您可以滚动浏览各行，然后单击箭头将所有行展开到上面的表格中。有人对如何重新创建整个交互性有任何想法吗？

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-plugins

【解决方案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>

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

【讨论】：