кнопка скачать на javascript

Рубрика: Новости -> Скрипты -> javascript
Среда, 7 июля 2010 г.
Просмотров: 15118
Подписаться на комментарии по RSS

Потихоньку начал изучать javascript, оказывается он не такой уж и сложный в освоении, только раньше мне так не казалось)), но подводные камни тоже имеются(, кудаж без них. Первым камнем был internet explorer в котором некоторые скрипты работали не корректно либо вообще не работали. Теперь я понимаю почему многие жалуются на explorer)).

Если уж начал изучать javascript, то нужно его внедрять на свои сайты, что я собственно и сделал.

Я для своего варезника сделал как мне кажется неплохую кнопку скачать, по ее нажатию появляется список ссылок для скачивания файлов. Все банально и просто)), но чтобы сделать кнопку скачать которая будет работать во всех браузерах, мне пришлось переписать весь код 3 раза, мало того я сделал защиту от дебилов у которых отключены javascript. Защита заключается в следующем: если в браузере по каким либо причинам не работают javascript, то список ссылок сразуже будет раскрытым, дабы дать возможность скачать файл при любых раскладах. Если будут отключены картинки, то вместо красивой кнопки будет надпись 'кнопка скачать'.

Собсна сам скрипт:

перед <body> ставим

<style type='text/css'>.pdownload{display:none}</style>
<script type="text/javascript">
function o(dff){
    document.getElementById(dff);
    var dow = dff.getElementsByTagName('div');
    document.getElementById('dow');
    dow[0].style.display = "block";
}    
</script>

далее ставим

здесь будет пост

далее код самой кнопки

<div id="d1" onclick="o(this)">
<img alt="Кнопка скачать" class="alignright" src="/images/5.png" title="Кнопка скачать" />
<div class="pdownlclass">
<center>
<b>Источник 1</b><a href="ссылка на файл 1" target="_blank" title="скачать">Скачать</a>
<b>Источник 2</b><a href="ссылка на файл 2" target="_blank" title="скачать">Скачать</a>
</center>
</div>
</div>

далее закрываеv див sifr

и ставим заключительный скрипт

</div>
<script type="text/javascript">
document.getElementById('sifr').innerHTML = document.getElementById('sifr').innerHTML.replace(/pdownlclass/g,'pdownload');
</script>

-пост с кнопкой может повторяться неоднократно, главное чтоб все посты находились внутри дива

пример:

<div id='sifr' class="SC">
пост 1
код кнопки 1
пост 2
код кнопки 2
......
<div>

Картинку кнопки (5.png) поместите в папку /image/

Еще записи по теме

Комментариев: 2

2011-11-09 в 12:34:32 | Виктор

Весь это скрипт вставить перед - я парвильно понимаю???

.pdownload{display:none}

function o(dff){

document.getElementById(dff);

var dow = dff.getElementsByTagName('div');

document.getElementById('dow');

dow[0].style.display = "block";

}

Источник 1Скачать

Источник 2Скачать

document.getElementById('sifr')[removed] = document.getElementById('sifr')[removed].replace(/pdownlclass/g,'pdownload');
2011-11-30 в 15:55:26 | TruLander

Да совершенно верно))), ставить перед.