кнопка скачать на javascript
Среда, 7 июля 2010 г.
Просмотров: 86
Подписаться на комментарии по 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='sifr' class="SC">
здесь будет пост
далее код самой кнопки
<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>
-пост с кнопкой может повторяться неоднократно, главное чтоб все посты находились внутри дива
пример:
пост 1
код кнопки 1
пост 2
код кнопки 2
......
<div>
Картинку кнопки (5.png) поместите в папку /image/
Оставьте комментарий!