Библиотеки JavaScript, такие как jQuery Mobile, могут помочь вам быстро разрабатывать мобильные приложения, но ваши результаты часто имеют общий вид, который делает ваши приложения похожими на многие другие приложения jQuery Mobile. Если вы хотите, чтобы ваши разработки для мобильных устройств выделялись, вам, возможно, придется отклониться от стандартной библиотеки jQuery Mobile и использовать плагины или другие формы настройки.
В этой статье я продемонстрирую один из этих специализированных плагинов — Audero Text Changer, плагин jQuery Mobile, который я разработал для решения типичной проблемы, с которой сталкиваются разработчики при работе с фреймворком jQuery Mobile. Как вы, возможно, знаете, ссылки в jQuery Mobile отображаются в виде кнопок, но на самом деле они не являются кнопками с технической точки зрения. По этой причине виджет кнопки к ним не относится. Предположим, вы хотите изменить текст нескольких элементов в одной из ваших мобильных раскладок, включая некоторые из этих ссылок. Поскольку ссылки не являются кнопками, вы не можете изменить текст непосредственно внутри них и использовать button('refresh') метода button('refresh') чтобы перерисовать кнопку, потому что вы получите ошибку. Таким образом, чтобы восстановить контроль над своей мобильной ссылкой, вы можете положиться на Audero Text Changer.
Как вы увидите через несколько минут, Audero Text Changer очень прост и легок. На самом деле, свернутая версия составляет менее 1 КБ, но она позволяет вам легко изменять текст всех элементов макетов вашей мобильной страницы, не нарушая улучшений мобильной платформы. Он также имеет очень высокую обратную совместимость, так как он будет работать с версией jQuery Mobile, начиная с 1.0.1.
Давайте теперь погрузимся в код.
Основы
Поскольку мне нравится кодировать «правильный путь» и иллюстрировать лучшие практики, плагин будет использовать рекомендации, предложенные плагином jQuery . Объяснение того, как создать плагин jQuery или, с другой точки зрения, реорганизация содержимого связанной страницы, выходит за рамки этой статьи, поэтому я дам вам только краткий обзор. Я буду использовать IIFE, чтобы плагин не сталкивался с другими библиотеками, которые используют знак доллара в качестве сокращения. В соответствии с рекомендациями, я также буду использовать пространство имен, чтобы у плагина было меньше шансов быть перезаписанным другими библиотеками, загруженными на той же странице. Как вы можете догадаться из названия плагина, выбранное пространство имен будет auderoTextChanger . Во второй строке следующего фрагмента я добавил пространство имен как свойство объекта $.fn . Чтобы убедиться, что я не перегружаю объект $.fn , вместо того, чтобы добавлять к нему каждый метод, я напишу их внутри литерала объекта . Таким образом, вы можете вызывать методы плагина, передавая имя метода в виде строки.
Обратите внимание, что плагину нужен только один метод, чтобы служить цели изменения текста элементов макета. Его единственный параметр — это строка, представляющая текст для записи. Как видите, строка 5 перечисленного кода немного отличается от рекомендаций, потому что я добавил метод test typeof method === 'string' . Таким образом, вы можете просто вызвать плагин, передав необработанную строку, а не оборачивая последнюю в литерал объекта.
(function($){ $.fn.auderoTextChanger = function(method) { if (methods[method]) return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); else if (typeof method === 'object' || typeof method === 'string' || !method) return methods.init.apply(this, arguments); else $.error('Method ' + method + ' does not exist on jQuery.auderoTextChanger'); }; })(jQuery);
Начиная
Как я указывал во введении, вам не нужно беспокоиться о типе элементов, передаваемых плагину, потому что он будет управлять ими за вас. Когда jQuery Mobile применяет свои улучшения кода, он добавляет несколько элементов в DOM и, в зависимости от типа элемента, добавляет различные элементы (например, <span> и <div> ) в позиции различных элементов (иногда как родительский элемент, другие раз в детстве). Этот факт приводит к тому, что текст многих элементов перемещается из исходного положения или копируется в другие элементы. Например, если расширенный тег — это <button> , jQuery Mobile переносит его в <div> . Кроме того, он добавляет дочерний элемент <span> который имеет еще один элемент <span> <span> , который фактически содержит нужный текст. Я знаю, что это может быть немного сложно, но так работает фреймворк. Таким образом, в зависимости от типа элемента наш плагин должен искать правильный элемент для замены текста. Посмотрите на код ниже.
var methods = { init: function(text) { return this.each(function() { if ($(this).is('a')) $(this).find('.ui-btn-text').attr('title', text).text(text); else if ($(this).is('button, input[type="submit"], input[type="reset"]')) $(this).closest('.ui-btn').find('.ui-btn-text').text(text); else $(this).text(text); }); } };
Давайте объясним вышеупомянутую функцию. Если элемент является ссылкой, плагин меняет свой атрибут title и текст его внутреннего элемента, имеющий class="ui-btn-text" . Это элемент, в который jQuery Mobile поместил отображаемый текст ссылки. Если элемент является истинной кнопкой или входом, имеющим тип submit или reset, текст не является дочерним элементом этих элементов, но является дочерним элементом в дочернем элементе.
Как использовать плагин
Используя этот плагин очень просто. Просто вызовите метод auderoTextChanger() для элементов, которые вы хотите изменить, изменив их отображаемый текст. Вам не нужно беспокоиться о типе элементов, плагин будет управлять этой частью процесса за вас. Предположим, что у вас есть следующий код:
<div id="box"> <a href="#" id="info-button" data-icon="info">Info</a> <button id="demo-button">Button</button> <input id="reset-button" type="reset" value="Reset" /> <input id="submit-button" type="submit" value="Submit" /> </div>
Основной вызов для плагина:
<script> $(document).on( 'pageinit', function () { $('#info-button').auderoTextChanger('About...'); $('#demo-button').auderoTextChanger('A Private Text'); $('#box input').auderoTextChanger('A New Text!'); } ); </script>
Вывод
Как вы видели в этой статье, проблему сохранения контроля над содержимым интерфейса без нарушения инфраструктуры jQuery Mobile можно легко решить с помощью нескольких полезных строк кода плагина jQuery Mobile. Не стесняйтесь использовать Audero Text Changer в своих проектах так, как вам нравится, поскольку я выпустил его с двойной лицензией по лицензиям MIT и GPL-3.0 . Вы можете скачать плагин через мой репозиторий, чтобы изучить весь код или скачать уменьшенную версию.