Customize Your jQuery Mobile Interface with Specialized Plugins

JavaScript libraries like jQuery Mobile can help you develop mobile apps rapidly, but your results often have a generic feel that leaves your apps resembling many other jQuery Mobile apps. If you want your mobile development work to stand apart, you may have to deviate from the standard jQuery Mobile library and employ plugins or other forms of customization.

In this article, I’ll demonstrate one of these specialized plugins—Audero Text Changer, a jQuery Mobile plugin that I designed to solve a common problem that developers encounter while working with the jQuery Mobile framework. As you might know, the links in jQuery Mobile are rendered as buttons, but they aren’t actually buttons from a technical standpoint. For this reason, the button widget doesn’t apply to them. Suppose you want to change several elements’ text in one of your mobile layouts, including some of these links. Since the links aren’t buttons, you can’t change the text directly inside them and use the method button('refresh') to redraw the button, because you’ll get an error. So, to regain control of your mobile link labeling, you can rely on Audero Text Changer.

As you’ll see in a few moments, Audero Text Changer is very simple and lightweight. In fact, the minimized version is less than 1kb, but it allows you to easily change the text of all the elements of your mobile page layouts without breaking the enhancements of the mobile framework. It also has very high backward compatibility, since it’ll work on jQuery Mobile version starting as far back as 1.0.1.

Let’s now dive into the code.

The Basics

Since I like to code “the right way” and illustrate best practices, the plugin will use the jQuery plugin suggested guidelines. Explaining how to build a jQuery plugin, or from another point of view, rearranging the content of the linked page, is outside the scope of this article, so I’ll give you just a brief overview. I’ll use an IIFE so the plugin won’t collide with other libraries that use the dollar sign as an abbreviation. As suggested by the guidelines, I’ll also use namespacing so that the plugin will have lower chances of being overwritten by other libraries loaded by the same page. As you can guess from the plugin name, the chosen namespace is auderoTextChanger. At line 2 of the next snippet, I added the namespace as a property of the $.fn object. To make sure that I don’t overload the $.fn object, instead of adding every method to it, I’ll write them inside an object literal. In this way, you can call the plugin’s methods by passing the method’s name as a string.

Please note that the plugin needs just one method, to serve its purpose of changing the text of layout elements. Its only parameter is a string that represents the text to write. As you can see, line 5 of the listed code is slightly different compared to the guidelines, because I added the test typeof method === 'string'. In this way, you can simply call the plugin by passing a raw string instead of wrapping the latter in an object literal.

(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);

Getting Started

As I pointed out in the introduction, you don’t have to worry about the elements’ type given to the plugin, because it will manage them for you. When jQuery Mobile applies its code enhancements, it adds several elements to the DOM and, based on the type of the element, adds different elements (like <span> and <div>) in different elements’ positions (sometimes as parent element, other times as a child). This fact leads the text of many elements to be moved from their original position or to be copied into other elements. For example, if the enhanced tag is a <button>, jQuery Mobile wraps it in a <div>. Moreover, it adds a child element <span> that has yet another <span>,which actually contains the desired text. I know it can be a little complex, but this is the way the framework works. Thus, based on the type of the element, our plugin has to search for the right element to replace the text. Take a look at the code below.

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);
      });
   }
};

Let’s explain the above function. If the element is a link, the plugin changes its title attribute and the text of its inner element having class="ui-btn-text". That is the element where jQuery Mobile has put the link’s display text. If the element is a true button or an input having type submit or reset, the text isn’t a child of these elements, but a child within a child element.

How to Use the Plugin

Using this plugin is very simple. Just call the auderoTextChanger() method on the element(s) that you want to modify by changing their display text. You don’t need to worry about the type of the elements, the plugin will manage that part of the process for you. Suppose that you have the following code:

<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>

A basic call to the plugin is:

<script>
   $(document).on(
      'pageinit',
      function () {
         $('#info-button').auderoTextChanger('About...');
         $('#demo-button').auderoTextChanger('A Private Text');
         $('#box input').auderoTextChanger('A New Text!');
      }
   );
</script>

Conclusion

As you’ve seen in this article, the problem of keeping control over your interface content without breaking the jQuery Mobile framework can be easily solved with few useful lines of jQuery Mobile plugin code. Feel free to use Audero Text Changer in your projects as you like since I released it dual licensed under the MIT and GPL-3.0 licenses. You can download the plugin through my repository to study the whole code or download the minified version.