Thoughts on jQuery Mobile
Published Monday 22nd of August 2011
I've been working with jQuery Mobile a bit lately and while it's a really great lib with awesome developers behind it, I felt that there's a few things that could be done differently.
For one it requires you to write a lot of extra HTML. Here's an example of a connected list of buttons with icons:
<!-- Normal HTML -->
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</nav>
<!-- jQuery Mobile -->
<nav data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="arrow-r" data-theme="c">Item 1</a>
<a href="#" data-role="button" data-icon="arrow-r" data-theme="d">Item 2</a>
</nav>
As you can see there's quite a lot more code in the jQM version, and most of it has only to do with styling.
jQuery Mobile then runs through your HTML and injects span and div elements here and there. Here's an example of a list of links:
<!-- Normal HTML -->
<ul>
<li><a href="#">Link</a></li>
</ul>
<!-- jQuery Mobile -->
<ul data-role="listview" data-inset="true" data-theme="c">
<li><a href="#">Link</a></li>
</ul>
<!-- After jQuery Mobile's finished -->
<ul data-role="listview" data-inset="true" data-theme="c" class=" ui-listview ui-listview-inset ui-corner-all ui-shadow ">
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" class="ui-link-inherit">Link</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
</ul>
This can get somewhat confusing when you're trying to script or even style elements and suddenly your HTML structure is completely different.
It's particularly annoying when it comes to forms and updating form elements that have been turned into divs and spans.
Also, I felt it wasn't entirely straight forward on how to best override some of jQM's default settings for paddings/margins and even themes.
What are your thoughts on jQuery Mobile?
- Tags
- Comments
- No comments
Bookmark this Article