Рейтинг: 0.0/0

Метки

Таймер, ссылки

Опрос: Чего добавлять больше?

Чего добавлять больше?

Результаты опроса

Всего ответов: 192

Главная » 2012 » Февраль » 14 » Вывод ссылок на скачивание материала с заданным значением таймера по клику



Вы можете посмотреть, как работает вывод ссылок на скачивание:



Об установке:

1. Для работы данного решения используется версия системной бибилиотеки jQuery 1.6.1. Чтобы её подключить, необходимо в Панели управления сайтом (ПУС) войти во вкладку "Общие настройки" и там в поле "Версия библиотеки jQuery" выбрать "jquery - 1.6.1.js"

Затем входим в редактирование шаблонов и выбираем шаблон "Каталог файлов - Страница материала и комментариев к нему". Вставляем между тегами

Code
<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>


2. После тега
Code
<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>


3. Ну и, наконец, в самом конце шаблона добавляем скрипт:

Code

<script type="text/javascript">
$('#form_notice').load('/load/entry/ldEnt #form_notice');
</script>


Все необходимые для установки файлы вы можете скачать по ссылке ниже:



4. Немного о настройках:

а) в данном скрипте

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>


можно настроить выводимый в процессе работы скрипта текст

Code
pnotify_title: "Подождите,пожалуйста..."

Code
pnotify_text: timer + " из 250 завершено."

Code
if (timer == 200) options.pnotify_title = "Генерация ссылок...";


настроить прозрачность всплывающего окна можно в строке

Code

pnotify_opacity: .75,


ширина окна, в котором происходит работа скрипта

Code

pnotify_width: "300px"


в этой строке можно настроить, после какого значения таймера выводится определенный текст

Code

if (timer == 200) options.pnotify_title = "Генерация ссылок...";


В данном случае, после того как таймер достигнет значения в 200 единиц, появится текст "Генерация ссылок..."

Число единиц таймера (сколько времени пользователю нужно будет подождать до появления ссылок на скачивание) можно выставить здесь:

Code

if (timer >= 250)


в данном случае этот параметр равен 250 единицам, соответственно, если вы изменяете это значение, то его также нужно будет заменить на соответствующее в этой строке с текстом

Code
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

На этом всё, вопросы размещайте тут же.
Ссылка:
BB-код:
HTML-код:

Ещё по теме:

Всего комментариев: 2
  1.   Понравилось: +1
    2  Роман 2012-02-14, 13:43

    Спасибо!!! ОТЛИЧНЫЙ СКРИПТ!!!
    Администратору огромное человеческое спасибо! wink

  2.   Нет оценки: 0
    1  saw 2012-02-14, 10:32

    Небольшое дополнение: вдобавок к таймеру можно прикрепить анимацию загрузки (вращающийся лоадер) и по окончанию загрузки вывод иконки завершения (посмотреть можно здесь на странице любого материала, нажав кнопку "скачать")

    Что для этого нужно? ну, во-первых, две иконки, лоадера и иконки завершения загрузки, они в этом архиве



    И еще нужно добавить в файл стилей CSS следующее

    Code

    .ui-pnotify .picon-throbber {
        background:url(/throbber.gif);
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
        width: 17px;
        height: 17px;
    }

    .ui-pnotify .picon-task-complete {
        background:url(/task-com.png);
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
        width: 17px;
        height: 17px;
    }


    пути к файлам изображений не забудьте прописать как положено.

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

Имя *:
Email:
Код *: