Скрипт предназначается для каталога файлов, ч необходимостью если у вас есть потребность наложить санкций на ограничение количества скачиваний для гостей или пользователей определенного файла, с указанием индикатора лимита на совершенных уже скачиваний.
Вывод ссылок на скачивание материала с заданным значением таймера по клику
Установка:
Для работы данного решения используется версия системной бибилиотеки jQuery 1.6.1. Чтобы её подключить, необходимо в Панели управления сайтом (ПУС) войти во вкладку "Общие настройки" и там в поле "Версия библиотеки jQuery" выбрать "jquery - 1.6.1.js"
Затем входим в редактирование шаблонов и выбираем шаблон "Каталог файлов - Страница материала и комментариев к нему". Вставляем между тегами <head>...</head>
следующие файлы стилей и скрипт
Code
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
<link href="http://ucoz-solution.ucoz.ru/TEST/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="http://ucoz-solution.ucoz.ru/TEST/jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* <![CDATA[ */
html, body {font-family: Arial,sans-serif;font-size: 12px;}
.ui-widget {font-size: 75% !important;}
</style>
<script type="text/javascript">
function dyn_notice() {
var timer = 0;
var notice = $.pnotify({
pnotify_title: "Подождите,пожалуйста...",
pnotify_type: 'info',
pnotify_info_icon: 'picon picon-throbber',
pnotify_hide: false,
pnotify_closer: false,
pnotify_sticker: false,
pnotify_opacity: .75,
pnotify_width: "150px"
});
setTimeout(function() {
notice.pnotify({
pnotify_title: false
});
var interval = setInterval(function() {
timer += 2;
var options = {
pnotify_text: timer + " из 250 завершено."
};
if (timer == 200) options.pnotify_title = "Генерация ссылок...";
if (timer >= 250) {
window.clearInterval(interval);
options.pnotify_title = "Done!";
options.pnotify_title = $('#form_notice').html();
options.pnotify_type = "notice";
options.pnotify_hide = true;
options.pnotify_closer = true;
options.pnotify_sticker = true;
options.pnotify_notice_icon = 'picon picon-task-complete';
options.pnotify_opacity = 1;
options.pnotify_shadow = true;
options.pnotify_width = $.pnotify.defaults.pnotify_width;
//options.pnotify_min_height = "300px";
}
notice.pnotify(options);
}, 120);
}, 2000);
}
</script>
После тега <body> подключаем еще один скрипт
Code
<script type="text/javascript" src="/jquery.pnotify.js"></script>
В нужном вам месте добавляем, собственно, кнопку "Скачать"
Code
<input value="Скачать" onclick="dyn_notice();" type="button" />
<div style="display:none;">
<div id="form_notice">
<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?>
</div></div>
Ну и, наконец, в самом конце шаблона добавляем скрипт:
Code
<script type="text/javascript">
$('#form_notice').load('/load/entry/ldEnt #form_notice');
</script>
Все необходимые для установки файлы вы можете скачать из архива
Далее Настройка скрипта:
а) в данном скрипте
Code
<script type="text/javascript">
function dyn_notice() {
var timer = 0;
var notice = $.pnotify({
pnotify_title: "Подождите,пожалуйста...",
pnotify_type: 'info',
pnotify_info_icon: 'picon picon-throbber',
pnotify_hide: false,
pnotify_closer: false,
pnotify_sticker: false,
pnotify_opacity: .75,
pnotify_width: "150px"
});
setTimeout(function() {
notice.pnotify({
pnotify_title: false
});
var interval = setInterval(function() {
timer += 2;
var options = {
pnotify_text: timer + " из 250 завершено."
};
if (timer == 200) options.pnotify_title = "Генерация ссылок...";
if (timer >= 250) {
window.clearInterval(interval);
options.pnotify_title = "Done!";
options.pnotify_title = $('#form_notice').html();
options.pnotify_type = "notice";
options.pnotify_hide = true;
options.pnotify_closer = true;
options.pnotify_sticker = true;
options.pnotify_notice_icon = 'picon picon-task-complete';
options.pnotify_opacity = 1;
options.pnotify_shadow = true;
options.pnotify_width = $.pnotify.defaults.pnotify_width;
//options.pnotify_min_height = "300px";
}
notice.pnotify(options);
}, 120);
}, 2000);
}
</script>
можно настроить выводимый в процессе работы скрипта текст
pnotify_title: "Подождите,пожалуйста..." pnotify_text: timer + " из 250 завершено." if (timer == 200) options.pnotify_title = "Генерация ссылок..."; настроить прозрачность всплывающего окна можно в строке
pnotify_opacity: .75, ширина окна, в котором происходит работа скрипта
pnotify_width: "300px" в этой строке можно настроить, после какого значения таймера выводится определенный текст
if (timer == 200) options.pnotify_title = "Генерация ссылок..."; В данном случае, после того как таймер достигнет значения в 200 единиц, появится текст "Генерация ссылок..."
Число единиц таймера (сколько времени пользователю нужно будет подождать до появления ссылок на скачивание) можно выставить здесь:
if (timer >= 250) в данном случае этот параметр равен 250 единицам, соответственно, если вы изменяете это значение, то его также нужно будет заменить на соответствующее в этой строке с текстом
pnotify_text: timer + " из 250 завершено." А в этой строке скрипту дается информация о том, что после отсчёта таймера нужно вывести содержимое блока с идентификатором (id)
#form_notice. В нашем случае, это данный блок
Code
<div id="form_notice">
<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?>
</div>
Я обернул его дополнительно в еще один блок со свойством "display:none;", чтобы по умолчанию содержимое блока с ссылками было скрыто.
Code
<div style="display:none;">
<div id="form_notice">
<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?>
</div></div>
Всё, что касается оформления всплывающего окна, можно редактировать в соответствующем файле стилей
jquery.pnotify.default.css