Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «js»

Загрузка новостей на AJAX 2013-09-29 02:56:23
... }}/ js/jquery-ias. js"></ ...
+ развернуть текст сохранённая копия
Сейчас технология AJAX(загрузка контента без обновления страницы), стала атрибутом любого современного сайта. Поэтому сегодня, буквально за минуту, прикрутим на свой сайт AJAX загрузку новостей . Почему так быстро? Потому что умные люди, уже сделали прекрасный Jquery плагин, который нам осталось только правильно подключить. Называется он Infinite Ajax Scroll. Последнюю версию, вы можете скачать с официального GitHab'a плагина. А я cразу перейду к установке... Установка 1. Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам ajks.zip (8.44 Kb)[/is-logged] и распаковываем в папку с своим шаблоном. 2. В main.tpl своего шаблона, перед /body, добавляем:
Код: <link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/jquery.ias.css" /> <script type="text/javascript" src="{{ tpl_url }}/js/jquery-ias.js"></script> <script type="text/javascript"> $(document).ready(function() { jQuery.ias({ container : '#content-main',// Название контейнера в котором находятся новости item: '.article',// Название контейнера самой новости pagination: '.pagination',// Ссылка на следующюю новость next: '.next-posts a',// Ссылка на следующюю новость loader: '<img src="{tpl_url}/images/loader.gif"/>',//Загрузчик, который появляется при подгрузке страниц triggerPageThreshold: 2, // Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка trigger: 'Ещё' // Текст кнопки }); }); </script> 6. Открываем pages.tpl : Плюс тут же меняем:
Код: [next-link]Вперед[/next-link] на
Код: <span class="next-posts">[next-link]Вперед[/next-link]</span> здесь главное правильно присвоить класс next-posts,если в pages.tpl не получается то можно прописать класс в файле variables.ini. Всё готово. Уверен это заняло у вас не многим больше минуты ;)
Пояснение Теперь немного подробнее что мы сделали. В первом шаге, мы загрузили сам скрипт,стили и картинку в шаблон . Во втором, мы подключили этот скрипт и стили на нужных нам страницах. Для новостей на главной, а для комментариев в полной новости. При необходимости, вы можете расширить список страниц, прочитав документацию. Например подключить ещё на странице "последние комментарии", при просмотре категори и т.д. Итог За считанные минуты, мы сделали современный сайт, без каких либо вмешательств в движок. Работа скрипта, сделана очень продумано: сохраняется навигация по страницам и есть поддержка "умеренной" загрузки (после нескольких страниц, просто появляется кнопка для загрузки). Имея желание, при помощи плагина можно сделать AJAX загрузку страниц своей мечты. Вот так ...
Тэги: js,, интерфейс
Angular.js vs Meteor.js vs Derby.js 2013-09-28 18:42:39
... . js и перевода сравнения meteor. js и derby. js ... писать на angular. js + express. js?». Конечно не ...
+ развернуть текст сохранённая копия

После поста о derby.js и перевода сравнения meteor.js и derby.js, главный вопрос, который был в комментариях, звучал примерно так: «Что всё таки лучше derby.js или meteor.js? И зачем вообще всё это нужно, когда можно писать на angular.js + express.js?». Конечно не совсем корректно сравнивать эти фреймворки, так как derby.js и meteor.js — это так называемые full-stack, а angular.js — mvc на клиенте.
Если нельзя, но хочется, то можно попробовать...
Тэги: angularjs, derbyjs, meteorjs, node.js, nodejs, web-разработка, веб-разработка
[Из песочницы] [UPD] Chain.js: связываем синхронные и асинхронные функции в цепи 2013-09-28 13:20:38
Chain.js — маленькая библиотека, ... знакомства с Common JS Promises. Само определение ...
+ развернуть текст сохранённая копия
Chain.js — маленькая библиотека, сделанная для создания цепочек из синхронных и асинхронных функций. Идея цепочек родилась после знакомства с Common JS Promises. Само определение «обещаний» говорит, что promise — это значение выполнения одной операции. Если вам захотелось что-то изобрести, придумать или создать, то вы просто обязаны попытаться связать эти операции в цепочки. Конечно, вы не обязаны, и это естественно, но для меня это стало основным мотивом. Перед этим я действительно столкнулся с некоторыми неудобствами связывания promise-операций, хотя ожидал что именно с этим они мне и помогут.
Читать дальше →
Тэги: chain, chain.js, deferred, javascript, promises, веб-разработка
SVG.js — достойный конкурент Raphaël 2013-09-25 16:24:52
... GitHub — SVG. js — удобная манипуляция ... SVG.min. js весит 34кб и ... SVG.filter. js размером в 3кб ...
+ развернуть текст сохранённая копия
Доброго времени суток уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становиться популярнее, более нужным чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël и что можно пожертвовать для дизайна и эффектов. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.
Другие плюсы SVG.js
Тэги: javascript, svg, svg.js, веб-разработка
Подгрузка новостей как ВКонтакте 2013-09-24 14:08:20
Подгрузка новостей как ВКонтакте . Открываем файл "pages.tpl" в вашем шаблоне. ...
+ развернуть текст сохранённая копия
Подгрузка новостей как ВКонтакте . Открываем файл "pages.tpl" в вашем шаблоне. Вставляем в самый низ следующий код: Код: <div id="ajax-next-page" style="display: none;">[next-link][/next-link]</div> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > $('body').height()-$(window).height()-10) { var nextPage = $('#ajax-next-page a').attr('href'); if (nextPage !== undefined) { $.ajax({ url: nextPage, success: function(data) { $('#ajax-next-page').remove(); $('#id вашего блока').append($('#id вашего блока', data).html()); } }) } } }); }); </script> ВНИМАНИЕ! Не нужно заменять имеющийся код. Нужно вставить в самый низ. Исправляем только"id вашего блока" изменяем на id блока с новостями Сохраняем. У меня получилось примерно так в pages.tpl Код: <div class="dpad"> <div id="pagenav"> <h4>[prev-link]«[/prev-link] {pages} [next-link]»[/next-link] </h4> </div> </div>
<div id="ajax-next-page" style="display: none;">[next-link][/next-link]</div> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > $('body').height()-$(window).height()-10) { var nextPage = $('#ajax-next-page a').attr('href'); if (nextPage !== undefined) { $.ajax({ url: nextPage, success: function(data) { $('#ajax-next-page').remove(); $('#text').append($('#text', data).html()); } }) } } }); }); </script> я использовал блок с id - text,и в файле news.table.tpl у меня получилось так Код: <div id="text"> {% if (handler == 'by.category') %} <h3>{{ category.name }}</h3> {% if category.icon.purl %}<img src="{{ category.icon.purl }}"/><br/>{% endif %} {{ category.info }} {% endif %} {% for entry in data %} {{ entry }} {% endfor %} {{ pagination }} </div> Это мой пример использования,ну все пользуемся .
Тэги: js,, интерфейс
Главная / Главные темы / Тэг «js»
|
Взлеты Топ 5
Падения Топ 5
|