В данном уроке расмотрим как сделать так, чтобы при нажатии кнопки “Like” в фейсбуке или “поделится” пользователь получал осмысленное описание и хорошую картинку для своей страницы социального сервиса. Требования: должно быть установлено дополнение PhpThumbOf Для примера, возмём мой предыдущий пост Онлайн газета MODX Today, при нажатии кнопки “Send to FACEBOOK” у меня на фейсбук странице появилась следующая запись с уменьшеным изображением для этого поста: ...
Карта сайта - это xml файл, который содержит структуру сайта, время обновления страниц сайта и другую информацию для поисковиков. Карту сайта можно создать несколькими способами, рассмотрим два из них: Сниппет GoogleSiteMap Создайте ресурс с именем sitemap.xml Тип содержимого (Content Type) - XML, шаблон - Пустой Blank template Установите дополнение GoogleSiteMap В содержимое поле контента вставьте вызов сниппета [[!GoogleSiteMap?]], отключив при этом редактор кода и сохраните. [[$googleAdsence?]] Карта сайта готова! Параметры GoogleSitemap Параметр Описание По-умолчанию ...
Общепринятой вещью для Javascript является манипулирование секциами страницы. Как обычно включаем стандартный Ext JS и стили и давайте создадим страницу с контейнером, который нужно убрать: Когда вы загрузите это в браузере, то вы увидите только контейнер div1: div2 будет удалёт. Обратите, что селектор в Ext JS не использует хэштэг (#) как это делает jQuery. Ext JS селект Итак, Ext JS делает селекции наподобие как jQuery? У этой библиотеки есть несколько способов. Один - это метод select(), который использует нотации схоже с jQuery. ...
Как и раньше подключаем нужные стили и скрипты: Далее добавляем некоторые элементы управления для простой анимации, которая будет менять размер контейнера: Чтобы подготовить div и сделать нашу анимацию красивее, добавим чуть стилей: В конце добавим наш контейнер в тело документа: Когда закончите, то у вас получится что-то вроде Когда вы откроете это в браузере, то увидите, что контейнер увеличится и станет квадратом. Демо Пример 1 Другие команды Также можно использовать setHeight или setWidth методы, например: ...
Моя Ext JS тестовая страница : Анимация Ext.onReady(function() { var myDiv1 = Ext.get('div1'); myDiv1.setHeight(200); myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'}); }); .myDiv { border: 1px solid #AAAAAA; background: yellow; width: 200px; height: 35px; } # Анимация [[$googleAdsence?]]
Вы можете использовать выпадающий список для показа опций значений ТВ в менеджере, но что делать если вам нужно это же только во фронтэнде? Простейшим решением является создание обычной текстовой Переменной шаблона и сниппета для генерирования выпадающего списка во фронтэнде. Эта техника пригодится, когда пользователю нужно выбрать варианты из имеющихся в списке разделённом запятыми, который задан в Переменной шаблона и показать эти опции в виде выпадающего списка в форме. Создайте TV с названием DropdownOptions. Значение по умолчанию можно оставить как есть, но можете создать его (например, красный, синий, зелённый или @INHERIT). ...
Использование Javascript для загрузки другого файла С Ext JS можно просто делать Ajax запросы к другим страницам. Этот пример использует простой Ext JS инструмент: всплывающее окно. Обратите внимание, что включаем как и ранее стили и скрипты в наш HTML: a.html Мы передали имя функции обратного вызова к команде Ext.onReady(). Содержимое файла a.html: × Запятые В MODX менеджере используется много Ext JS и вы увидите характерный момент - вначале строки ставятся запятые, далее добавляются элементы к массиву. Это делает чуть легче комментирование нежелательных элементов. Здесь будет показан именно такой стиль форматирования, чтобы вы уже мысленно были готовы увидеть его в работающих скриптах MODX ...
Ext JS тестовая страница function buildWindow() { var win = new Ext.Window({ id: 'my_window' , title : "Добро пожаловать в JS" , width : 300 , height: 150 , layout: "fit" , autoLoad: { url : "https://modx.ws/demo/b.html" , scripts : true } }); win.show(); } Ext.onReady(buildWindow); # Вступление в Ext JS Я загрузил этот HTML в корень сайта и я включил Ext JS библиотеки, которые идут в комплекте с MODX менеджером. [[$googleAdsence?]]
Вот моя Ajax загрузка! [[$googleAdsence?]] function highlightWindow() { var win = Ext.getCmp('my_window'); var winBody = win.body; winBody.highlight(); } highlightWindow.defer(1000);
Ваш первый Ext JS Script MODX идёт в комплекте с Ext JS (на самом деле с MODExt, его собственная модификация Ext JS, но они довольно-таки близки для начинающих). Нашей первой задачей - будет создание HTML станицы, которая загружает все необходимые Ext JS компоненты. А именно 3 компонента: - Стили (CSS) - Базовый JS - Все JS В этом примере создадим файл в корне вашего MODX сайта, назовём его “a.html” и дадим ссылку на Ext JS компоненты, которые находятся в составе MODX менеджера (возможно вам нужно будет поменять пути, если вы поменяли путь manager/ на другой). ...