pinax-theme-jquerymobile 0.2.4

a theme for Pinax based on jQuery Mobile

Quick Start

Include “pinax-theme-jquerymobile” in your requirements file and “pinax_theme_jquerymobile” in your INSTALLED APPS.

Make sure both template loaders and staticfiles finders includes app directories.

Site name comes from Sites fixture.

Your “site_base.html” should extend “theme_base.html”

nav & subnav blocks

“nav” and “subnav” blocks content should be something like:

<li><a data-role=”button” data-icon=”home” href=”{% url home %}”>{% trans “Home” %}</a></li>

“nav” block appears in header and “subnav” block in footer

Your pages should have blocks “head_title”, “body_title”(with same content as “head_title”) and “body” and should extend “site_base.html”.

for each installed app, in app templates in base.html or appname_base.html, you should have:

{% block body_title_base %}{% trans “Appname” %} : {% endif %}{% block body_title %}{% endblock %}{% endblock %}

somwhere before “body” block

The url name “home” should be defined as the homepage.

by default theme using jquery CDN with latest jquery, jquerymobile.min.js, jquerymobile.min.css

Forms

To style forms, do something like:

<form method=”POST” action=””>{% csrf_token %} <li data-role=”list-divider”>{% trans “Your Form Name Here” %}</li> <ul data-role=”listview” data-inset=”true”>{{ form.as_ul }} <li><button data-icon=”arrow-u” type=”submit”>{% trans “Submit Form” %}</button></li></ul></form>

Todo / Issues

• build additional templates for other Pinax-related apps

• add settings option to switch jQuery Mobile themes (A,B,C,D,E) in settings

• add settings option to load jQuery Mobile static files from CDN or use local files.