将两个按钮元素合并为一个

Question

我想知道如何制作看起来像普通按钮的按钮，但是右边做X而右边做Y.

例如，当我点击此按钮的左侧时，它会运行一个表单。我单击右侧，它运行另一个表单。 按钮需要看起来像普通按钮，因此用户只能看到一个按钮。

Answer 1

这听起来像是可怕的用户界面。用户应该能够看到按钮之间的区别。你应该在“药丸”中创建两个按钮。形成如此：

通过对第二个按钮应用负边距：

#second-button {
    margin-left: -4px;
}

JSFiddle

如果您仍然想要，可以删除边框以使它们合并为一个：

JSFiddle

Answer 2

这样的事情会起作用：

<button>
    <span class="left-part">Button</span>
    <span class="right-part">value</span>
</button>

然后，您可以将不同的事件侦听器绑定到左侧和右侧span。

演示：http://jsfiddle.net/2L8uN/（和version带有样式的跨度填充＆＃39; s）

Answer 3

使用jquery，您应该执行以下操作：

$('#splitbutton').click(function(e) {
    if (e.clientX < $(this).offset().left + $(this).outerWidth() / 2)
        console.log('left');
    else
        console.log('right');
});

但我同意，非常不寻常的用户界面：）

Answer 4

对于总统来说，我有一个像这样的好主意。按钮的一侧用M + Ms淋浴房间，另一侧开始全面核战争。他说，我引用，“伟大的UI人。总是​​让他们猜测！”。

（臂架）

Answer 5

我认为你正在寻找的一个很棒的预制版本是“按钮工具栏”的Twitter Bootstrap实现。您可以查看here。

Answer 6

http://jsbin.com/xuyocica/1纯css和html javascript免费