Sometimes we face common problems we need to get sorted out right away. Here is a list with issues and questions you may encounter and how to solve them.
If we're used to working with jQuery, we may get a bit confused on how we can fire our function after the DOM is ready.
To trigger a similar document-ready event on pages loaded with AJAX, we can put the code we need to be executed inside a pageshow event: the function (or code) will then be executed each time the page is shown.
You may want to check out the pagecreate event to make sure your code is executed at the exact moment you want it to.
Consider the following code:
$(#element').bind ('swipe', function (e) {
var targetElement = e.target;
});To get the target element (the one we swiped on) we use e.target.
The jQuery Mobile framework makes it easy to create, add new themes, and modify existing ones through a theming system which is very simple to understand.
Before we begin, we must have a really clear idea what is, essentially, a jQuery Mobile swatch: each time we specify a data-theme attribute, the framework selects the color swatch we have specified from the CSS files of them we are using.
The separation of a theme (in which are defined structural styles) and swatches (colors and texture) is essential to achieve a wide range of visual effects.
New themes are composed of a stylesheet in which a number of color swatches are defined. Obviously, the theme can include images, changes in borders, padding, margins, and so on: it's all up to you.
To use a theme you have created, you need to add a link to the CSS right before the </head> tag:
<link rel="stylesheet" href="mynewtheme.css" />
As for swatches, jQuery Mobile dynamically looks for a CSS class that matches the swatch you have specified. So, for example, a data-theme="c" attribute added to a button will make jQuery Mobile apply the ui-btn-hover-c class anytime we hover the button, whereas data-theme="b" applies the ui-btn-hover-b class.
To create a new swatch for an existing theme, we basically copy the whole block of code for one swatch (that is, "a") and rename all selectors appropriately (that is, ui-btn-hover-a becomes .ui-btn-hover-g, and so on).
You can choose any letter but a, b, c, d, and e, as they are already used by jQuery Mobile.
After we have tweaked our G swatch, we can add a data-theme="g" attribute to our elements and see our custom swatch in action.