1

クリックされたボタンの横に表示される、ある種の「ユニバーサル」ローディングインジケーターを作成しようとしています。例えば; お問い合わせフォーム用とサブスクリプションフォーム用の2つのボタンがあるページがあります。私の最初の考えは、jQueryを介して各ボタンの横にカスタムdivを作成することでした。しかし、私は自分のページで誤ったdivを回避しようとしています。

私が使用しようとしているコードでは、読み込みインジケーターがボタンの外側ではなく内側に表示されます。JSFiddleへのリンクを含むコードは次のとおりです。

JSFIDDLEリンク

CSS

#contact, #subscribe {
    margin:50px;
    width:100px;
    height:25px;
}
.indicator {
    position:relative;
    float:right;
    top:-23px;
    right:-25px;
    width:16px;
    height:16px;background:url(../graphics/loader.gif) no-repeat;
}

jQuery

$('#contact-submit').click(function()
{   
    $(this).addClass('indicator');
});
$('#subscribe-submit').click(function()
{   
    $(this).addClass('indicator');
});

HTML

<div id="contact">
    <button id="contact-submit">Contact</button>                                            
</div>  
<div id="subscribe">
    <button id="subscribe-submit">Subscribe</button>                                            
</div>
4

2 に答える 2

2

多分あなたは疑似要素を利用することができます:afterか？例：

.indicator {
    position: relative;
}
.indicator:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background:url(http://www.graphicsoptimization.com/blog/wp-includes/images/go_examples/2008_05/indicator.gif) no-repeat;
}

http://jsfiddle.net/FHmqF/3/

免責事項：<input type="button">これらの要素は内部コンテンツを持つことができないため、このアプローチはボタンでは機能しません。

于 2013-03-24T18:40:15.187 に答える
0

マイクがすでに指摘したように、クラスをボタン自体にアタッチしているので、このようなことを試してcssを試してみるか、インジケーターをどこに配置するかを正確に教えてください。

$('#contact-submit').click(function()
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});
$('#subscribe-submit').click(function() 
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});

http://jsfiddle.net/Ls3LW/

于 2013-03-24T18:40:55.667 に答える