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

кнопка скачать на javascriptРубрика: Новости -> Скрипты -> javascript
Среда, 7 июля 2010 г.
Просмотров: 10627
Подписаться на комментарии по 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>

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

пример:

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

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

twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru ya.ru rutvit.ru myspace.com technorati.com digg.com friendfeed.com pikabu.ru blogger.com liveinternet.ru livejournal.ru memori.ru google.com bobrdobr.ru mister-wong.ru yahoo.com yandex.ru del.icio.us

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

  1. 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');

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

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

(войти без комментирования)

Имя и сайт используются только при регистрации

Если указать email (зарегистрироваться), то будет уведомление о новых комментариях.

Выберите человечка с поднятой рукой!