Кнопка скачать - Форум
Страница 1 из 11
Форум » Форум веб мастеров » uCoz » Кнопка скачать
Кнопка скачать

BaniK
VIP
Сообщений 43
+
+4141
-
Ваши награды 2
BaniK написал: В ответ пользователя BaniK Написано 09 Декабря 2012 в 17:14
Сообщение № 1
Вот есть скрипт, после нажатия на ретвит кнопка скачать становитса активной,как зделать штобы просто после перехода например в групу вк, кнопка становилась активной.

Задача

Сделать активной кнопку закачки, после того, как посетитель кликнет на ссылку, которая откроет окно для ретвита записи, сделает ретвит и закроет окно.
Для этого добавляем ссылку для открытия окна:
Code
<a href="#" id="tweetLink">ретвит</a>

Эту ссылку вы так же можете оформить кнопкой или ещё как-нибудь, но я использую пока просто ссылку.
После этого, добавляем кнопку для скачивания:
Code
<a href="#" class="downloadButton">Download</a>

Оформление для кнопки у меня вот такое:
Code
<style>a.downloadButton{display:inline-block;width:187px;height:69px;text-indent:-99999px;
overflow:hidden;background:url('http://ukraine-in-cs.ucoz.ua/buttons.png') no-repeat;
cursor:default;border:none;text-decoration:none !important; margin-left:230px;}
   
a.downloadButton.active{background-position:left bottom;cursor:pointer;}</style>

Когда скриптом присваивается класс .active, у меня просто меняется расположение фонового изображения кнопки background-position:left bottom;
То есть, это спрайт – два изображения на одной картинке.
Теперь надо подключить скрипты, для того чтобы добавить динамики нашей кнопке.
Подключаем первый скрипт , который фиксирует открытие и закрытие окна твиттера:
Code
<script src="http://dicim.net/wp-content/themes/wminimal/js/jquery.tweetAction.js"></script>

А теперь подключаем скрипт, в котором указаны данные для ретвита – ссылка, текст сообщений и сама ссылка на скачиваемый файл, который будет добавлен к кнопке:
Code
$(document).ready(function(){
$('#tweetLink').tweetAction({
   text:  'Плавный скроллинг к якорю на сайте',//Текст в сообщении
   url:  'http://dicim.net/plavnyj-skrolling-k-yakoryu.html',//Ссылка в сообщении
   via:  'dicimetr',
   related:    'dicimetr'
},function(){
   
// Добовление класса active и ссылка для скачивания
$('a.downloadButton')
   .addClass('active')
   .attr('href','http://dicim.net/demo/scroll.rar');
});
});
«Пред. тема След. тема»
Форум » Форум веб мастеров » uCoz » Кнопка скачать
Страница 1 из 11
Поиск:
Топ пользователей: