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

1458
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: