Javascript скачать файл с индикатором выполнения - PullRequest
Новая
       15

Javascript скачать файл с индикатором выполнения

0 голосов
/ 21 октября 2018

У меня есть простая загрузка файла - после принятия Условий.Но хотелось бы немного его подправить: 1. Имя файла перед кнопкой должно быть встроенным, поэтому у нас есть Bevelback, затем пробел, а затем кнопка без разрыва строки. 2. Добавить индикатор выполнения для загрузки

Мой код:

  <form name="form1" method="post" action="">
  <div class="download">
  <input type="checkbox" name="download" id="download">
  <label for="download">I Agree to Terms and Conditions</label>
  <br>
  <div class="terms">Bevelback 
  <a href="/linkToFiles1.zip">Download</a> 
  <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
  <div class="terms"> 
  <a href="/linkToFiles2.zip">Download</a> 
    <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
     <div class="terms"> 
    <a href="/linkToFiles3.zip">Download</a> 
    <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
     <div class="terms"> 
    <a href="/linkToFiles4.zip">Download</a> 
    <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
  </div>
 </form>

Мой css: 

<style>
.terms a, .must-select {
position:absolute;
left:-999em;
transition:opacity 1s ease;
background:darkred;
color:#fff;
opacity:0;
}
.terms a {
color:#444;
background:transparent;
}
.terms:after {
content:"Files";
display:block;
color:#999;
text-decoration:none;
border: thin solid #ccc;
border-radius: 4px;
width: 100px;
padding: 4px 14px;
}
.terms{
padding:10px 0 0;
position:relative;  
}
.terms:hover .must-select{
display:block;
position:absolute;
bottom:-3em;
left:auto;
opacity:1.0;
padding:.3em;
border-radius:4px;
z-index:99;
}
#download:checked ~ .terms .must-select{display:none}
#download:checked ~ .terms a{position:static;opacity:1.0;}
#download:checked ~ .terms:after{display:none}
</style>

Есть идеи, пожалуйста?Я считаю, что jquery - самый простой способ, но не могу понять, как связать все это вместе.

...