jQuery Mobile Documentation

jQuery Mobile is a unified, HTML5-based user interface system for mobile device platforms, built on jQuery and jQuery UI. It uses progressive enhancement and features a flexible, themeable design.

Compatibility Note: jQuery Mobile 1.4.x is compatible with jQuery core versions from 1.8.3 to 1.11.1 and 2.1.1.

Important: This project is no longer maintained. For more information, refer to the project status blog post.

To build the library from source, you need node.js and grunt-cli installed.

Build Targets

• js: Resolves dependencies, builds, concats, and minifies JavaScript.
• css: Resolves dependencies, builds, concats, and minifies CSS (structure and theme).
• demos: Builds JS/CSS and prepares documentation for static consumption.
• lint: Validates JavaScript files using JSHint.

Default Build

From the project root, run:

npm install
grant

To create a new theme, follow these steps:

1. Copy the default folder from CSS/Themes to a new folder named after your theme (e.g., css/themes/my-theme).
2. Add customizations to the jquery.mobile.theme.css file within that new folder.
3. Run the following command from the project root to build the CSS:

THEME=my-theme grunt build:css

The output will be available in the $PROJECT_ROOT/dist directory.

jQuery Mobile uses AMD modules for dependency management. You can reduce the file size by removing specific modules from the core mobile meta module located at js/jquery.mobile.js.

For example, to exclude form widgets (checkboxradio, button, slider, textinput, select), remove their corresponding lines from the define array in js/jquery.mobile.js and then run the build command:

grant build:js

The documentation and testing pages require a server running PHP 5+ (Apache is recommended).

Requirements

• Apache Modules: mod_rewrite.so, mod_expires.so, and mod_headers.so must be enabled.
• Installation Methods:
  • Use MAMP (OSX) or XAMP (OSX/Windows).
  • Use an existing web server (e.g., ~/Sites on OSX).
  • Use Vagrant by adding the project's Vagrant branch and running vagrant up.

When setting up a development environment using RequireJS for jQuery Mobile, you can configure the paths mapping to resolve dependencies. This configuration maps module names to their respective file locations within the project structure, including RequireJS plugins, jQuery, jQuery UI, and testing frameworks like QUnit.

requirejs.config( {
	"paths": {
		// requireJS plugins
		"text": "../external/requirejs/plugins/text",
		"json": "../external/requirejs/plugins/json",

	"jquery": "../external/jquery/jquery",
		"jquery-ui": "../external/jquery-ui",
		"jquery-plugins": "../external/jquery/plugins",
		"qunit": "../external/qunit/qunit",
		"qunit-assert-classes": "../external/qunit-assert-classes/qunit-assert-classes",

"tests": "../tests"
	}
} );

Use grunt test to run the automated tests. You can customize the test execution using several flags:

• --suites=<suite_names>: Run specific test suites (e.g., grunt test --suites=table,slider).
• --suites=!<suite_name>: Exclude specific suites (e.g., grunt test --suites=!navigation).
• --types=<unit|integration>: Target specific test types. Use unit,integration for both (default).
• --jqueries=<versions>: Specify which jQuery versions to test (e.g., grunt test --jqueries=1.11.1,git).

Examples

Run only unit tests:

grant test --types=unit

Run integration tests excluding navigation:

grant test --types=integration --suites=!navigation