source:
trunk/workshop-routing-foss4g/web/GeoExt/examples/layeropacityslider.html
@
81
| Revision 76, 2.3 KB checked in by djay, 13 years ago (diff) | |
|---|---|
|
|
| Rev | Line | |
|---|---|---|
| [76] | 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.
