Build your entire UI with HTML by using jquery mobile
198 views
Skip to first unread message
Yi Jin
Nov 5, 2014, 8:09:11 AM11/5/14
to shiny-...@googlegroups.com
Hi everyone,
I have encountered a problem while building shiny with index.html in www folder.
I have successfully reproduced with the tutorial "
I have encountered a problem while building shiny with index.html in www folder.
I have successfully reproduced with the tutorial "
Build your entire UI with HTML"
But when I try to use jquerymobile framework to rebuild the same thing but in different tabs. The shiny doesnot work.
My entire code is in the zip file.
the server.R is the same in the tutorial.
Here is my index.html
Thanks for your help.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.10.2.1];jslider[1];bootstrap[2.3.2];bootstrap-responsive[2.3.2]
</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.js"></script>
<link href="shared/shiny.css" rel="stylesheet">
<script src="shared/shiny.js"></script>
<link href="shared/slider/css/jquery.slider.min.css" rel="stylesheet">
<script src="shared/slider/js/jquery.slider.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="shared/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>mobileUI</title>
</head>
<body>
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a data-theme="a" data-toggle="tab" href="#fragment-1" data-ajax="false">One</a></li>
<li><a data-theme="a" data-toggle="tab" href="#fragment-2" data-ajax="false">Two</a></li>
<li><a data-theme="a" data-toggle="tab" href="#fragment-3" data-ajax="false">Three</a></li>
</ul>
</div>
<div id="fragment-1" class="ui-content">
<strong>Distribution:</strong>
<select name="dist" >
<option value="norm">Normal</option>
<option value="unif">Uniform</option>
<option value="lnorm">Log-normal</option>
<option value="exp">Exponential</option>
<option value="cauch">Cauchy</option>
</select></br>
<strong>Number of observations:</strong>
<input maxlength="6" type="number" name="n" value="10"/>
</div>
<div id="fragment-2" class="ui-content">
<p>tab2</p>
<pre id="summary" class="shiny-text-output"></pre>
</div>
<div id="fragment-3" class="ui-content">
<div id="plot" class="shiny-plot-output"
style="width: 100%; height:400px">
</div>
</div>
</div>
</body>
</html>
Joe Cheng
Nov 5, 2014, 4:37:29 PM11/5/14
to Yi Jin, shiny-...@googlegroups.com
Shiny depends on "shown" and "hidden" events to know when an output might've just gone visible or invisible. It looks like jquery tabs have an "activate" event, can you try raising the "shown"/"hidden" jquery events when that fires? ie.:
$(oldTab).trigger("hidden");
$(newTab).trigger("shown");
--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/54682d18-df4d-49ad-82b3-d6d87bf3aa25%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Yi Jin
Nov 6, 2014, 5:14:52 AM11/6/14
to shiny-...@googlegroups.com, mr.j...@gmail.com
thanks it works!
You guys rock!
Reply all
Reply to author
Forward
0 new messages