[OpenLayers-Commits] r11404 -
sandbox/camptocamp/mobile/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Feb 24 06:22:50 EST 2011
Author: fredj
Date: 2011-02-24 03:22:49 -0800 (Thu, 24 Feb 2011)
New Revision: 11404
Added:
sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css
Modified:
sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html
Log:
move css into style.mobile-jq.css, coding style
Modified: sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html
===================================================================
--- sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html 2011-02-24 11:21:46 UTC (rev 11403)
+++ sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html 2011-02-24 11:22:49 UTC (rev 11404)
@@ -10,106 +10,57 @@
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<link rel="stylesheet" href="style.mobile.css" type="text/css">
+ <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
<script src="../build/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
<script src="mobile.js"></script>
<script src="mobile-jq.js"></script>
- <style>
- html {
- height: 100%;
- }
- body {
- margin: 0;
- padding: 0;
- height: 100%;
- }
- .ui-content {
- padding: 0;
- }
- .ui-footer {
- text-align: center;
- padding: 5px 0;
- }
- #map {
- width: 100%;
- height: 100%;
- }
- .olControlAttribution {
- font-size: 10px;
- bottom: 5px;
- right: 5px;
- }
- #navigation {
- position: absolute;
- bottom: 50px;
- left: 10px;
- z-index: 1000;
- }
- #navigation .ui-btn-icon-notext {
- display: block;
- padding: 7px 6px 7px 8px;
- }
- #title, #tags, #shortdesc {
- display: none;
- }
- .ui-icon-check {
- opacity: 0.3;
- }
- .checked .ui-icon-check {
- opacity: 1;
- }
- .ui-icon-locate {
- background-image: url(img/locate.png);
- }
- </style>
</head>
<body>
<h1 id="title">OpenLayers with jQuery Mobile</h1>
<div id="tags">
- mobile, jquery
+ mobile, jquery
</div>
<p id="shortdesc">
- Using jQuery Mobile to display an OpenLayers map.
+ Using jQuery Mobile to display an OpenLayers map.
</p>
<div data-role="page" id="mappage">
- <div data-role="content">
- <div id="map"></div>
- </div>
+ <div data-role="content">
+ <div id="map"></div>
+ </div>
- <div data-role="footer">
- <a href="#searchpage" data-icon="search" data-role="button">Search</a>
- <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
- <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
- </div>
- <div id="navigation" data-role="controlgroup" data-type="vertical">
- <a href="#" data-role="button" data-icon="plus"
- id="plus"
- data-iconpos="notext"></a>
- <a href="#" data-role="button" data-icon="minus"
- id="minus"
- data-iconpos="notext"></a>
- </div>
+ <div data-role="footer">
+ <a href="#searchpage" data-icon="search" data-role="button">Search</a>
+ <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
+ <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
+ </div>
+ <div id="navigation" data-role="controlgroup" data-type="vertical">
+ <a href="#" data-role="button" data-icon="plus" id="plus"
+ data-iconpos="notext"></a>
+ <a href="#" data-role="button" data-icon="minus" id="minus"
+ data-iconpos="notext"></a>
+ </div>
</div>
+
<div data-role="page" id="searchpage">
- <div data-role="header">
- <h1>Search</h1>
- </div>
- <div data-role="fieldcontain">
- <input type="search" name="query" id="query"
- value="" placeholder="Search for places"
- autocomplete="off"/>
- </div>
- <ul data-role="listview" data-inset="true" id="search_results">
- </ul>
+ <div data-role="header">
+ <h1>Search</h1>
+ </div>
+ <div data-role="fieldcontain">
+ <input type="search" name="query" id="query"
+ value="" placeholder="Search for places"
+ autocomplete="off"/>
+ </div>
+ <ul data-role="listview" data-inset="true" id="search_results"></ul>
</div>
<div data-role="page" id="layerspage">
- <div data-role="header">
- <h1>Layers</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist">
- </div>
+ <div data-role="header">
+ <h1>Layers</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist">
+ </div>
</div>
</body>
</html>
Added: sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css
===================================================================
--- sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css (rev 0)
+++ sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css 2011-02-24 11:22:49 UTC (rev 11404)
@@ -0,0 +1,46 @@
+html {
+ height: 100%;
+}
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+.ui-content {
+ padding: 0;
+}
+.ui-footer {
+ text-align: center;
+ padding: 5px 0;
+}
+#map {
+ width: 100%;
+ height: 100%;
+}
+.olControlAttribution {
+ font-size: 10px;
+ bottom: 5px;
+ right: 5px;
+}
+#navigation {
+ position: absolute;
+ bottom: 50px;
+ left: 10px;
+ z-index: 1000;
+}
+#navigation .ui-btn-icon-notext {
+ display: block;
+ padding: 7px 6px 7px 8px;
+}
+#title, #tags, #shortdesc {
+ display: none;
+}
+.ui-icon-check {
+ opacity: 0.3;
+}
+.checked .ui-icon-check {
+ opacity: 1;
+}
+.ui-icon-locate {
+ background-image: url(img/locate.png);
+}
More information about the Commits
mailing list