Skip to content

R
renderjs
Commit 7325bdca authored by Sven Franck's avatar Sven Franck
Browse files
Options

added jqm_4 interaction example

parent 4fdcc595
Expand all Show whitespace changes
Inline Side-by-side
Showing with 347 additions and 0 deletions
examples/jqm_4/css/jqm-gadget-list.css 0 → 100644
View file @ 7325bdca
li {
border: 2px solid blue !important;
}
\ No newline at end of file
examples/jqm_4/css/jqm-gadget-recursive.css 0 → 100644
View file @ 7325bdca
li {
border: 2px solid red !important;
}
\ No newline at end of file
examples/jqm_4/css/jqm-gadget-recursive2.css 0 → 100644
View file @ 7325bdca
div {
background-color: orange;
}
\ No newline at end of file
examples/jqm_4/css/jqm-gadget.css 0 → 100644
View file @ 7325bdca
.table_css th, .table_css tr{
border: 1px solid yellow;
}
\ No newline at end of file
examples/jqm_4/css/jqm.css 0 → 100644
View file @ 7325bdca
This diff is collapsed.
examples/jqm_4/index.html 0 → 100644
View file @ 7325bdca
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jqm.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" id="index">
<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="g1" data-gadget="jqm-gadget.html"></div>
</div>
<div data-gadget="" id="main-interactor"
data-gadget-connection="[
{&quot;source&quot;: &quot;g1.gadget_call1&quot;, &quot;destination&quot;: &quot;g2.gadget_call2&quot;}
]">
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/jqm_4/jqm-gadget-list.html 0 → 100644
View file @ 7325bdca
<html>
<head>
<meta charset="utf-8">
<!-- <script type="text/javascript" src="js/jqm-gadget-list.js"></script>
<link rel="stylesheet" href="css/jqm-gadget-list.css" />
-->
</head>
<body>
<p>Recursive gadget</p>
<!-- <div id="jqm-gadget-recursive2" data-gadget="jqm-gadget-recursive2.html"></div> -->
<ol data-role="listview" data-inset="true">
<li><a href="index.html" data-value="10">The Godfather</a></li>
<li><a href="index.html" data-value="23">Inception</a></li>
<li><a href="index.html" data-value="33">The Good, the Bad and the Ugly </a></li>
<li><a href="index.html" data-value="76">Pulp Fiction</a></li>
<li><a href="index.html" data-value="100">Schindler's List</a></li>
</ol>
<!--
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("jqm-gadget-list");
gadget.gadget_list = function (){another_function();};
});
//]]>
</script>
-->
</body>
</html>
examples/jqm_4/jqm-gadget-recursive.html 0 → 100644
View file @ 7325bdca
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jqm-gadget-recursive.js"></script>
<link rel="stylesheet" href="css/jqm-gadget-recursive.css" />
</head>
<body>
<p>HELLO recursive</p>
<input type="button" value="click me" id="clickediclick" icon="gear" iconpos="left" data-inline="true"/>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
var gadget = RenderJs.GadgetIndex.getGadgetById("g2");
console.log("attaching gadget_call2");
gadget.gadget_call2 = function (){gadget_call2();};
});
//]]>
</script>
</body>
</html>
examples/jqm_4/jqm-gadget.html 0 → 100644
View file @ 7325bdca
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jqm-gadget.js"></script>
<link rel="stylesheet" href="css/jqm-gadget.css" />
</head>
<body>
<p>Recursive Gadget</p>
<div id="g2" data-gadget="jqm-gadget-recursive.html"></div>
<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>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
console.log("attaching gadget_call1 and 3");
gadget1 = RenderJs.GadgetIndex.getGadgetById("g1");
gadget1.gadget_call3 = function (e){gadget_call3("test parameter")};
gadget1.gadget_call1 = function (e){gadget_call1()};
});
//]]>
</script>
</body>
</html>
examples/jqm_4/js/controller.js 0 → 100644
View file @ 7325bdca
/*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 () {
$(document).on('pagebeforeshow','div:jqmData(role="page")', function () {
RenderJs.init();
RenderJs.bindReady(
function () {
$("[data-gadget]").filter(
function() {
return $(this).jqmData("bound") !== true;
}
).each(
function () {
$(this).jqmData("bound",true).trigger('create');
}
)
}
);
});
// initialize JQM
if ($.mobile.autoInitializePage === false) {
$.mobile.initializePage();
}
});
};
return {"start": start};
});
\ No newline at end of file
examples/jqm_4/js/jqm-gadget-list.js 0 → 100644
View file @ 7325bdca
$(document).on('click','ol li a', function(e) {
console.log("triggered click!!!");
e.preventDefault();
$('#slider-1').val($(e.target).jqmData('value')).slider("refresh");
});
var another_call = function (va) {
alert(va);
};
// trigger
$(document).on('click','#clickediclick',function() {
RenderJs.GadgetIndex.getGadgetById('jqm-gadget').gadget_call();
});
\ No newline at end of file
examples/jqm_4/js/jqm-gadget-recursive.js 0 → 100644
View file @ 7325bdca
var gadget_call2 = function() {
console.log("gadget_call2 registered");
};
var gadget_call4 = function() {
console.log("gadget_call4 registered");
}
\ No newline at end of file
examples/jqm_4/js/jqm-gadget-recursive2.js 0 → 100644
View file @ 7325bdca
var another_function = function() {
$('li').toggleClass('ui-listview-inset ui-shadow');
};
examples/jqm_4/js/jqm-gadget.js 0 → 100644
View file @ 7325bdca
var gadget_call1 = function() {
console.log("gadget_call1 registered");
};
var gadget_call3 = function(p) {
console.log("gadget_call3 registered, parem = "+p);
}
// trigger does not work!
$(document).on('click','#clickediclick',function() {
console.log("click trigger");
var g = RenderJs.GadgetIndex.getGadgetById('g1')
g.gadget_call1();
});
\ No newline at end of file
examples/jqm_4/js/jqm.js 0 → 100644
View file @ 7325bdca
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/jqm_4/js/overrides.js 0 → 100644
View file @ 7325bdca
/*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));
examples/jqm_4/js/require-renderjs.js 0 → 100644
View file @ 7325bdca
/*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: 'jqm'
, '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
examples/jqm_4/page2.html 0 → 100644
View file @ 7325bdca
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jqm.css" />
<script data-main="js/require-renderjs.js" type="text/javascript" src="../../lib/require/require.js"></script>
<title>Page 2</title>
</head>
<body>
<div data-role="page" id="page2">
<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>
<a href="page3.html" data-ajax="false" data-role="button">Refresh</a>
</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7