0

我想使用跨度标签创建样式按钮，其行为或多或少类似于<button>标签。快速单击按钮不应选择其元素内部或外部的任何文本，或者根本无法选择文本，并且还应具有指针光标。

为 jQuery 中的事件分配一个普通<span>标签可以.click()正常工作，但不能像一个正确的按钮。我不知道如何做到这一点，除了使用<a>标签，使用属性#或javascript:链接。href但这几乎违背了不显眼的 JavaScript 的目的。另外，锚链接已经有下划线的文本和需要覆盖的颜色。

总而言之，我怎样才能完成一个不显眼的跨度按钮？不依赖锚点或实际的按钮输入标签。谢谢。

4

3 回答 3

1

更新

您可以使用这些样式来防止选择：

-webkit-user-select:none;
-moz-user-select:none;

在此处查看演示

请注意，上述内容仅适用于 webkit 和 mozilla 浏览器。

据我了解，jQuery 是最简单的。你可以这样做：

$(function(){
    $('#span_id').click(function(){
      // your code here...
    });
});

请注意，<span>标签是内联元素，您需要将其设置为块级display:block才能应用width并height使其看起来像一个按钮。

话虽如此，我想知道为什么您不能/不使用按钮来使您的代码在语义上有效。

于 2010-11-01T06:13:30.267 回答
0

“跨度按钮”

<span class="spanbutton" title="Span Button!" onclick="spanButtonFunction()">Span Button!</span>

造型：

.spanbutton {
    color:#000000;
    border:1px solid #000000;
    padding-left:8;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    /* fallback */
    background-color:#EEEEEE;

    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC),     to(#F4F4F4));

    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* IE 10 */
    background: -ms-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #F4F4F4, #CCCCCC);
}

当然还有你的按钮功能脚本。

此外，当您单击按钮时，如果您想对按钮“中单击”的外观进行编码，jQuery 将提供帮助：

$(document).ready(function (){
    $(".spanbutton").bind("mousedown", function(e){
            buttondown(this);
    });
    $(".spanbutton").bind("mouseup", function(e){
            buttonup(this);
    });
    $(".spanbutton").bind("mouseout", function(e){
            buttonup(this);
    });
});

function buttondown(button) {
    button.className = "downbutton";
}

function buttonup(button) {
    button.className = "spanbutton";
}

还有一些“向下”按钮的样式：

.downbutton {
    color:#000000;
    border:1px solid #333333;
    padding-left:8px;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    background-color:#BBBBBB;
}

喜欢就投票吧！这将激励我做更多这样的详细回复

于 2013-07-11T01:40:15.443 回答
0

这可能是一个疯狂的想法，但您可以将按钮用作按钮。它们可以像其他所有东西一样被设计。

于 2010-11-01T06:15:15.653 回答