• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Ajax » Как сделать музыку на AJAX (Непрерываемая музыка)
Как сделать музыку на AJAX
Деееенчик
Сообщений: 190
Репутация: 116

Сообщение # 1 | 19:47:31
Подскажите мне,как сделать чтобы при переходе по страницам музыка не прерывалась?Нашел вот uppod,но так и не разобрался как это сделать.
Вот например плееры сделаные на uppod.1-ый пример.2-ой пример
Пример вкладок на AJAX
Сайт:Мой мегаполис

Благодарности в репутацию и в награды!
P.S Плюс под аватаркой)
Сообщение отредактировал Деееенчик - Пятница, 19 Июл 2013, 09:49:05
сondor
Сообщений: 4661
Репутация: 1528

Сообщение # 2 | 11:22:46
Если хотим обновить содержимое страницы, без ее перезагрузки, например как в социальных сетях Вконтакте или Одноклассниках, и чтобы при переходе по ссылке на другую страницу включенная музыка в плеере не выключалась а продолжала играть, можно применить простой скрипт на jQuery. Постараюсь объяснить поподробней, но все таки тут главное вникнуть а остальное все понятно.
Этот скрипт можно применить для всей страницы, или для отдельного блока или менюшки.

Что нам нужно:

1) Создаем, например, файл с расширением js с любым именем. Пусть это будет js-ajax.js
Вставляем внутри него вот такое вот код:



Ничего сверх фантастического в этом коде нет, вроде все на вид просто.

2) Загружаем файл js-ajax.js в файловый менеджер в любое место на сайт.
3)После, подключаем этот файл к нужному шаблону на сайте

Код
<script type="text/javascript" src="/js-ajax.js"></script>


4) Если мы хотим, чтобы у нас обновлялось содержимое страницы без перезагрузки на главной странице Каталога файлов и на других страницах этого модуля, то вставляем между тегами <head>... </head> код:

Код
<script type="text/javascript" src="/js-ajax.js"></script>


После, после тега <body> вставляем код:

Код
<script type="text/javascript" src="/js-ajax.js"></script>
   <script type="text/javascript">
   $(function(){
   AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"};).ajaxify_links("a");
   };);
   </script>


Этот код идентифицирует ссылки и присваивает им события при загрузке страницы. Тут идет инициализация объекта AjaxContent нашего оберточного дива #ajax-wrap и контентного дива #text.
ajaxify_links("a") сообщает скрипту о том, с какими ссылками мы хотим проделывать наш замысел. Если мы хотим именно для какой нибудь менюшки, например:

Код
<ul id="menuska">
<li><a href="$HOME_PAGE_LINK$">Домашняя</a></li>
<li><a href="/load">Программы</a></li>
<li><a href="/publ">Статьи</a></li>
</ul>


То вставляем id идентификатор id="menuska", чтобы получилось вот так:

Код
AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"};).ajaxify_links("# menuska a");


Таким образом при нажатии на ссылке в менюшке мы будем наблюдать обновление содержимого страницы без ее перезагрузки.

Чтобы обозначить, какая часть сайта будет обновляться, заключаем ее в следующее:

Код
<div id="ajax-wrap">
<div id="text">

<!-- ТУТ СОДЕРЖИМОЕ КОТОРОЕ МЫ ЗАКЛЮЧИЛИ В ЭТИ ДИВЫ-->

</div>
</div>


То есть, если мы хотим чтобы у нас содержимое страницы обновлялось без ее перезагрузки во всех старницах, то все что после тега <body> заключаем в

Код
<div id="ajax-wrap">
<div id="text">
........

</div>
</div>


Не забываем закрывать все дивы.

Или можно закллючить код $BODY$

Код
<div id="ajax-wrap">
<div id="text">
$BODY$
</div></div>


Мы можем свободно вписывать свои любые id для этого кода, смотря какой шаблон.

