Рубрика: Frontend

  • jQuery. Как обрабатывать события на несколько элементов?

    Вопрос не сложный и часто понятный, но помнится мне — был такой на Тостере — поэтому решил написать заметку о том, как можно одним откликом обработать события на нескольких элементах. Например, у Вас есть две формы, которые Вам нужно обработать. Может быть такое, что формы идентичные и вся логика их работы одинакова — при этом…

  • Javascript. Как узнать язык браузера?

    Язык браузера будет полезен при попытке вывода сообщения, понятного пользователю до выбора языка или любой другой смежной попытке. Так или иначе — узнать язык браузера на javascript — достаточно вероятная задача. Решается эта задача очень просто: var language = window.navigator ? (window.navigator.language || window.navigator.systemLanguage || window.navigator.userLanguage) : «ru»; language = language.substr(0, 2).toLowerCase();

  • jQuery. Как сделать регистронезависимый поиск по содержимому?

    В базовом jQuery есть метод, который может фильтровать данные по их содержимому — я имею ввиду метод — или же фильтр — contains. Но в нем ест одна проблема, которая делает его использование неполноценным и даже не нужным. Он регистрозависимый — т.е. строка «Privet» не равна строке «privet». Для страниц, которые предоставляют подобную фильтрацию простым…

  • jQuery. Как преобразовать текст в html-разметку?

    Иногда html-разметка передается простым сплошным текстом, при этом также часта задача по изменению структуры этой разметки. В таком случае следует преобразовать текст в DOM-разметку. На самом деле эта задача решается невероятно просто. Для этого есть функция parseHTML. var str = «hello, my name is jQuery.» ; html = $.parseHTML( str ) ; html.find(‘b’).remove(); alert( html.text()…

  • Smarty. Как сделать автонумерацию строк?

    При выводе таблиц, независимо от метода реализации часто нужно делать сквозную нумерацию. Это удобно, интуитивно и просто «так принято». Так или иначе, но в Smarty есть прекрасный метод для реализации этой задачи. Например, у нас есть секция: {section name=i loop=$data} Тут хотим вывести номер {/section} Чтобы вывести автонумерацию — следует воспользоваться следующим простым примером. {$smarty.section.i.iteration}

  • jQuery. Как обернуть каждые N блоков?

    Столкнулся с задачей, когда нужно обернуть каждые 2-3-4 блока, в зависимости от размера экрана общим враппером, чтобы выровнять высоту каждой строки. В этой статье речь пойдет именно о том, как обернуть каждые N блоков враппером. Ниже пример: … … … … … … … … … … Здесь мы создаем контекст с элементом, внутри которого…

  • Css. Как сделать стрелку?

    Применение различных CSS-селекторов и свойств помогает избежать использования графики, что существенно облегчает вес страницы и ускоряет ее загрузку. Думал описать теоретическую составляющую этого процесса, но решил скинуть линк на ресурс, которым я всегда пользуюсь. Это http://www.cssarrowplease.com/. Ресурс позволяет указать основные параметры и получить готовый для вставки css-код. Понять его более чем легко, если просто поиграть…

  • 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. На сайте есть прекрасно описаны примеры, поэтому не буду делать двойную…