wake-up-neo.com

Wie positioniere ich die Lade-Animation im Eingabefeld?

Ich möchte meine Ladeanimation in derselben Zeile innerhalb meines Eingabefelds nach rechts positionieren.

Ich habe es versucht : 

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

Ich bekomme : 

enter image description here

Ich konnte es nicht in meinem Eingabefeld anzeigen. :(

javascriptjqueryhtmlcsstwitter-bootstrap
9
iori

Sie können es auch als Hintergrundbild in CSS verwenden. Erstellen Sie einfach eine CSS-Klasse und wenden Sie sie zum Zeitpunkt des Ladens der Daten an. Nachdem der Ajax-Aufruf abgeschlossen ist, entfernen Sie die CSS-Klasse "loading" aus dem Texteingabefeld. 

.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;
}

Sie können es hier ansehen: http://jsfiddle.net/tejsoft/7pzgtevv/4/

29
TejSoft

Ich stimme mit @Sam darin überein, dass dies der Hintergrund des Elements sein könnte, und alles, was Sie umschalten müssten, wäre eine Klasse. Wenn Sie es wie folgt einrichten:

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;
}

Und dann können Sie die Klasse umschalten, während Sie Ihren Ajax-Anruf tätigen: 

$(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');
        }
    });
});

Das wäre meiner Meinung nach der einfachste und effektivste Weg, dies zu tun. Wenn Sie weiter suchen wollen, hier eine Geige

9
Chad

Platzieren Sie sowohl input als auch img in einem div und machen Sie, dass div wie ein Textfeld aussieht. Ich bin gerade auf meinem Handy, also ist es vielleicht nicht perfekt, aber ich denke, Sie verstehen den Punkt. 

http://jsfiddle.net/soz8jq2x/

0
ByteHamster

Versuchen Sie, das Element absolut zu positionieren.

geige

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

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

Darüber hinaus können Sie die Position der enthaltenden Elemente auf relativ setzen, dh Sie können diese Dimensionen direkt an Ihre Bemaßungen anpassen und nicht an die Dokumente. 

0
Jack hardcastle

Versuche Folgendes:

  1. Platzieren Sie die Animation hinter dem Eingabefeld im HTML

  2. Legen Sie position: relative; im Bild fest

    • Erlaubt Ihnen, die Position des Elements an der Standardeinstellung anzupassen
  3. Verwenden Sie das CSS-Attribut top, um die Animation nach oben zu dem Punkt zu verschieben, an dem sie sich direkt über dem Eingabefeld befindet.
0
Sildoreth

Meine Lösung: Fügen Sie dem Eingabeelement, das ein Hintergrundbild definiert, eine Klasse hinzu, und ändern Sie dann seine Position mitbackground-position-xundbackground-position-y

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

sie können auch Keywoords für das Postioning verwenden

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

oder kombinieren Sie sie

background-position: center right;

sie können diese Klasse dann einfach hinzufügen oder entfernen, um die Animation anzuzeigen/auszublenden

0
Souhaieb Besbes

fügen Sie einfach <img> element in <input> element ein. Dann können Sie js verwenden, um dieses Bild mit dem id-Attribut ein- und auszublenden.

<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