5) Чтобы получить возможность обновления страниц без ее перезагрузки на всем сайте, кроме например, шапки, то нам будет кончено же проще поставить все выше перечисленные коды в Верхней и Нижней части вместо того чтобы ставить их каждый раз в каждом шаблоне.
Для этого, подключаем наш скрипт, который в файловом менеджере, вставляем в шаблон Верхняя часть сайта и после нее код идентифицирования ссылок и присваивания им события.

Код
<script type="text/javascript" src="/js-ajax.js"></script>

   <script type="text/javascript">
   $(function(){
   AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"};).ajaxify_links("a");
   };);
   </script>


Здесь, в ajaxify_links("a") мы вставляем не идентификатор элемента, а просто а. То есть мы обращаемся ко всем ссылкам на нашем сайте.
Далее, чтобы указать что будет обновляться, а остальное не трогаться, используем

Код
<div id="ajax-wrap">
<div id="text">


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

Не забываем закрывать наши дивы. Их вставляем к шаблон Нижняя часть сайта:

Код
</div></div>


-----------------------------------------------------------------------------------------------

Если понять смысл и вникнуть суть данной возможности то получится обновление содержимого страницы без ее перезагрузки. Надеюсь что получилось не масло масляное smile
Сообщение отредактировал webanet - Пятница, 19 Июл 2013, 14:33:38
Деееенчик
Сообщений: 190
Репутация: 116

Сообщение # 3 | 12:13:55
condor-bird, у Вас баг на сайте из-за AJAX,когда на счетчики щелкать,то счетчики не открываются,а если стандартный счетчик щелкнуть то тогда появляется пустая страница только музыка вверху
Вот что появляется при клике на стандартный счетчик
Прикрепления: 8373511.png (7.9 Kb)

Благодарности в репутацию и в награды!
P.S Плюс под аватаркой)
сondor
Сообщений: 4661
Репутация: 1528

Сообщение # 4 | 12:16:09
Цитата (Деееенчик)
у Вас баг на сайте из-за AJAX,когда на счетчики щелкать,то счетчики не открываются,а если стандартный счетчик щелкнуть то тогда появляется пустая страница только музыка вверху


ну да, имеются некоторые нюансы которые следует учитывать. но все же в принципе скрипт рабочий, хотя имеются и другие, более лучше.
Деееенчик
Сообщений: 190
Репутация: 116

Сообщение # 5 | 14:03:17
condor-bird, я сейчас поставил,но удалил,сейчас опять ставить буду,у меня 2 счетчика не показывались,и 3D облако тегов.Думаю сейчас получится поставить.Спасибо за скрипт!Я бы сам такого не нашел!Очень полезный!

Добавлено (19 Июл 2013, 14:03:17)
---------------------------------------------
condor-bird,либо у меня не хватает мозгов,либо тут слишком много багов,к тому же мне мешает мое горизонтальное меню,короче устанавливать это я не буду,2 часа потратил в пустую.Спасибо,то что нашли скрипт!Жалко воспользоваться им не получится!Сразу половину сайта этот скрипт у меня хапает.


Благодарности в репутацию и в награды!
P.S Плюс под аватаркой)
DEVDRE
Сообщений: 1
Репутация: 0

Сообщение # 6 | 11:19:08
Здравствуйте! Помогите пожалуйста разобраться с uppod. Мне нужно сделать так, чтобы отключался работающий плеер при нажатии на плэй следующего. Вот нашёл на сайте uppod тему: Скрипт отключает работающий плеер, при запуске другого. Но почему - то не разберусь, что, куда вставлять, что поменять, чтобы работал скрипт??? Помогите, расскажите подробней, пожалуйста!

Вот ссылка на мой сайт, вид материалов изменил под себя: Минус на заказ
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Ajax » Как сделать музыку на AJAX (Непрерываемая музыка)
  • Страница 1 из 1
  • 1
Поиск: