source:
trunk/workshop-routing-foss4g/web/GeoExt/examples/layeropacityslider.html
@
76
| Revision 76, 2.3 KB checked in by djay, 12 years ago (diff) | |
|---|---|
|
|
| Line | |
|---|---|
| 1 | <html> |
| 2 | <head> |
| 3 | <title>GeoExt LayerOpacitySlider</title> |
| 4 | |
| 5 | <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script> |
| 6 | <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script> |
| 7 | <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" /> |
| 8 | <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/examples/shared/examples.css"></link> |
| 9 | <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script> |
| 10 | <script type="text/javascript" src="../script/GeoExt.js"></script> |
| 11 | <style type="text/css"> |
| 12 | .x-tree-node-leaf .gx-tree-layer-icon { |
| 13 | width: 0px; |
| 14 | } |
| 15 | </style> |
| 16 | |
| 17 | <script type="text/javascript" src="layeropacityslider.js"></script> |
| 18 | </head> |
| 19 | <body> |
| 20 | <h1>GeoExt.LayerOpacitySlider</h1> |
| 21 | |
| 22 | <p>The LayerOpacitySlider allows control of a layer opacity using an |
| 23 | Ext.Slider. It is also possible to add a special tooltip plugin, |
| 24 | LayerOpacitySliderTip, which will show the opacity value while dragging |
| 25 | the slider (the content is configurable).<p> |
| 26 | |
| 27 | <p>In this example, the slider in below the map is in aggressive mode: the |
| 28 | opacity is changed as soon as the slider is moved. The slider inside |
| 29 | Map 1 is not aggressive: the opacity is changed when the slider is |
| 30 | released. Also, the slider below the map is an inverse slider, which means |
| 31 | it uses transparency instead of opacity.</p> |
| 32 | |
| 33 | <p>In Map 2 we have a fading effect between two layers. The slider is configured |
| 34 | with changeVisibility:true and a complementaryLayer. This avoids downloading images |
| 35 | when layer opacity is 0 or when complementaryLayer is fully covered by layer. |
| 36 | The effect on layer visibility is shown in the tree (checkboxes).</p> |
| 37 | |
| 38 | <p>The js is not minified so it is readable. See <a |
| 39 | href="layeropacityslider.js">layeropacityslider.js</a>.</p> |
| 40 | |
| 41 | <div id="map1-container" style="float:left"></div> |
| 42 | <div id="map2-container" style="float:right"></div> |
| 43 | <div id="tree" style="float:right"></div> |
| 44 | <div id="slider" style="clear:both"></div> |
| 45 | </body> |
| 46 | </html> |
Note: See TracBrowser
for help on using the repository browser.
