Вывод ссылок на скачивание материала с заданным значением таймера по клику


Вывод ссылок на скачивание материала с заданным значением таймера...

1325
6 из 10
Проголосовало: 4






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



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

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://webo4ka.ru/Ucoz5/Adminka_Lite_v1/ckachat/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />  
  <link href="http://webo4ka.ru/Ucoz5/Adminka_Lite_v1/ckachat/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="http://webo4ka.ru/Ucoz5/Adminka_Lite_v1/ckachat/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?> <?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>


Code
[/code]

[code]
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://ps-studio.info
  • Всего комментариев: 1

mohito93
0
mohito93 написал: Написано 01 Ноября 2012 в 20:52
Комментарий №1
Господи, неужели нельзя было сократить этот скрипт -
Code
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);  
  }  
??

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: