Add an example that uses jQuery mobile (JQM) for UI together with 2

gadgets that are connected (i.e. change on one affects other through exposed gadget API).

Add an example that uses jQuery mobile (JQM) for UI together with 2
gadgets that are connected (i.e. change on one affects other through exposed gadget API).
890e9e79 · Ivan Tyagov · d30cceba · 890e9e79 · 890e9e79 · 890e9e79
Commit 890e9e79 authored Feb 06, 2013 by Ivan Tyagov
4 changed files
--- a/examples/jqm/index.html
+++ b/examples/jqm/index.html
+<!DOCTYPE html>
+<html>
+<head>
+        <title>My Page</title>
+        <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 src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
+        <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
+
+        <script src="../../renderjs.js"></script>
+        <!-- XXX:Using requirejs is not working with JQM -->
+        <!--    <script data-main="require-renderjs.js"
+            type="text/javascript"
+            src="../../lib/require/require.js"></script>-->
+
+
+</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>
+
+  </div>
+
+  <script type="text/javascript">
+    $(document).ready(function() {
+      // explicitly call required as requirejs call not working
+      RenderJs.init();
+      // when all gadgets are loaded make sure JQM renders them
+      RenderJs.bindReady(
+                  function () {
+                    $("[data-gadget]").trigger('create');
+                  });
+    });
+  </script>
+
+
+</body>
+</html>
\ No newline at end of file
--- a/examples/jqm/jqm-details-gadget.html
+++ b/examples/jqm/jqm-details-gadget.html
+<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");
+          console.log("init");
+          gadget.updateCountry = function (country) {
+            console.log(country);
+            $("#country").html(country);
+          };
+      });
+    //]]>
+  </script>
+
+
+  </body>
+</html>
--- a/examples/jqm/jqm-gadget.css
+++ b/examples/jqm/jqm-gadget.css
+#jqm-gadget,
+#jqm-details-gadget{
+  width:45%;
+  float:left;
+  margin-left:10px;
+}
+#country{
+  font-weight: bold;
+}
\ No newline at end of file
--- a/examples/jqm/jqm-gadget.html
+++ b/examples/jqm/jqm-gadget.html
+<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('Русия');"><a href="#">Москвич</a></li>
+      <li onclick="RenderJs.GadgetIndex.getGadgetById('jqm-details-gadget').updateCountry('България (Ловеч)');"><a href="#">Москвич Алеко</a></li>
+    </ul>
+
+  </body>
+</html>