Commit b9133cd0 authored by Sven Franck's avatar Sven Franck

added jqm_3 examples

parent 4a2742ad
#jqm-gadget,
#jqm-details-gadget{
width:45%;
float:left;
margin-left:10px;
}
#country{
font-weight: bold;
}
#jqm-doc-gadget{
width:100%;
float:left;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script data-main="js/require-renderjs.js" type="text/javascript" src="../../lib/require/require.js"></script>
<title>My own example</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Example 3</h1>
</div>
<div data-role="content">
<p>Gadget Interaction</p>
<a data-role="button" data-icon="arrow-r" href="page2.html" data-transition="slide" data-inline="true" data-mini="true">Page 2</a>
<div id="jqm-gadget" data-gadget="jqm-gadget.html"></div>
<!-- <div id="jqm-gadget-popup" data-gadget="jqm-gadget-popup.html"></div> -->
</div>
</div>
</body>
</html>
\ No newline at end of file
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ol data-role="listview" data-inset="true">
<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
<li><a href="index.html">Pulp Fiction</a></li>
<li><a href="index.html">Schindler's List</a></li>
</ol>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th data-priority="persist">Movie Title</th>
<th data-priority="2">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="4">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<th>2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
<tr>
<th>3</th>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>1972</td>
<td>97%</td>
<td>87</td>
</tr>
<tr>
<th>4</th>
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>1939</td>
<td>96%</td>
<td>87</td>
</tr>
<tr>
<th>5</th>
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>1962</td>
<td>94%</td>
<td>87</td>
</tr>
<tr>
<th>6</th>
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
<td>1964</td>
<td>92%</td>
<td>74</td>
</tr>
<tr>
<th>7</th>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>1967</td>
<td>91%</td>
<td>122</td>
</tr>
<tr>
<th>8</th>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>1939</td>
<td>90%</td>
<td>72</td>
</tr>
<tr>
<th>9</th>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>1952</td>
<td>89%</td>
<td>85</td>
</tr>
<tr>
<th>10</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>2010</td>
<td>84%</td>
<td>78</td>
</tr>
</tbody>
</table>
</body>
</html>
/*jslint browser: true, indent : 2, maxerr : 50, nomen : true, regexp : true,
sloppy : true */
/*global define: false, $: false, document: false, require: false */
define([], function () {
"use strict";
var start = function () {
require(['overrides', 'jquery', 'jqm', 'jquery.json', 'renderjs'],
function () {
console.log("done loading");
// START
if ($.mobile.autoInitializePage === false) {
// initialize JQM
$.mobile.initializePage();
console.log("init JQM");
// initialize renderJS
RenderJs.init();
// when all gadgets are loaded make sure JQM renders them
RenderJs.bindReady(
function () {
console.log("bindReady called, trigger create");
$("[data-gadget]").trigger('create');
});
}
});
};
return {"start": start};
});
/*jslint indent : 2, nomen : true, sloppy : true */
/*global jQuery: false, $: false, document: false */
(function ($, document) {
"use strict";
$(document).bind("mobileinit", function () {
var evt;
// [JQM] - trigger JQM with requireJS (pageinit vs docready)
$.mobile.autoInitializePage = false;
});
}(jQuery, document));
/*jslint browser: true, indent : 2, nomen : true, sloppy : true */
/*global require: false */
(function () {
"use strict";
require.config({
paths: {
controller: 'controller'
, overrides: 'overrides'
, jquery: '../../../lib/jquery/jquery'
, jqm: 'http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min'
, 'jquery.json':'../../../lib/json/jquery.json.min'
, renderjs: '../../../renderjs'
}
, shim: {
'overrides': { deps: ['jquery'] }
, 'jqm': { deps: ['jquery'], exports: 'mobile' }
, 'jquery.json': { deps: ['jquery'] }
, 'renderjs': { deps: ['jquery', 'jquery.json'] }
}
});
require(['controller', 'overrides', 'jquery', 'jqm', 'jquery.json', 'renderjs'],
function (Controller) {
Controller.start();
});
}());
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this will not be loaded by JQM -->
<title>Page 2</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Example 3 - Page 2</h1>
</div>
<div data-role="content">
<p>Page 2 - more gadgets!</p>
<a data-role="button" data-icon="arrow-l" href="index.html" data-rel="back" data-inline="true" data-mini="true">Back</a>
<div id="jqm-gadget-list" data-gadget="jqm-gadget-list.html"></div>
<!--
<div id="jqm-gadget-interact1" data-gadget="jqm-gadget-interact1.html"></div>
<div id="jqm-gadget-interact2" data-gadget="jqm-gadget-interact2.html"></div>
-->
</div>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment