Кнопка читать далее — оформление в плагине

Вопросы
Пример кнопки можно глянуть тут: tjournal.ru

Вытащил код и прилепил в плагин, но не хочет работать gif'ка загрузки:

style.css 
.show-more {
padding: 0 0 60px;
}

.show-more a {
border: 3px solid #eee;
border-radius: 50px 50px 50px 50px;
color: #ccc;
display: block;
font-size: 1.8em;
left: 50%;
padding: 10px 40px;
position: relative;
text-align: center;
text-decoration: none;
width: 320px;
}

.show-more a:hover {
border: 3px solid #000;
color: #000;
}

.loading-bar {
height: 48px;
width: 400px;
background: url(../img/preview-preloader-bar-48.gif) 0 0 repeat-x;
border-radius: 50px;
margin: 30px auto;
display: none;
text-indent: -9000px;
}

.show-more .loading-bar {
display: block;
}


paging.tpl из плагина ajaxloader:
        {if !$oConfig->GetValue('plugin.ajaxload.autoajaxload')}
            <div class="show-more">
				<a id="ajaxload_more" href="javascript:ls.ajaxload.getMore('{$sAjaxLoad}')">{$aLang.plugin.ajaxload.ajaxload_more}</a>
			<div class="loading-bar">идет загрузка</div>
			</div>
        {/if}


На сайте оригинала, при нажатии на кнопку в div class=«show-more» добавляется класс loading.
Вопрос в том, как заставить при нажатии на кнопку, во время загрузки постов показывать загрузочную gif?

8 комментариев

avatar
Если Вы про эту гифку, то я ее вижу.
avatar
Я на другом сайте делаю, это как пример.
avatar
Full css:
.show-more {
    padding: 0 0 60px;
}
.show-more a {
    border: 3px solid #EEEEEE;
    border-radius: 50px;
    color: #CCCCCC;
    display: block;
    font-size: 1.8em;
    left: 50%;
    margin-left: -200px;
    padding: 10px 40px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 320px;
}
.show-more a:hover {
    border: 3px solid #000000;
    color: #000000;
}
.show-more .loading-bar {
    background: url("../img/preview-preloader-bar-48.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 50px;
    display: none;
    height: 48px;
    margin: 30px auto;
    text-indent: -9000px;
    width: 400px;
}
.show-more.loading .loading-bar {
    display: block;
}
.show-more.loading a {
    display: none;
}


А вот это в js (надо адаптировать):
$("body").on("click", ".line-paper .show-more a", function () {
            $(".line-paper .show-more").addClass("loading");
            params = {
                count: paper_count,
                offset: paper_offset,
                type: 0,
                author_id: 0,
                json: 1,
                priority: "date_popular"
            };
            $.get("/ajax/paper_type", params, function (e) {
                if (e.error == undefined && e.length > 0) {
                    var d = "";
                    $.each(e, function (f, g) {
                        d += $.nano(c, g)
                    });
                    $(".paper-period .paper").isotope("insert", $(d));
                    b = b + 1;
                    $(".paper-period .paper").css("height", 2000 * b - 10);
                    $(".paper-period .paper").css("overflow", "hidden");
                    paper_offset += paper_count;
                    $(".line-paper .show-more").removeClass("loading")
                }
            });
            return false
        })
avatar
Попробую, спасибо.
avatar
Не выходит все же.

Сделал так paging.tpl:
{if !$oConfig->GetValue('plugin.ajaxload.autoajaxload')}
			<div class="line-paper" id="line-paper">
				<div class="show-more">
					<a id="ajaxload_more" href="javascript:ls.ajaxload.getMore('{$sAjaxLoad}')">{$aLang.plugin.ajaxload.ajaxload_more}</a>
					<div class="loading-bar">идет загрузка</div> 
				</div>
			</div>
        {/if}


button.js:
$("body").on("click", ".line-paper .show-more a", function () {
            $(".line-paper .show-more").addClass("loading");
            params = {
                count: paper_count,
                offset: paper_offset,
                type: 0,
                author_id: 0,
                json: 1,
                priority: "date_popular"
            };
            $.get("/ajax/paper_type", params, function (e) {
                if (e.error == undefined && e.length > 0) {
                    var d = "";
                    $.each(e, function (f, g) {
                        d += $.nano(c, g)
                    });
                    $(".paper-period .paper").isotope("insert", $(d));
                    b = b + 1;
                    $(".paper-period .paper").css("height", 2000 * b - 10);
                    $(".paper-period .paper").css("overflow", "hidden");
                    paper_offset += paper_count;
                    $(".line-paper .show-more").removeClass("loading")
                }
            });
            return false
        })


и добавил загрузку срикпта в PluginAjaxload.class.php:
public function Init() {
        $this->Viewer_AppendScript(Plugin::GetTemplateWebPath(__CLASS__).'js/ajaxload.js');
		$this->Viewer_AppendScript(Plugin::GetTemplateWebPath(__CLASS__).'js/button.js');
		$this->Viewer_AppendStyle(Plugin::GetTemplateWebPath(__CLASS__).'css/style.css');
        //$this->Viewer_AppendScript(Plugin::GetTemplateWebPath(__CLASS__).'js/paginator.js');
        //$this->Viewer_AppendStyle(Plugin::GetTemplateWebPath(__CLASS__).'css/paginator_vk.css');
	}
avatar
Уберите класс .line-paper — у вас ведь его нет
avatar
В данный момент не происходит инъекция класса .loading в .show-more — что-то с js не то.
avatar
у меня нет плагина ajaxloader, но в LS в коробке есть такая фича — в ленте подгрузка тоже ajax-овая и там как раз во время подгрузки добавляется класс userfeed_loader. думаю, можно сделать по подобию и добавленному классу назначить гифку.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.