Название функции, которая отвечает за loading-layer

alexz15 · 2010-03-31 23:30:09

Есть необходимость использовать лоадер для других целей.
Подскажите, как называется JS функция, которая отвечает за вывод loading.gif ?

vitaly · 2010-03-31 23:54:03

alexz15, его использует ajax библиотека (engine/includes/js/ajax.js)

alexz15 · 2010-04-01 00:03:46

vitaly, я хочу совместно с ajax.js использовать jquery для аякс-навигации без перезагрузки страницы. Пробовал эту функцию center_div() - не работает.
Можно сделать так:

$('#loading-layer').show();
...
$('#loading-layer').hide();

а в div-e прописать стили по центру. но может есть возможность вместо '#loading-layer' прописать функцию от ajax.js ?

Отредактировано alexz15 (2010-04-01 00:10:45)

vitaly · 2010-04-01 00:10:51

alexz15, в принципе можно,..
Попробуй сделать так:

<script type="text/javascript">
var loadLayer = new center_div();
loadLayer.divname = 'loading-layer';
loadLayer.move_div();
</script>

p.s. Естественно перед этим должна быть загружена сама библиотечка
p.p.s. Это для конфигурирования и центровки. А вот функции "показать" / "скрыть" ты можешь использовать из jQuery.

alexz15 · 2010-04-01 00:22:29

vitaly, спасибо!
Буду пробовать :)

Евгений · 2010-04-01 10:41:43

alexz15, если получиться, то не мог бы ты потом расписать по шагам реализацию? :rolleyes:

alexz15 · 2010-04-01 23:51:23

я делаю так: демо, источник, скачать. То есть, у меня меню категорий на AJAX-е (можно сделать не только категории).
Только в nav.js я добавил loading-layer:

var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
    $(container_div).animate({opacity:0}, //Turn the opacity to 0
        function(){ // the callback, loads the content with ajax
		
		///////////////////////////////
		$('#loading-layer').show(); // показываем gif-loading 
		
        $(container_div).load(url+" "+content_div, //only loads the selected portion
        function(){
		
			///////////////////////////////
			$('#loading-layer').hide(); // скрываем gif-loading
			
            $(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
            }
        );
    });
},
ajaxify_links: function(elements){
    $(elements).click(function(){
        AjaxContent.getContent(this.href);
        return false; //prevents the link from beign followed
    });
},
init: function(params){ //sets the initial parameters
    container_div = params.containerDiv;
    content_div = params.contentDiv;
    return this; //returns the object in order to make it chainable
    }
    }
}();

div:

<div id="loading-layer" style="position:absolute;top:50%;left:50%"><img src="{tpl_url}/images/loading.gif" alt="" /></div>

Если используется рейтинг новостей, то стили рейтинга нужно перенести в главный файл стилей.

И так вроде нормально.
Но если таким образом открыть полную новость и добавить комментарий (все замечательно открывается и добавляется), то следующий переход в категорию (или новость) почему-то осуществляется без loading-layer поэтому думаю сделать вывод loading-layer через функцию из ajax.js.

Виталий, я пока не понял, loadLayer.move_div() - это и есть функция?

Отредактировано alexz15 (2010-04-01 23:54:02)

vitaly · 2010-04-02 00:12:08

alexz15, да.

// Инициализируем объект класса center_div (объект будет в переменной loadLayer)
var loadLayer = new center_div();
// Устанавливаем внутреннюю переменную класса (говорим ID нашего div'а)
loadLayer.divname = 'loading-layer';
// Вызываем функцию
loadLayer.move_div();

alexz15 · 2010-04-02 02:09:14

vitaly, спасибо еще раз! Но у меня никак не получается использовать эту функцию..
Как ее можно вставить сюда вместо '#loading-layer':?

$('#loading-layer').show();

Кстати, если кто-нибудь будет использовать навигацию Ajax в категориях, то вот решение выделения активной категории меню:

<html>  
<head> 
<title>Untitled</title>  
<style type="text/css">  
#navigationDiv a.selected {
font-weight:700
}
#navigationDiv a.noselected {
font-weight:400
}
</style>  
<script type="text/javascript">  
function highlightLinks(obj) {
   var linkList = document.getElementById("navigationDiv").getElementsByTagName("a");
   for (i = 0; i < linkList.length; i++) {
      linkList[i].className = "noselected";
   }
   obj.className = "selected";
}
</script>  
</head>  
<body>  

<div id="navigationDiv">

    <a href="#" onclick="highlightLinks(this)">category1</a><br />
    <a href="#" onclick="highlightLinks(this)">category2</a><br />
    <a href="#" onclick="highlightLinks(this)">category3</a><br />

</div>

</body>  
</html>

PS. Вот как это выглядит на сайте

Отредактировано alexz15 (2010-04-09 14:22:15)

Next Generation CMS :: Форум поддержки

Объявление

#1 2010-03-31 23:30:09

Название функции, которая отвечает за loading-layer

#2 2010-03-31 23:54:03

Re: Название функции, которая отвечает за loading-layer

#3 2010-04-01 00:03:46

Re: Название функции, которая отвечает за loading-layer

#4 2010-04-01 00:10:51

Re: Название функции, которая отвечает за loading-layer

#5 2010-04-01 00:22:29

Re: Название функции, которая отвечает за loading-layer

#6 2010-04-01 10:41:43

Re: Название функции, которая отвечает за loading-layer

#7 2010-04-01 23:51:23

Re: Название функции, которая отвечает за loading-layer

#8 2010-04-02 00:12:08

Re: Название функции, которая отвечает за loading-layer

#9 2010-04-02 02:09:14

Re: Название функции, которая отвечает за loading-layer

Подвал форума