Beautiful jQuery Mobile Themes Part 10 – BlackBerry

Written by on April 7, 2015

Beautiful jQuery Mobile Themes Part 10 – BlackBerry

This is a heavily customized theme for jQuery Mobile based on the Blackberry.

It is built for jQuery Mobile 1.1 (technically it should work up to 1.3.2). Swatches are not included, theme acts as a single swatch.

Link

Website
GitHub

Working example

Working Plunker example can be found here:

Plunker Demo

Embedded example:

Other reviewed themes

Click here if you need to go to the original review article.

Code

Code example in case plnkr.co is offline.

HTML

<html>
	<head>
		<meta charset="utf-8">
		<title>BlackBerry 10 Jquery Mobile Kitchensink</title>
		<link rel="stylesheet" href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/lib/BlackBerry-JQM-all.css" />
		<script src="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/lib/BlackBerry-JQM-all.js"></script>
		<script type="text/javascript" src="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/lib/app.js"></script>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header" data-theme="b" data-position="fixed">
				<h1>BB10 JQM KitchenSink</h1>
			</div><!-- /header -->
			<div data-role="content">
				<ul data-role="listview" data-dividertheme="c">
					<li data-role="list-divider">Light Theme</li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/activityIndicator.html">Activity Indicator</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/actionbar_sample.html">Action Bar Sample</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/application_menu.html">Application Menu</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/bb_activity_indicator.html">BB10 Activity Indicator</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/building_blocks.html" data-transition="cover" >Building Blocks - Light</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/buttons.html">Buttons</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/button_groups.html">Button Groups</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/checkboxes.html">Checkboxes</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/collapsible_blocks.html">Collapsible Content Blocks</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/collapsible_set.html">Collapsible Sets</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/text.html">Content Formatting</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/controlgroups.html">Control Groups</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/form.html">Forms Gallery</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/gridview.html">Grid View</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/listview.html">List View</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/progress.html">Progress Bar</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/radio.html">Radio Button Groups</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/segmented_control.html">Segmented Control</a></li>
		   		<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/slider.html">Slider</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/textfields.html">Text Fields</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/text_validation.html">Text Field Validation</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/titlebar.html">Title Bar Components</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/toggleSwitch.html">ToggleSwitch</a></li>
					<li data-role="list-divider">Dark Theme</li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/building_blocks_dark.html">Building Blocks</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/buttons_dark.html">Buttons</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/button_groups_dark.html">Button Groups</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/checkboxes_dark.html">Checkboxes</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/collapsible_blocks_dark.html">Collapsible Content Blocks</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/collapsible_set_dark.html">Collapsible Sets</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/text_dark.html">Content Formatting</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/controlgroups_dark.html">Control Groups</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/form_dark.html">Forms Gallery</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/gridview_dark.html">Grid View</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/listview_dark.html">List View</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/radio_dark.html">Radio Button Groups</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/segmented_control_dark.html">Segmented Control</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/slider_dark.html">Slider</a></li>
					<li><a href="http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/toggleSwitch_dark.html">ToggleSwitch</a></li>
				</ul>
			</div><!-- /content -->
		</div><!-- /page -->
	</body>
</html>

Categories

Leave a Reply