it-roy-ru.com

Как разместить анимацию загрузки внутри поля ввода?

Я хочу расположить анимацию загрузки на той же строке внутри поля ввода справа.

Я старался : 

<span>
    <input id="searchbox" placeholder="Enter Catalog # " type="text" />
    <img style="float:right;" id='loading' width="100px" src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/> 
</span>

Я получил : 

enter image description here

Я не мог заставить это показать в моем поле ввода. :(

9
iori

Вы также можете сделать это как фоновое изображение в CSS. Просто создайте CSS-класс и примените его во время загрузки данных. После завершения вызова Ajax удалите CSS-класс «загрузки» из поля ввода текста. 

.loading {    
    background-color: #ffffff;
    background-image: url("http://loadinggif.com/images/image-selection/3.gif");
    background-size: 25px 25px;
    background-position:right center;
    background-repeat: no-repeat;
}

Вы можете просмотреть его здесь: http://jsfiddle.net/tejsoft/7pzgtevv/4/

29
TejSoft

Я согласен с @Sam в том, что он может быть фоном элемента, и все, что вам нужно для переключения - это класс. Если вы установите его как:

input {
    box-sizing: border-box;
    border: 1px solid #ccc;
    height: 30px;
    padding: 10px;
}
input.loading {
    background: url(http://www.xiconeditor.com/image/icons/loading.gif) no-repeat right center;
}

И затем вы можете переключать класс, когда делаете вызов ajax, например: 

$(document).on('blur', 'input', function(e) {
    var $t = $(e.currentTarget);
    $t.addClass('loading');
    $.ajax({
        url: $t.data('ajax'),
        success: function(data) {
            //dostuff
            $t.removeClass('loading');
        }
    });
});

Это, на мой взгляд, было бы самым простым и эффективным способом сделать это. Если вы хотите посмотреть дальше, вот скрипка

9
Chad

Поместите и input, и img внутри элемента div и сделайте его div похожим на текстовое поле. Сейчас я разговариваю по телефону, так что он может быть не идеальным, но я думаю, вы поняли. 

http://jsfiddle.net/soz8jq2x/

0
ByteHamster

Попробуйте возиться с абсолютно позиционированием элемента.

играть на скрипке

img {
    position: absolute;
    left: 112px;
    top: -22px;
}

https://jsfiddle.net/kmbxawdd/2/

Кроме того, вы можете установить положение содержащихся элементов относительно, то есть вы можете стилизовать их непосредственно к этим измерениям, а не к документам. 

0
Jack hardcastle

Попробуйте следующее:

  1. Поместите анимацию после поля ввода в HTML
  2. Установите position: relative; на изображении

    • Позволяет настроить положение элемента по умолчанию
  3. Используйте атрибут CSS top, чтобы сместить анимацию вверх до точки, где она находится прямо над полем ввода.
0
Sildoreth

Мое решение: добавить класс к элементу ввода, который определяет фоновое изображение, а затем изменить его положение с помощьюbackground-position-xиbackground-position-y

.Loading {
    background-image: url("bg.gif");
    background-repeat: no-repeat ;
    background-position-x: 99% ;
    background-position-y: 50% ;
}

вы также можете использовать ключевые слова для размещения

background-position-x: right;
background-position-y: center;

или объединить их

background-position: center right;

затем вы можете просто добавить или удалить этот класс, чтобы показать/скрыть анимацию

0
Souhaieb Besbes

просто включите элемент <img> в элемент <input>. затем вы можете использовать js, чтобы показать и скрыть это изображение, используя атрибут id.

<img class="loading" src="http://loadinggif.com/images/image-selection/3.gif" id="img-loading">

.loading {    
    position: absolute;
    top: 206px;
    right: 30px;
    display: none;
}
0
Optimaz ID