2

我有以下按钮：

http://jsfiddle.net/TU6vQ/

我想在“邀请你的朋友”文本旁边添加一个加载微调器。我该怎么做？微调器在这里。

这个微调器会成为按钮内的 div 吗？或者最简单的方法是什么？我还想在单击按钮时显示微调器。

这是我拥有的简单按钮：

 <button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        </button>
4

6 回答 6

7

如果您使按钮相对定位，则可以绝对将微调器定位在按钮内部：

http://jsfiddle.net/TU6vQ/8/

HTML：

<button id="inviteYourFriends" class="arvo-bold button blue" style='position:relative'>
     <img src="http://www.gifstache.com/images/ajax_loader.gif" class='spinner'/>
            Invite your friends
</button>

CSS：

.spinner { 
    position: absolute; 
    right: 5px; 
    top: 6px; 
    width: 25px; 
    height: 25px;
    display: none;
}

JS：

$('button#inviteYourFriends').click(function() {$('.spinner').show();});
于 2013-06-04T15:06:16.387 回答
1

将微调器放在按钮内，给它绝对定位，并在按钮上相对。该按钮是一个块级元素，您不需要在它周围添加一个额外的 div。

于 2013-06-04T15:40:34.867 回答
0

我在这里更新了 jsfiddle ：

<div style='position:relative'>
    <img src='http://www.gifstache.com/images/ajax_loader.gif' style='position:absolute; width:16px; margin:10px 10px; height:16px;' />
<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        </button>
</div>
于 2013-06-04T15:06:22.527 回答
0

button标签可以像几乎任何其他元素一样支持标签，img因此您需要做的就是将图像放入其中；听起来很简单。

 <button id="inviteYourFriends" class="arvo-bold button blue" >
            <img src="http://www.gifstache.com/images/ajax_loader.gif" height=10> Invite your friends
        </button>

在您的按钮上单击只需在您的按钮内容前面加上图像。瞧。

于 2013-06-04T15:06:30.237 回答
0

我会在按钮元素中添加图像，然后使用 css 对其进行定位和调整大小。这是 jfiddle：http: //jsfiddle.net/TU6vQ/9/

这是代码：

<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        <img src="http://www.gifstache.com/images/ajax_loader.gif" alt="..." class="spinner"/>
        </button>

CSS：

.button {
    line-height: 52px;
    font-size: 16px;
    width: 270px;
    height: 50px;

     text-shadow: -1px -1px 1px rgba(175,175,175,.42);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: 38px;
    color: #fefefe;
    font-size: 14px;
    display: block;
    height: 38px;
    border: 0;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
            background-clip: padding-box;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1); 
       -moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
            box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}

.button.blue {
    background: rgb(169,191,200);
    background: -moz-linear-gradient(top,  rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
    background: -webkit-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: -o-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: -ms-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: linear-gradient(to bottom,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}

.spinner
{  
    margin-top:8px;
    margin-left:5px;
    height:20px;
    width:20px;
    position:absolute;
}
于 2013-06-04T15:14:27.103 回答
0

你可以这样做。

http://jsfiddle.net/YQNn4/

HTML

<img class="progress" src="http://www.gifstache.com/images/ajax_loader.gif" height="20px" width="20px" alt=""> 
<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
</button>

JS

$(document).ready(function(){
    $('.progress').hide();
    $('#inviteYourFriends').click(function(){
        $('.progress').show();
    });
});
于 2013-06-04T15:10:35.553 回答