Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
250 lines (212 sloc) 6.72 KB
<!DOCTYPE HTML>
<!--
* Copyright 2013 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* 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.
-->
<html>
<head>
<title>jQuery Mobile for BlackBerry 10</title>
<meta http-equiv="Expires" content="-1">
<meta charset=utf-8>
<meta name=description content="jQuery Mobile for BlackBerry 10">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="icon" href="site/img/favicon.ico">
<style type="text/css">
body {
margin: 0;
background-color: #efefef;
font-family: 'TradeGothicNextW01-Regu',Helvetica,Verdana;
font-size: 1.4em;
}
h1 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
a:visited {
color: #7e4897;
}
a, a:link, a:active {
color: #008ab8;
}
.header {
background: #262626;
color: white;
width: 100%;
height: 4em;
margin-bottom: 1em;
}
.header a {
float: right;
text-decoration: none;
color: white;
padding: 1.2em .7em 1em .7em;
font-size: 1.2em;
border-right: 1px solid;
}
.header a:first-child {
border-right: none;
}
.main {
padding: 0 1em;
}
.ui-title {
display: !inline-block;
}
.column2 {
width: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
width: 100%;
float: right;
}
.btn, .btn:visited, .btn:link {
background: #b7429a;
border-radius: .2em;
padding: 1em .75em;
text-decoration: none;
color: white;
white-space: nowrap;
}
.btn:hover {
background: #a43b8a;
}
#gettingStarted{
background: #262626;
color: white;
margin-top: 3em;
}
#gettingStarted div {
padding: 0 2%;
}
#sample, #download {
display: none;
}
pre {
background-color: #606060;
font-size: 1em;
line-height: 1.3;
overflow: auto;
padding: 6px 10px;
max-width: 40em;
-webkit-border-radius: .25em;
-moz-border-radius: .25em;
border-radius: .25em;
}
.highlightCode {
background-color: #606060;
}
#b4b {
margin-top: .8em;
margin-bottom: 3em;
}
#buttons {
white-space: nowrap;
}
.normal {
font-weight: normal;
}
@media screen and (min-width: 50em) {
.column2 {
width: 50%;
}
#sample, #download {
display: inline-block;
}
}
iframe {
-moz-transform: scale(0.3, 0.3);
-webkit-transform: scale(0.3, 0.3);
-o-transform: scale(0.3, 0.3);
-ms-transform: scale(0.3, 0.3);
transform: scale(0.3, 0.3);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
border: none;
}
.z10 {
max-height: 500px;
padding: 87px 0 0 31px;
margin: 0 auto;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: url('site/img/Z10.png') no-repeat;
overflow: hidden;
}
</style>
</head>
<body>
<div class="header">
<a href="https://github.com/blackberry/jQueryMobile-BB10-Theme/tree/master/docs">Docs</a>
<a href="#gettingStarted">Getting Started</a>
</div>
<div class="main">
<div class="column2">
<div id="b4b">
<h1>jQuery Mobile</h1>
<h1><span class="normal">Built for</span> BlackBerry</h1>
</div>
<div id="buttons">
<a id="download" class="btn" href="https://raw.github.com/blackberry/jQueryMobile-BB10-Theme/master/dist/1.0.0/BlackBerry-JQM-1.0.0.zip">Download v1.0</a>
<a class="btn" href="kitchenSink/index.html">Live Demo</a>
</div>
</div>
<div id="sample" class="column2">
<div class="z10">
<iframe src="kitchenSink/index.html" width="768" height="1280px"></iframe>
</div>
</div>
</div><!-- /content -->
<div id="gettingStarted" class="content">
<div>
<h2>Getting Started</h2 >
<div class="column2">
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My Page&lt;/title&gt;
&lt;link rel="stylesheet" href="BlackBerry-JQM-all.min.css" /&gt;
&lt;script src="BlackBerry-JQM-all.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div data-role="page"&gt;
&lt;div data-role="header"&gt;
&lt;h1&gt;My Title&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;
&lt;div data-role="content"&gt;
&lt;p&gt;Hello world&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
<div class="column2">
<p>
You will notice that this example does not include jQuery.js, jQueryMobile.css or jQueryMobile.js, this is because all of the files need are combined into <span class="highlightCode">BlackBerry-JQM-all.min.css</span> and <span class="highlightCode">BlackBerry-JQM-all.min.js</span>, this is done to reduce download overhead on the device and improve overall performance. If you prefer to include each file separately please check out the <a href="docs/README.md">getting started</a> documentation.
</p>
</div>
</div>
</div>
</body>
</html>