Articles Tagged with jquerymobile
You are currently browsing 2 articles tagged with jquerymobile.
New Project; SleekMobile
Published Monday 22nd of August 2011
Like I've mentioned before I've been working a little with jQuery Mobile lately and there's a few things I feel can be done differently.
jQuery Mobile requires you to put a lot of extra attributes in your HTML elements and it also injects a bunch of divandspanelements in your code.That's why I started writing my own. And instead of data-attributes or .classes SleekMobile is built using SASS @mixins.
Head over to the documentation to find out more.
Join 1 others and post a comment
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
spananddivelements 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 andspans.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?
Be the first to post a comment