VPF::gif прелоад - Форум программистов

alligator

Дата 27.8.2014, 12:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 730
Регистрация: 28.1.2004

Репутация: нет
Всего: 1

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

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

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

--------------------

Мои ресурсы:
Студенты мгапи тут!
Модные стулья здесь!
Эксклюзивные сувениры подарки.

ksnk

Дата 27.8.2014, 12:27 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Что не получается? Сделать кнопку? Сделать кнопку гифкой? По нажатии на кнопку убрать ее? По нажатии на кнопку показать?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

alligator

Дата 27.8.2014, 12:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 730
Регистрация: 28.1.2004

Репутация: нет
Всего: 1

Хочу сделать чтобы просто вместо текста кнопки появлялся 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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 730
Регистрация: 28.1.2004

Репутация: нет
Всего: 1

Сделал так, может есть решение получше?

Код


 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 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

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

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

alligator

Дата 27.8.2014, 13:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 730
Регистрация: 28.1.2004

Репутация: нет
Всего: 1

Так лучше =) ???

Код


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

Это сообщение отредактировал(а) alligator - 27.8.2014, 13:46

--------------------

Мои ресурсы:
Студенты мгапи тут!
Модные стулья здесь!
Эксклюзивные сувениры подарки.

ksnk

Дата 27.8.2014, 13:46 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

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

По коду, получается что

Стиль .noload нужно выкинуть
.load можно переписать как #send.load

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

alligator

Дата 27.8.2014, 13:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 730
Регистрация: 28.1.2004

Репутация: нет
Всего: 1

Конечный результат....

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Пользуйтесь для такого рода вопросов сервисом 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>';

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 27.8.2014, 14:35 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

alligator

Дата 27.8.2014, 15:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 730
Регистрация: 28.1.2004

Репутация: нет
Всего: 1

Цитата(Aliance @ 27.8.2014, 15:19)

Цитата(alligator @ 27.8.2014, 13:30

)

var loader='<input type="submit" name="submit" id="submit" value="Submit"><img src="images/load.gif"/></input>';

Учтем.

--------------------

Мои ресурсы:
Студенты мгапи тут!
Модные стулья здесь!
Эксклюзивные сувениры подарки.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »