Onfor

Метка: js

  • HighCharts. Скрытие и программный вызов Reset zoom.

    Не будем писать долгие вступительные речи и просто рассмотрим, как скрыть дефолтную и подключить кастомную кнопку Reset для Highcharts. Реализация, на самом деле достаточно проста: Сначала в параметрах диаграммы отключаем дефолтную кнопку: chart: { resetZoomButton: { theme: { display: ‘none’ } } } Далее добавляем на страницу новую кнопку и вешаем на неё обработчик: $(‘#resetZoom’).click(function()…

  • HighStock. HighCharts. Промежутки времени по оси X.

    При построении графиков, в случае вывода по оси X временной метки, может случиться ситуация, когда интуитивный интервал между датами не отображается на графике, вводя тем самым в заблуждение. На языке Highcharts данную проблему называют Irregular data. : ) На самом деле, решение проблемы зайдем всего лишь одну строку и гарантировано решит Вашу проблему. xAxis: {…

  • Yii2. Как обновить GridView при помощи javascript?

    Очень частая задача при работе с Yii2, да и не только, — обновление GridView после каких-либо действий — например групповых операций — без перезагрузки страницы. Мы разберем пример решения задачи на Yii2. Для этого разметка должна выглядеть примерно таким образом:

  • Javascript. jQuery. Реализация цикла foreach.

    В php есть очень удобный цикл перебора массивов — foreach. К сожалению, в Javascript нет его прямого аналога, но нужный нам функционал обеспечит jQuery. Сразу скажу, что цикл foreach, по своей сути, необходим для перебора ассоциативных массивов, которыми в javascript являются объекты. Для перебора простых массивов следует использовать следующий вариант: var array = [1, 3,…

  • Javascript. Decode URL.

    При передаче URL он часто попадает в скрипт в закодированной строке, которая непонятна пользователю. Чтобы вернуть её к человеческому виду — нужно сделать декодирование URL. Сейчас покажу пример, как это сделать. Привожу пример с Developer.Mozilla: decodeURI(«https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B»); // «https://developer.mozilla.org/ru/docs/JavaScript_шеллы» Как видите, метод невероятно прост и просто выполняет свою функцию. Добавлю лишь то, что метод также совместим…

  • Javascript. Аналог функции str_replace с php.

    При работе одновременно и на back- и на front-side иногда не хватает каких-то удобств одного языка при работе со вторым. Например, в Javasript не хватает полного аналога php-функции str_replace. На самом деле, аналог, как-бы вроде и есть. Это функция replace: var str = «Foo Bar Foo»; str = str.replace(«Foo», «!»); Но, несмотря на наши ожидания…

  • jQuery. Подключение обработчиков для новых элементов через on()

    При создании новых элементов на странице, к ним неизбежно нужно прикреплять обработчики событий, при помощи метода on(). Сейчас покажу действенный пример, как сделать это верно, чтобы никогда не допускать потер времени на столь простом вопросе. Ниже пример кода: $(‘#some-wrapper’).on(‘click’, ‘a.new-link’, function(e) { alert(‘Callback!!!’); e.preventDefault(); }); Пример достаточно прост. Здесь #some-wrapper — селектор неизменной обертки —…

  • Html. Javascript. Как асинхронно подключить скрипты?

    Подключение внешних скриптов на сайте — всегда узкое место. Это связано с тем, что страница отображается по мере загрузки скриптов. Это очень плохо при загрузке удаленных скриптов, при /загрузке тяжеловесных скриптов и т.д. Частично помогает известный метод переноса скриптов в конец страницы — но это также не 100% выход. Т.к. скрипты все равно будут подгружаться…

  • OpenLayers 2. Начало работы.

    Приведу простой алгоритм действий по созданию страницы с картой и выеденным на нее базовым WMS-слоем, основываясь на библиотеке OpenLayers 2. Итак, по пунктам. 1. Создаем html-разметку: OpenLayers Example 2. Создаем объект map. var map = new OpenLayers.Map(‘map’); 3. Создаем WMS-слой. var wms = new OpenLayers.Layer.WMS( «OpenLayers WMS», «http://vmap0.tiles.osgeo.org/wms/vmap0», {‘layers’:’basic’} ); map.addLayer(wms); 4 Объединяем все вместе.…

  • Javascript. jQuery. Как кастомизировать alert, confirm, prompt?

    Старые унилые окна alert, prompt, confirm давно отжили свое в плане их внешнего вида, но, при этом, не потеряв свою смысловую нагрузку. Сейчас расскажу о отличном плагине, с помощью которого можно вдохнуть новую bootstrap-based жизнь в эти компоненты. Итак, дело идет о плагине bootboxjs. На сайте есть прекрасно описаны примеры, поэтому не буду делать двойную…