Skip to content

R
renderjs
Commit 75cc8201 authored by Sven Franck's avatar Sven Franck
Browse files
Options

jqm_6 example using custom and jqm events

parent ca80c242
Expand all Show whitespace changes
Inline Side-by-side
Showing with 410 additions and 0 deletions
examples/jqm_6/css/jqm-gadget-list.css 0 → 100644
View file @ 75cc8201
li {
border: 2px solid blue !important;
}
\ No newline at end of file
examples/jqm_6/css/jqm-gadget-recursive.css 0 → 100644
View file @ 75cc8201
li {
border: 2px solid red !important;
}
\ No newline at end of file
examples/jqm_6/css/jqm-gadget-recursive2.css 0 → 100644
View file @ 75cc8201
div {
background-color: orange;
}
\ No newline at end of file
examples/jqm_6/css/jqm-gadget.css 0 → 100644
View file @ 75cc8201
.table_css th, .table_css tr{
border: 1px solid yellow;
}
\ No newline at end of file
examples/jqm_6/css/jqm.css 0 → 100644
View file @ 75cc8201
This diff is collapsed.
examples/jqm_6/index.html 0 → 100644
View file @ 75cc8201
<!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-interactor1"
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_6/jqm-gadget-list.html 0 → 100644
View file @ 75cc8201
<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="g4" 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() {
var g3 = RenderJs.GadgetIndex.getGadgetById("g3");
g3.gadget_call3 = function (){gadget_call3();};
});
//]]>
</script>
</body>
</html>
examples/jqm_6/jqm-gadget-recursive.html 0 → 100644
View file @ 75cc8201
<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>
<!-- cannot trigger g1 with a regular document binding, because going and forth re-binds into too much recursion
onclick="RenderJs.GadgetIndex.getGadgetById('g1').gadget_call1()"
-->
<button 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 g2 = RenderJs.GadgetIndex.getGadgetById("g2");
console.log("attaching gadget_call2");
g2.gadget_call2 = function (){gadget_call2();};
});
//]]>
</script>
</body>
</html>
examples/jqm_6/jqm-gadget-recursive2.html 0 → 100644
View file @ 75cc8201
<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 recursive2</p>
<button type="button" value="no func" id="dooo" icon="gear" iconpos="left" data-inline="true"/>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
var g4 = RenderJs.GadgetIndex.getGadgetById("g4");
g4.gadget_call4 = function (){gadget_call4();}
g4.gadget_call5 = function(){gadget_call5();};
g4.updatelayout = function (){
console.log("triggering updatelayout");
};
});
//]]>
</script>
</body>
</html>
examples/jqm_6/jqm-gadget.html 0 → 100644
View file @ 75cc8201
<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");
var g1 = RenderJs.GadgetIndex.getGadgetById("g1");
g1.gadget_call3 = function (e){gadget_call3("test parameter")};
g1.gadget_call1 = function (e){gadget_call1()};
});
//]]>
</script>
</body>
</html>
examples/jqm_6/js/controller.js 0 → 100644
View file @ 75cc8201
/*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_6/js/jqm-gadget-list.js 0 → 100644
View file @ 75cc8201
var gadget_call3 = function() {
console.log("gadget_call3 registered");
};
var gadget_call4 = function() {
console.log("gadget_call4 registered");
}
var gadget_call5 = function() {
console.log("gadget_call5 registered");
}
var testevent_handler = function() {
console.log("testevent handler triggered");
}
// trigger
$(document).on('click','ol li',function(e) {
e.preventDefault();
if ($(this).data("bound")) {
return;
}
$(this).data("bound",true);
console.log("clicked on listitem, now trigger g3");
RenderJs.GadgetIndex.getGadgetById('g3').gadget_call3();
});
$(document).on('click','#dooo', function() {
console.log("testevent triggered on click");
$("#main-interactor2").trigger("testevent2");
});
\ No newline at end of file
examples/jqm_6/js/jqm-gadget-recursive.js 0 → 100644
View file @ 75cc8201
var gadget_call2 = function() {
console.log("gadget_call2 registered");
};
console.log("hello");
var btns = $('#clickediclick');
btns
.filter(function() { return $(this).data("bound") !== true; })
.data('bound', true )
.on('click', function() {
console.log("clicked button");
RenderJs.GadgetIndex.getGadgetById('g1').gadget_call1();
});
examples/jqm_6/js/jqm-gadget-recursive2.js 0 → 100644
View file @ 75cc8201
/* this will never be set, because this file is parsed to late */
var gadget_call4 = function() {
console.log("gadget_call4 registered");
}
examples/jqm_6/js/jqm-gadget.js 0 → 100644
View file @ 75cc8201
var gadget_call1 = function() {
console.log("gadget_call1 registered");
};
var gadget_call3 = function(p) {
console.log("gadget_call3 registered, parem = "+p);
}
// trigger
/*
$(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_6/js/jqm.js 0 → 100644
View file @ 75cc8201
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/jqm_6/js/overrides.js 0 → 100644
View file @ 75cc8201
/*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_6/js/require-renderjs.js 0 → 100644
View file @ 75cc8201
/*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_6/page2.html 0 → 100644
View file @ 75cc8201
<!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="g3" data-gadget="jqm-gadget-list.html"></div>
<a href="page3.html" data-ajax="false" data-role="button">Refresh</a>
</div>
<div data-gadget="" id="main-interactor2"
data-gadget-connection="[
{&quot;source&quot;: &quot;g3.gadget_call3&quot;, &quot;destination&quot;: &quot;g4.gadget_call4&quot;},
{&quot;source&quot;: &quot;g4.testevent&quot;, &quot;destination&quot;: &quot;g4.updatelayout&quot;},
{&quot;source&quot;: &quot;main-interactor2.testevent2&quot;, &quot;destination&quot;: &quot;g4.gadget_call5&quot;}
]">
</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