{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Техноблог, заметки с тегом: jQuery",
    "home_page_url": "https:\/\/blog.toliklunev.ru\/tags\/jquery\/",
    "feed_url": "https:\/\/blog.toliklunev.ru\/tags\/jquery\/json\/",
    "icon": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Анатолий Лунёв",
        "url": "https:\/\/blog.toliklunev.ru\/",
        "avatar": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "14",
            "url": "https:\/\/blog.toliklunev.ru\/all\/jqueryhelpers\/",
            "title": "Швейцарский нож jQuery-разработчика — jQuery Helpers",
            "content_html": "<p>Каждый веб-разработчик, работающий с jQuery, со временем начинает собирать удачные решения и ходы, для того, чтобы применять их в будущих проектах. Со временем таких решений накапливается много, некоторые из них перерастают в плагины, а некоторые небольшие, но полезные куски кода копируются из проекта в проект. Похожим образом получилось и у меня. И сейчас я хочу поделиться с вами своими наработками. Надеюсь, для кого-то из вас они тоже окажутся полезными :-)<\/p>\n<p>Можно <a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\" target=\"_blank\">посмотреть на Гитхабе<\/a> или сразу <a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/archive\/master.zip\">скачать<\/a>.<\/p>\n<p><a href=\"#makeActive\">makeActive<\/a><br \/>\n<a href=\"#cycle\">cycle<\/a><br \/>\n<a href=\"#genHtml\">genHtml<\/a><br \/>\n<a href=\"#insertCount\">appendCount, prependCount<\/a><br \/>\n<a href=\"#onlyDigits\">onlyDigits<\/a><br \/>\n<a href=\"#parseInt\">parseInt, parseFloat<\/a><br \/>\n<a href=\"#breakdown\">breakdown<\/a><br \/>\n<a href=\"#cleaner\">cleaner<\/a><br \/>\n<a href=\"#dataObject\">dataObject<\/a><br \/>\n<a href=\"#popup\">popup<\/a><br \/>\n<a href=\"#transmit\">transmit<\/a><br \/>\n<a href=\"#attr\">src, href<\/a><br \/>\n<a href=\"#disable\">disable, enable<\/a><br \/>\n<a href=\"#hash\">hash, pathname<\/a><br \/>\n<a href=\"#run\">run<\/a><br \/>\n<a href=\"#removeSpaces\">removeSpaces<\/a><br \/>\n<a href=\"#reverse\">reverse<\/a><br \/>\n<a href=\"#ending\">ending<\/a><\/p>\n<p><h2 id=\"makeActive\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/makeActive.js\" target=\"_blank\">makeActive<\/a> (’classname’ || object{classname, selector})<\/h2><\/p>\n<p>Часто возникает ситуация, когда нужно назначить класс таким образом, чтобы элемент был единственным его обладателем в ряду соседних элементов. Эту проблему помогает решить makeActive. По умолчанию назначается класс active. Нужный класс можно передать строкой :<\/p>\n<pre class=\"e2-text-code\"><code>$(this).makeActive('my_class_name');<\/code><\/pre><p>Или передать объект, заключающий в себе название класса и селектор соседних элементов:<\/p>\n<pre class=\"e2-text-code\"><code>$(this).makeActive({\r\n\tclassName: 'my_class_name',\r\n\tselector: 'div'\r\n});<\/code><\/pre><p>Пример:<\/p>\n<iframe height=\"170\" width=\"600\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/1\/show\/light\/\" frameborder=\"0\"><\/iframe>\n<pre class=\"e2-text-code\"><code>$('div').click(function(){\r\n    $(this).makeActive();\r\n});<\/code><\/pre><p><h2 id=\"cycle\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/cycle.js\" target=\"_blank\">cycle<\/a> (’next’ || ’prev’)<\/h2><\/p>\n<p>Не знаю как вам, а мне иногда катастрофически не хватает циклических next \/ prev в jQuery. Эту проблему я решил, написав хелпер cycle, который принимает next или prev в качестве строки.<\/p>\n<p>Пример:<\/p>\n<pre class=\"e2-text-code\"><code>$('#prev').click(function(){\r\n    $('.wrap div.active').cycle('prev').makeActive();\r\n});\r\n\r\n$('#next').click(function(){\r\n    $('.wrap div.active').cycle('next').makeActive();\r\n});<\/code><\/pre><iframe  height=\"200\" width=\"600\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/4\/show\/light\/\" frameborder=\"0\"><\/iframe>\n<p><h2 id=\"genHtml\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/gen.js\" target=\"_blank\">genHtml<\/a> (code, count)<\/h2><\/p>\n<p>Иногда бывает задача создать определённое количество html элементов, например для пагинации слайдера.<\/p>\n<p>Конструкции вроде:<\/p>\n<pre class=\"e2-text-code\"><code>$('.slide').each(function(i){\r\n\tvar $li = $('&lt;li&gt;').append('&lt;a&gt;&lt;span&gt;'+ (i+1) +'&lt;\/span&gt;&lt;\/a&gt;');\r\n\t$pagination.append($li);\r\n});<\/code><\/pre><!-- или что хуже:\r\n<code>$('ul').append('<li><\/li><li><\/li><li><\/li><li><\/li><li><\/li>');<\/code>> --><p>меня всегда бесили. Поэтому был написан хелпер genHtml, который принимает тег строкой и количество.<\/p>\n<p><h2 id=\"insertCount\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/gen.js\" target=\"_blank\">appendCount, prependCount<\/a><\/h2><\/p>\n<p>Вставляют нужное количество html элементов на страницу, используя genHtml. Синтаксис такой же как у genHtml.<\/p>\n<p><h2 id=\"onlyDigits\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/onlyDigits.js\" target=\"_blank\">onlyDigits<\/a><\/h2><\/p>\n<p>Иногда требуется текстовый инпут, в который физически можно ввести только цифры. К великому сожалению, стандартные средства html не предлагают такого функционала (даже <mark>&lt;input type=&quot;number&quot; \/&gt;<\/mark> в котором это было бы логично). Для этого существует хелпер onlyDigits.<\/p>\n<pre class=\"e2-text-code\"><code>$('input').onlyDigits();<\/code><\/pre><iframe height=\"87\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/9\/show\/light\/\" frameborder=\"0\"><\/iframe>\n<p><h2 id=\"parseInt\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/parse.js\" target=\"_blank\">parseInt, parseFloat<\/a><\/h2><\/p>\n<p>Вызываются у блока с числом или инпута и возвращают число сразу с типом number.<\/p>\n<p><h2 id=\"breakdown\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/breakdown.js\" target=\"_blank\">breakdown<\/a><\/h2><\/p>\n<p>С помощью этого хелпера, можно разбить число пробелами по разрядам.<\/p>\n<pre class=\"e2-text-code\"><code>$('#num').breakdown();<\/code><\/pre><iframe height=\"92\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/14\/show\/light\/\" frameborder=\"0\" ><\/iframe>\n<p><h2 id=\"cleaner\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/cleaner.js\" target=\"_blank\">cleaner<\/a><\/h2><\/p>\n<p>В современных приложениях реализована такая удобная, особенно на мобильных устройствах, штука, как крестик для очистки инпута от введённых в него данных. В браузеры, к сожалению, перекочёвывать она не сильно спешит. Насколько я знаю, такой крестик есть только в интернет экплорере, но последний не предоставляет возможностей для оформления этого элемента.<\/p>\n<p>Для этих целей был написан хелпер cleaner. Он добавляет рядом с инпутом <mark>&lt;a class=&quot;clean&quot; \/&gt<\/mark>, который можно оформить с помощью css как душе угодно.<br \/>\nЖелательно перед использованием обернуть инпут в какой-нибудь див, а крестик прижать вправо абсолютным позиционированием. А после этого добавить инпуту паддинг справа, чтобы текст не заезжал на крестик. Да, к сожалению всё это не так удобно, как мне хотелось бы, но работаю над упрощением. Для стандартного использования написан <a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/cleaner.scss\" target=\"_blank\">css-код<\/a>, который желательно просто копировать в основной файл стилей своего проекта и изменять.<\/p>\n<iframe height=\"87\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/13\/show\/light\/\" frameborder=\"0\" style=\"margin-left: -5px;\"><\/iframe>\n<p><h2 id=\"dataObject\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/dataObject.js\" target=\"_blank\">dataObject<\/a><\/h2><\/p>\n<p>Данный хелпер позволяет доставать javascript-объекты из атрибутов data-*. Используется также, как и стандартный метод .data() в jQuery, только вместо строки возвращает объект.<\/p>\n<p><h2 id=\"popup\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/popup.js\" target=\"_blank\">popup<\/a> ([object{close, link}])<\/h2><\/p>\n<p>Иногда нужен простой попап, который бы закрывался при клике за его пределами. Для этого был написан хелпер popup. При вызове он добавляет элементу класс shown, и удаляет при закрытии (я использую добавление класса, а не show\/hide, чтобы управлять анимацией появления при помощи css). Метод может принимать объект, с атрибутами link и close. link — ссылка, при клике на которую будет показан попап. close — элемент внутри попапа (крестик), при клике на который попап будет закрыт.<\/p>\n<p><h2 id=\"transmit\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/transmit.js\" target=\"_blank\">transmit<\/a> (’method’, [options array])<\/h2><\/p>\n<p>Все мы постоянно пишем колбеки для разных событий, и почти всегда используем анонимные функции для этого. Но конструкции вроде этой:<\/p>\n<pre class=\"e2-text-code\"><code>$(window).load(function(){\r\n\t$('#object').click();\r\n});<\/code><\/pre><p>мне кажутся нелогичными и трудночитаемыми, когда намного логичней было бы так:<\/p>\n<pre class=\"e2-text-code\"><code>$(window).load($('#object').click);<\/code><\/pre><p>Но jQuery перезаписывает контекст у колбеков. И конечно в 99% случаев это удобно, но не в данном.<br \/>\nХелпер transmit частично решает эту проблему, позволяя писать так:<\/p>\n<pre class=\"e2-text-code\"><code>$(window).load($('#object').transmit('click'));<\/code><\/pre><p><h2 id=\"attr\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/attr.js\" target=\"_blank\">src, href<\/a><\/h2><\/p>\n<p>Возвращают\/изменяют значение атрибутов src и href у элементов на странице. Мне не хватало таких методов как val() у инпутов, только для ссылок.<\/p>\n<p><h2 id=\"disable\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/disable.js\" target=\"_blank\">disable, enable<\/a><\/h2><\/p>\n<p>disable — добавляет атрибут <mark>disabled<\/mark> у элементов, enable — убирает.<\/p>\n<p><h2 id=\"hash\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/attr.js\" target=\"_blank\">hash, pathname<\/a><\/h2><\/p>\n<p>Возвращают\/изменяют соответствующие части href у ссылок на странице.<\/p>\n<p><h2 id=\"run\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/run.js\" target=\"_blank\">run<\/a><\/h2><\/p>\n<p>Запускает функцию в контексте текущей выборки, а не для каждого элемента отдельно, в отличии от <a href=\"http:\/\/api.jquery.com\/each\/\" target=\"_blank\">each<\/a>.<\/p>\n<p><h2 id=\"removeSpaces\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/removeSpaces.js\" target=\"_blank\">removeSpaces<\/a><\/h2><\/p>\n<p>Удаляет пробелы между элементами. Служит, в основном, для решения проблем с инлайн-блоками.<\/p>\n<p><h2 id=\"reverse\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/reverse.js\" target=\"_blank\">reverse()<\/a><\/h2><\/p>\n<p>Разворачивает порядок следования jQuery объектов.<\/p>\n<p><h2 id=\"ending\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/ending.js\" target=\"_blank\">ending<\/a> (end1, end2, end3, count)<\/h2><\/p>\n<p>Хелпер для формирования окончаний у слов во множественном числе.<\/p>\n<iframe height=\"87\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/11\/show\/light\/\" frameborder=\"0\" style=\"margin-left: -5px;\"><\/iframe>\n<p>Для определения возможностей браузера я рекомендую использовать <a href=\"http:\/\/modernizr.com\/\" target=\"_blank\">Modernizr<\/a>. Но в своей работе я сталкивался с тем, что не все нужные мне тесты были реализованы в нём. Поэтому я написал парочку своих, расширив jQuery.support, и оформив всё в файл jquery.support.js.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/calc.js\" target=\"_blank\">jQuery.support.calc<\/a><\/h2><\/p>\n<p>Определяет, поддерживает  ли браузер css-функцию calc. Актуально для старых версий оперы и 8-го экслорера.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/flash.js\" target=\"_blank\">jQuery.support.flash<\/a><\/h2><\/p>\n<p>Определяет, установлен ли Flash на компьютере пользователя.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/mobile.js\" target=\"_blank\">jQuery.support.mobile<\/a><\/h2><\/p>\n<p>Детектит мобильные браузеры.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/preserve3d.js\" target=\"_blank\">jQuery.support.preserve3d<\/a><\/h2><\/p>\n<p>Проверяет, поддерживается ли браузером 3D представления. Актуально, если вы хотите использовать в своём проекте <mark>transform-style: preserve-3d;<\/mark>.<\/p>\n<p>Хелперы собираются в один файл с помощью <a href=\"http:\/\/gruntjs.com\/\" target=\"_blank\">Гранта<\/a>. Если проект получит развитие, в дальнейшем будет добавлена страница онлайн-сборки, где вы сможете собрать jQuery Helpers, выбрав только  необходимые вашему проекту хелперы.<\/p>\n<p><strong>UPD:<\/strong> Произошла какая-то фигня, и я не заметил, как публикнул недописанный черновик. Но это даже хорошо, т. к. я бы ещё месяц его мусолил. Так что кто увидел — тссс.<\/p>\n",
            "date_published": "2014-08-07T17:47:06+04:00",
            "date_modified": "2017-01-21T21:51:09+04:00",
            "_date_published_rfc2822": "Thu, 07 Aug 2014 17:47:06 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/jqueryhelpers\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        }
    ],
    "_e2_version": 3254,
    "_e2_ua_string": "E2 (v3254; Aegea)"
}