My attempt to implement jQuery Mobile theme for Windows Phone (Metro style)
View the Project on GitHub sgrebnov/jqmobile-metro-theme
Theme NuGet package for Visual Studio
This theme provides a Metro user interface for Cordova apps using jQuery Mobile on Windows Phone 7.5.
Web demo for the jquerymobile.com site
Licensed under the Apache License, Version 2.0 (the "License")
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
jQM theme for Windows Phone is presented by jquery.mobile.metro.theme.css file and related images folder.
/themes/metro/
All additional theme plugins are located at /plugins folder
/plugins/app-bar/ - an Application Bar
/plugins/date-picker/ - Cordova plugin for WP that exposes the native DateTime picker
/plugins/progress-bar/ - implements porgress bar control
/plugins/toggle-button/ - toggle button
** Each plugin folder contains sample page with usage example.
There is also special js code exporting theme switching functionality located at
/themes/themeswitcher/jquery.mobile.themeswitcher.js
The jQM theme for Windows Phone is designed to work with Cordova on Windows Phone 7.5 for optimal integration. This is implemented by the following cordova plugins.
backButtonHandler.js - hardware back button handling functionality
dateTimePicker.js - js bridge for Cordova native DateTimePicker
jquery.cordova.metro.themeswitcher.js - provides functionality to apply system colors (uses phoneTheme.js below)
phoneTheme.js - js bridge for Cordova system colors detection plugin
Demo pages for the jquerymobile.com site reference (official demo for other developers).
/samples/jqm-public-demo/index.html
Windows Phone application based on Cordova framework to demonstrate all theme functionality (system colors, native UI elements). Does not contain any html pages inside, it uses absolute reference to test pages (see next section) located remotly.
/samples/WindowsPhone/MetroThemeDemoApp
jQuery Mobile gallery sample page (with some little modifications). Contains both html version and windows phone native application.
/tests/basic/gallery/
This sample page demonstrates all jQM theme for Windows Phone additional plugins/controls descibed above ('Additional plugins' section). Html only verison.
/tests/extra/all.html
Note. Pages above are used as a reference for Windows Phone demo application.
The following componets are required
This nuget package allows developers to apply a Metro style look and feel to Windows Phone HTML5 applications developed with Apache Cordova and jQuery Mobile.
To install jQMThemeForWindowsPhone, run the following command in the Package Manager Console
Install-Package jQMThemeForWindowsPhone