Skip to content

renderjs
renderjs
Commit 4a2742ad authored by Sven Franck's avatar Sven Franck
Browse files
Options

jqm+renderjs - added some examples

parent fc7f59f8
Show whitespace changes
Inline Side-by-side
Showing with 467 additions and 0 deletions
examples/jqm_1/controller.js 0 → 100644
View file @ 4a2742ad
/*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 () {
// this is my application controller
// as I have not used renderJS before, this is where all my
// client-side "stuff" happens (ajax form requests, content modifications,
// on demand loading of additional plugins
// START
if ($.mobile.autoInitializePage === false) {
// initialize JQM
$.mobile.initializePage();
// initialize renderJS
RenderJs.init();
// when all gadgets are loaded make sure JQM renders them
RenderJs.bindReady(
function () {
$("[data-gadget]").trigger('create');
});
}
});
};
return {"start": start};
});
examples/jqm_1/documentation.html 0 → 100644
View file @ 4a2742ad
<html>
<head></head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Jquery mobile and RenderJs test</h1>
</div>
<div data-role="content">
<h2>Some documentation for this gadget.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
examples/jqm_1/index.html 0 → 100644
View file @ 4a2742ad
<!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" />
<link rel="stylesheet" href="jqm-gadget.css" />
<script data-main="require-renderjs.js" type="text/javascript" src="../../lib/require/require.js"></script>
<title>My Page</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Jquery mobile and RenderJs test</h1>
</div>
<div data-role="content">
<div id="jqm-gadget"
data-gadget="jqm-gadget.html"></div>
<div id="jqm-details-gadget"
data-gadget="jqm-details-gadget.html"></div>
<div id="jqm-doc-gadget"
data-gadget="jqm-doc-gadget.html"></div>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/jqm_1/jqm-details-gadget.html 0 → 100644
View file @ 4a2742ad
<html>
<head></head>
<body>
Country of origin:<span id="country"> ...</span>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("jqm-details-gadget");
gadget.updateCountry = function (country) {
$("#country").html(country);
};
});
//]]>
</script>
</body>
</html>
examples/jqm_1/jqm-doc-gadget.html 0 → 100644
View file @ 4a2742ad
<html>
<head></head>
<body>
<ul data-role="listview" data-inset="true" data-filter="false">
<li><a href="documentation.html" class="ui-link-inherit">Link</a></li>
</ul>
</body>
</html>
examples/jqm_1/jqm-gadget.css 0 → 100644
View file @ 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
examples/jqm_1/jqm-gadget.html 0 → 100644
View file @ 4a2742ad
<html>
<head></head>
<body>
<ul data-role="listview" data-inset="true" data-filter="true" id="mylist">
<li onclick="RenderJs.GadgetIndex.getGadgetById('jqm-details-gadget').updateCountry('Germany');"><a href="#">Audi</a></li>
<li onclick="RenderJs.GadgetIndex.getGadgetById('jqm-details-gadget').updateCountry('USA');"><a href="#">Cadillac</a></li>
<li onclick="RenderJs.GadgetIndex.getGadgetById('jqm-details-gadget').updateCountry('Italy');"><a href="#">Ferrari</a></li>
<li onclick="RenderJs.GadgetIndex.getGadgetById('jqm-details-gadget').updateCountry('Japan');"><a href="#">Toyota</a></li>
<li onclick="RenderJs.GadgetIndex.getGadgetById('jqm-details-gadget').updateCountry('Russia');"><a href="#">Moskvich</a></li>
<li onclick="RenderJs.GadgetIndex.getGadgetById('jqm-details-gadget').updateCountry('Bulgaria');"><a href="#">Moskvich Aleko</a></li>
</ul>
</body>
</html>
examples/jqm_1/overrides.js 0 → 100644
View file @ 4a2742ad
/*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_1/require-renderjs.js 0 → 100644
View file @ 4a2742ad
/*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
examples/jqm_2/controller.js 0 → 100644
View file @ 4a2742ad
/*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 () {
// this is my application controller
// as I have not used renderJS before, this is where all my
// client-side "stuff" happens (ajax form requests, content modifications,
// on demand loading of additional plugins
// detect gadgets on a page
$(document).on('pagebeforeshow', 'div.ui-page', function () {
$('[data-gadget]').filter(
function () {
return $(this).jqmData("bound") !== true;
}
)
.each(
function () {
// trigger gadget loading
}
);
});
// START
if ($.mobile.autoInitializePage === false) {
// initialize JQM
$.mobile.initializePage();
// initialize renderJS
RenderJs.init();
// when all gadgets are loaded make sure JQM renders them
RenderJs.bindReady(
function () {
$("[data-gadget]").trigger('create');
});
}
});
};
return {"start": start};
});
examples/jqm_2/documentation.html 0 → 100644
View file @ 4a2742ad
<html>
<head></head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Jquery mobile and RenderJs test</h1>
</div>
<div data-role="content">
<h2>Some documentation for this gadget.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
examples/jqm_2/index.html 0 → 100644
View file @ 4a2742ad
<!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="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 1</h1>
</div>
<div data-role="content">
<p>Load a gadget.</p>
<p>I'm testing the following:</p>
<ul>
<li>Load gadget OK</li>
<li>JQM widget in gadget should be enhanced OK</li>
<li>Gadget inline-CSS executed (red button 1) OK</li>
<li>Gadget inline-JS executed (yellow button 2) FAIL = Javascript is
executed but before JQM enhances the widget, so you cannot access
any elements, JQM adds/removes during enhancement</li>
<li>Add a link (3rd button) to page2. On page 2 another gadget should
be loaded = FAIL: in JQM, when you go from page A to page B you stay on page A
and page B is loaded via Ajax and appended to the DOM (The url should
be pageA.html#page2_id, but with pushState enabled this is not visible).
<br /><b>Question:</b> Is there a method to trigger loading gadgets into an existing page?
</li>
</ul>
<div id="jqm-gadget" data-gadget="jqm-gadget.html"></div>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/jqm_2/jqm-details-gadget.html 0 → 100644
View file @ 4a2742ad
<html>
<head></head>
<body>
Country of origin:<span id="country"> ...</span>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("jqm-details-gadget");
gadget.updateCountry = function (country) {
$("#country").html(country);
};
});
//]]>
</script>
</body>
</html>
examples/jqm_2/jqm-doc-gadget.html 0 → 100644
View file @ 4a2742ad
<html>
<head></head>
<body>
<ul data-role="listview" data-inset="true" data-filter="false">
<li><a href="documentation.html" class="ui-link-inherit">Link</a></li>
</ul>
</body>
</html>
examples/jqm_2/jqm-gadget-2.html 0 → 100644
View file @ 4a2742ad
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>HELLO</p>
<div data-role="collapsible-set" data-content-theme="c" data-inset="true">
<div data-role="collapsible" data-collapsed="true">
<h2>Elem1</h2>
<p>Hello World</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h2>Elem2</h2>
<p>Hollow World</p>
</div>
</div>
</body>
</html>
examples/jqm_2/jqm-gadget.css 0 → 100644
View file @ 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
examples/jqm_2/jqm-gadget.html 0 → 100644
View file @ 4a2742ad
<html>
<head>
<meta charset="utf-8">
<!-- test if inline css and javascript is executed -->
<style type="text/css">
div.ui-btn {border:2px solid red !important;}
</style>
<script type="text/javascript">
// this is problematic, because when this code is run, the widget
// has not initialized, meaning, the input parent div.ui-btn has not
// been created yet!
$('#but2').closest('div').css("border","2px solid yellow");
</script>
</head>
<body>
<div data-role="controlgroup" data-type="horizontal">
<input type="button" id="but1" data-icon="gear" data-iconpos="left" data-theme="c" value="click me" />
<input type="button" id="but2" data-icon="delete" data-iconpos="left" data-theme="e" value="click me 2" />
<a href="page2.html" data-role="button" data-icon="arrow-l" data-iconpos="left" data-theme="c">Link</a>
</div>
</body>
</html>
examples/jqm_2/overrides.js 0 → 100644
View file @ 4a2742ad
/*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_2/page2.html 0 → 100644
View file @ 4a2742ad
<!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" />
<link rel="stylesheet" href="jqm-gadget.css" />
<script data-main="require-renderjs.js" type="text/javascript" src="../../lib/require/require.js"></script>
<title>Page 2</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Example 1</h1>
</div>
<div data-role="content">
<p>This must enhance!!!</p>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="left" data-inline="true">Button</a>
<p>This gadget, too</p>
<div id="jqm-gadget-2" data-gadget="jqm-gadget-2.html"></div>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/jqm_2/require-renderjs.js 0 → 100644
View file @ 4a2742ad
/*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
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