Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > gif прелоад


Автор: alligator 27.8.2014, 12:08
Всем доброго времени суток!
Незнаю куда запостить, поэтому тут пишу.

Хочу оформить кнопку чтобы по нажатии на нее внутри кнопки появлялся gif прелоад а как загрузка заканчивалась кнопка возвращала свое имя.
примеров такого оформления не нашел. сейчас прелоад у меня просто в div`e

Хотелось бы услышать мнение специалистов как решить данный вопрос....??

Автор: ksnk 27.8.2014, 12:27
Что не получается? Сделать кнопку? Сделать кнопку гифкой? По нажатии на кнопку убрать ее? По нажатии  на кнопку показать?

Автор: alligator 27.8.2014, 12:30
Хочу сделать чтобы просто вместо текста кнопки появлялся gif , а по окончании загрузки обратно текст

Добавлено через 42 секунды
Код

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>

<body>


 <script type="text/javascript">
 var loader='<input type="submit" name="submit" id="submit" value="Submit"><img src="images/load.gif"/></input>';
$(document).ready(function(){
     $('#form1').submit(
             function(){
                var currency = $('input[name="currency"]:checked').val();
                var type     = $('input[name="type"]:checked').val();

            if(currency && type){
                $('#load').html(loader);
                $.get('action.php', $(this).serialize(), function(data){
console.log(data);
                $('#result').html(data);
                $('#load').html('');
     }).fail(function() {
            alert( "Ошибка выполнения запроса" );
             
                        });
        return false;
                }else{
                alert('Необходимо выбрать одну валюту и один тип депозита!');
            }
     });
});
</script>
<div style="border: 1px solid green;position:relative;">
<form method="post" enctype="application/x-www-form-urlencoded" name="form1" id="form1" onsubmit="return false;" accept-charset="UTF-8">
      <label><input type="radio" name="currency" value="rur" id="rur">RUR</label>
      <label><input type="radio" name="currency" value="usd" id="usd">USD</label>
      <label><input type="radio" name="currency" value="eur" id="eur">EUR</label>
      <br/>
      <label><input type="radio" name="type" value="call" id="call">    Call </label>
      <label><input type="radio" name="type" value="90" id="90">      up 90</label>
      <label><input type="radio" name="type" value="91180" id="91180">   91-180</label>
      <label><input type="radio" name="type" value="1811" id="1811">    181-1</label>
      <label><input type="radio" name="type" value="13" id="13">      1-3</label>
      <label><input type="radio" name="type" value="3up" id="3up">     3+</label>
   
      <div id="load" style="border: 1px solid red;position:absolute;"><input type="submit" name="submit" id="submit" value="Submit"></input></div>
      
      
</form>
</div>
<div id="result" style="text-align: center;"></div>
</body>
</html>

Автор: alligator 27.8.2014, 13:00
Сделал так, может есть решение получше?
Код

 var loader='<input type="submit" name="submit" id="submit" value="" style="width: 80px;background: url(images/load.gif) no-repeat ;background-position: center; border: solid 1px green;background-color:transparent;">';

Автор: ksnk 27.8.2014, 13:15
Сделай 2 кнопки. Точнее одну - кнопку, другую гифку,  или что там должно быть. По клику одну скрывай, вторую показывай.

Добавлено через 2 минуты и 13 секунд
Зачем у второй кнопки-гифки тот же ID ?

Добавлено через 3 минуты и 33 секунды
Скрывать-показывать лучше тем, что вся верстка находится в одном месте. В Javascript будет только управление, верстки там быть не должно.

Автор: alligator 27.8.2014, 13:35
Так лучше =) ???
Код

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<style type="text/css">

#send {
    height: 20px; width: 80px;
    border: solid 1px green;
    background-color:transparent;
}

#send:hover {
  background-color: #ECFFE5;
}

.load {
    background: url('images/load.gif') no-repeat;
    background-position: center;
    border: solid 1px green;
    background-color:transparent;
}

.noload {
    background: url('');
    border: solid 1px green;
    background-color:transparent;
}

</style>
</head>


<body>
 <script type="text/javascript">
 var loader='<input type="submit" id="send" value="">';
$(document).ready(function(){
     $('#form1').submit(
             function(){
                var currency = $('input[name="currency"]:checked').val();
                var type     = $('input[name="type"]:checked').val();

            if(currency && type){
                $('#send').addClass('load'); 
                $("#send").attr('value', '');
                $.get('action.php', $(this).serialize(), function(data){
                $('#result').html(data);
                $('#send').addClass('noload');
                $("#send").attr('value', 'Submit');
     }).fail(function() {
            alert( "Ошибка выполнения запроса" );
             
                        });
        return false;
                }else{
                alert('Необходимо выбрать одну валюту и один тип депозита!');
            }
     });
});
</script>
<div style="border: 1px solid green;position:relative;">
<form method="post" enctype="application/x-www-form-urlencoded" name="form1" id="form1" onsubmit="return false;" accept-charset="UTF-8">
      <label><input type="radio" name="currency" value="rur" id="rur">RUR</label>
      <label><input type="radio" name="currency" value="usd" id="usd">USD</label>
      <label><input type="radio" name="currency" value="eur" id="eur">EUR</label>
      <br/>
      <label><input type="radio" name="type" value="call" id="call">    Call </label>
      <label><input type="radio" name="type" value="90" id="90">      up 90</label>
      <label><input type="radio" name="type" value="91180" id="91180">   91-180</label>
      <label><input type="radio" name="type" value="1811" id="1811">    181-1</label>
      <label><input type="radio" name="type" value="13" id="13">      1-3</label>
      <label><input type="radio" name="type" value="3up" id="3up">     3+</label>
   
      <input type="submit" id="send" value="Submit">
      
      
</form>
</div>
<div id="result" style="text-align: center;"></div>
</body>
</html>

Автор: ksnk 27.8.2014, 13:46
Потому, что метод называется .addClass() Первая буква - маленькая.

Удалить класс - функция .removeClass()

По коду, получается что
  • Стиль .noload нужно выкинуть
  • .load можно переписать как #send.load

Автор: alligator 27.8.2014, 13:56
Конечный результат....
Код

<style type="text/css">

#send {
    height: 20px; width: 80px;
    border: solid 1px green;
    background-color:transparent;
}

#send:hover {
  background-color: #ECFFE5;
}

#send.load {
    background: url('images/load.gif') no-repeat;
    background-position: center;
    border: solid 1px green;
    background-color:transparent;
}

</style>

Код

<script type="text/javascript">
 var loader='<input type="submit" id="send" value="">';
$(document).ready(function(){
    var error_fail='Ошибка выполнения запроса';
    var error_notchecked='Необходимо выбрать одну валюту и один тип депозита!';
     $('#form1').submit(
             function(){
                var currency = $('input[name="currency"]:checked').val();
                var type     = $('input[name="type"]:checked').val();

            if(currency && type){
                $('#send').addClass('load'); 
                $("#send").attr('value', '');
                $.get('action.php', $(this).serialize(), function(data){
                $('#result').html(data);
                $('#send').removeClass();
                $("#send").attr('value', 'Submit');
     }).fail(function() {
            alert(error_fail);    });
        return false;
                }else{
                alert(error_notchecked);
            }
     });
});
</script>

Автор: Aliance 27.8.2014, 14:19
Пользуйтесь для такого рода вопросов сервисом jsfiddle.net - там и все сразу смогут посмотреть работу вашего скрипта (копировать просто исходники никто не будет), и сможет быстро изменить ошибки и показать вам результат.

Что в итоге - не понятно? Вопрос решен? Если да - вверху есть кнопка "вопрос решен", иначе уточните что именно осталось не понятно.

Цитата(alligator @  27.8.2014,  13:30 Найти цитируемый пост)
var loader='<input type="submit" name="submit" id="submit" value="Submit"><img src="images/load.gif"/></input>';

 smile 

Автор: ksnk 27.8.2014, 14:35
Код

  $('#send').addClass('load'); 
...
  $('#send').removeClass('load'); // <-- имя класса для удаления

Автор: alligator 27.8.2014, 15:07
Цитата(Aliance @ 27.8.2014,  15:19)
Пользуйтесь для такого рода вопросов сервисом jsfiddle.net - там и все сразу смогут посмотреть работу вашего скрипта (копировать просто исходники никто не будет), и сможет быстро изменить ошибки и показать вам результат.

Что в итоге - не понятно? Вопрос решен? Если да - вверху есть кнопка "вопрос решен", иначе уточните что именно осталось не понятно.

Цитата(alligator @  27.8.2014,  13:30 Найти цитируемый пост)
var loader='<input type="submit" name="submit" id="submit" value="Submit"><img src="images/load.gif"/></input>';

 smile

Учтем.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)