Записи с меткой «javascript»

Выбираем технологии и инструменты для разработки веб приложений

1 Выбор и настройка инструментов для разработки фронтенда (только самые важные): 1.1 Twitter bootstrap — фреймворк позволяет писать качественную верстку и делать адаптивный дизайн. Сайт можно будет смотреть на разных устройствах. 1.2 requirejs — служит для написания js модулей по принципу amd и для асинхронной загрузки скриптов 1.3 globaljs — позволяет делать локализацию на клиенте. …

Внедряем js модуль в query plugin

Например написан модуль SelectControl по принципу amd : define(«SelectControl», [«jquery»/* TODO uncomment: , «addJqueryPlugin» */], function($) { function SelectControl() { this.init.apply(this, arguments); } $.extend(SelectControl.prototype = new ParentClass(), { defaults: { element: $() , someProperty: «someProperty» } , init: function (options) { $.extend(true, this, ParenClass.defaults, this.defaults, options); } , someMethod: function() { console.log(«I am » + this.element); …

Soap вызов, используя jquery.ajax

Иногда не хочется делать запрос с клиента на свой сервер, который в свою очередь, используя soap клиент, делает запрос еще на один сервер (soap сервер). Сделаем запрос на soap сервер сразу с клиента. Код js на клиенте var soapMessage = ‘<soap:Envelope xmlns:xsi=»http://www.w3.org/2001/XMLSchema-instance» xmlns:xsd=»http://www.w3.org/2001/XMLSchema» xmlns:soap=»http://schemas.xmlsoap.org/soap/envelope/»>’ + ‘<soap:Body>’ + ‘<SomeMethod>’+ ‘<Arg1>Arg1 Value</Arg1>’+ ‘<Arg2>Arg2 Value</Arg2>’+ ‘</SomeMethod>’+ ‘</soap:Body>’ + ‘</soap:Envelope>’; …

Редактор текста и html — TinyMCE

TinyMCE — бесплатный javascript HTML редактор, легко внедрить в сайт, имеет кучу плагинов и гибко настраивается. Заходим на официальный сайт и скачиваем редактор. Для новостей я настроил редактор таким образом tinymce.init({ selector: «textarea», plugin_preview_width: 550, plugin_preview_height: 600, plugins: [ «advlist textcolor nonbreaking link image media emoticons directionality visualchars visualblocks table template pagebreak fullscreen code preview» ], …

Реализуем менеджер картинок в редакторе tinymce

На официальном сайте tinymce предлагают подключить файловый менеджер MoxieManager. Но этот менеджер вовсе не бесплатный. Реализуем свой менеджер для картинок. Покажем кнопку «обзор». Для этого при инициализации плагина tinymce передадим такие настройки: setup : function(ed) { file_browser_callback_types: ‘image’, // файловый менеджер будет работать только для картинок file_browser_callback : function(field_name, url, type, win){ var filebrowser = «/Images/ImageManagerSearch?type=» + …

Расширяем shadowbox

Shadowbox нужен для просмотра галереи фотографий и видео во всплывающем окне. Добавим некоторые возможности в этот плагин. Очищаем данные из кэша  для определенной галереи. Создаем метод clearGallery: Shadowbox.clearGallery = function (gallery) { var self = this; // Найдем все элементы галереи и удалим их for (var i in self.cache) { if (self.cache[i].gallery === gallery) { self.removeCache(self.cache[i].link); …

Работаем с JQuery Deferred

В JQuery есть такой удобный объект — Deferred, который позволяет выполнять отложенные действия в зависимости от состояния, которое нужно установить в тот момент, когда мы хотим выполнить нужные действия. Так же можно выполнять последующие действия уже после установки состояния данного объекта. Создаем deferred объект var defObj = new $.Deferred(); Добавляем отложенные действия. defObj.done( function(data1, data2, dataN) …

Пишем модули на javascript и загружаем их при помощи requirejs

В ECMAScript 6 есть уже классы. Но думаю их пока рано еще использовать. Опишу способ создания модулей, которым пользуюсь я. Создадим файл MyClass.js и напишем в нем модуль MyClass var MyClass = (function($, ParentClass) { /** * Конструктор является прокси для метода init * @constructor */ function MyClass() { this.init.apply(this, arguments); } /** * В прототипе содержатся …

Фиксим jquery плагин ajaxfileupload

Плагин служит для загрузки файлов на сервер. Плагин очень старый и давно не поддерживается разработчиками. Но так случилось что я использую это плагин очень давно, и по мере надобности приходилось его фиксить и расширять. Сейчас я использую чаще плагин от разработчиков mail — FileApi, но иногда все же использую ajaxfileupload, его преимущество что он содержит мало кода и следовательно …

Делаем все картинки кликабельные в редакторе tinymce

И так задача такая: некие картинки добавляются с помощью редактора tinymce и нужно чтоб при клике на картинку открывалась галерея картинок (в моем случае это shadowbox галерея). Для того чтобы картинки открывались в галереи shadowbox, нужно сделать обертки над картинками: <a href=»images/max/my.jpg» rel=»shadowbox[mygallery];player=img;»><img src=»images/thumbnails/my.jpg»/></a> Реализация: привязываемся к событиям BeforeSetContent и SaveContent. Перед вставкой контента в редактор, удаляем все …