javascript - 带有上下文菜单和按需表单的 float 按钮

Question

我正在尝试创建将 float 在内容之上的 html 表单。按钮将 float 在内容上，单击每个按钮时，下方应出现不同的 div 形式。类似于下面的屏幕截图。它仅在第一次出现时显示按钮，单击表单下方的每个按钮时应附加并出现。在最后一个按钮的情况下，应该会出现带有附加按钮的上下文菜单。

我已经尝试创建按钮和表单，但是如何:

1) 给 button1, button2 添加给按钮的外观......这是 div

2) 点击在最后一个按钮上显示上下文菜单

3) 在点击相应按钮时隐藏和显示适当的表单

jsbin

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#content {
  width: 100%;
  height: 100%;
  background-color: #FBBC06;
}

#form {
  width: 300px;
  background-color: rgba(255, 255, 255, 0.65);
  height: 50px;
  position: absolute;
  top: 36px;
  right: 168px;
  border: 1px solid darkred;
  border-radius: 22px;
}

.widthHeight {
  width: 100%;
  height: 100%;
}
#button1 {
  background-color: aquamarine;
  height: 50px;
  width: 20%;
  border-radius: 25px 0px 0px 25px;
  border: 1px solid blue;
  display: inline-block;
}
#button2 {
  height: 50px;
  width: 20%;
  background-color: aquamarine;
  display: inline-block;
}

#button3 {
  height: 50px;
  width: 20%;
  background-color: aquamarine;
  display: inline-block;
  border: 1px solid blue;
}

#button4{
  height: 50px;
  width: 20%;
  background-color: aquamarine;
  display: inline-block;
  border: 1px solid blue;
}
#button5 {
  height: 50px;
  width: 12%;
  background-color: aquamarine;
  display: inline-block;
  border-radius: 0px 25px 25px 0px;
  border: 1px solid blue;
}

#form1{
  width: 100%;
  height: 200px;
  border: 1px solid yellow;
  background-color: skyblue;
  margin-top: 13px;
}

#form2 {
  width: 100%;
  height: 200px;
  border: 1px solid yellow;
  background-color: skyblue;
  margin-top: 13px;
}

#form3 {
  width: 100%;
  height: 200px;
  border: 1px solid yellow;
  background-color: skyblue;
  margin-top: 13px;
}

<div class="widthHeight">
    <div id="content">
    </div>
    <div id="form">
        <div id="buttonHolder">
            <div id="button1">
                button1
            </div>
            <div id="button2">
                buton2
            </div>
            <div id="button3">
                button3
            </div>
            <div id="button4">
                button4
            </div>
            <div id="button5">
                button5
            </div>
        </div>
        <div id="form1">
            This is form 1 on click of button 1 it appears
        </div>
        <div id="form2">
            This is form 1 on click of button 1 it appears
        </div>
        <div id="form3">
            This is form 1 on click of button 1 it appears
        </div>
    </div>
</div>

Answer 1

1) 个性化 CSS - 根据您的个人喜好。更改背景颜色和/或光标可能会添加您需要的效果，例如

.divbutton:hover
{
    cursor:pointer;
}

应该能帮到你。 (将 class='divbutton' 添加到充当按钮的每个 div)

3) 创建这些样式类

.hiddenitem
    {
      display:none;
    }

.shownitem
    {
      display:block;
    }

为每个表单添加.hidenitem类

<div id="form1" class="hiddenitem">
    This is form 1 on click of button 1 it appears 
</div>

在你的脚本文件或标签中

activateMenu = function (menuId)
{
     $("#form" + menuId).toggleClass('shownitem');
}

最后在每个对应的按钮上添加onclick='activateMenu(menuId)'

<div id="button2" onclick='activateMenu(2)'>
                                    TEXT1
</div>

对于 2) 使用与表单相同的方法:在 html 中创建上下文菜单，应用 .hidenitem 类并创建一个切换函数来切换 .shownitem菜单上的类，使用它自己的 id 作为选择器。

编辑:JSFiddle