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:blockwidthheight

そうは言っても、代わりにボタンを使用できない/使用しないで、コードを意味的に有効にするのはなぜだろうか。

于 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 に答える