StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can target specific classes that relate to specific widgets, reset their classes, and then add the themed class of your choosing:</p> <pre><code> //set your new theme letter var theme = 'e'; //reset all the buttons widgets $.mobile.activePage.find('.ui-btn') .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e') .addClass('ui-btn-up-' + theme) .attr('data-theme', theme); //reset the header/footer widgets $.mobile.activePage.find('.ui-header, .ui-footer') .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') .addClass('ui-bar-' + theme) .attr('data-theme', theme); //reset the page widget $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e') .addClass('ui-body-' + theme) .attr('data-theme', theme); </code></pre> <p><a href="http://jsfiddle.net/VNXb2/1/" rel="noreferrer">http://jsfiddle.net/VNXb2/1/</a></p> <p>This is by no means a fully functional code snippet, you will need to find any other widgets that you want updated when you switch the theme and add them to the code above. You can find what classes each widget has easily by using FireBug or another Developer Console.</p> <p><strong>UPDATE</strong></p> <p>When you take into account the <code>data-role="list-divider</code> elements this gets a little tricky:</p> <pre><code>var theme = 'c'; //the only difference between this block of code and the same code above is that it doesn't target list-dividers by calling: `.not('.ui-li-divider')` $.mobile.activePage.find('.ui-btn').not('.ui-li-divider') .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e') .addClass('ui-btn-up-' + theme) .attr('data-theme', theme); //target the list divider elements, then iterate through them to check if they have a theme set, if a theme is set then do nothing, otherwise change its theme to `b` (this is the jQuery Mobile default for list-dividers) $.mobile.activePage.find('.ui-li-divider').each(function (index, obj) { if ($(this).parent().attr('data-divider-theme') == 'undefined') { $(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') .addClass('ui-bar-b') .attr('data-theme', 'b'); } }) /*The rest of this code example is the same as the above example*/ </code></pre> <p>Here is a demo: <a href="http://jsfiddle.net/VNXb2/7/" rel="noreferrer">http://jsfiddle.net/VNXb2/7/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload