From aedc96f030a67c0a221fb84730315bb056167531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 7 Feb 2012 17:19:49 +0100 Subject: [PATCH] [examples] add an accessible-panel example --- examples/accessible-panel.html | 124 +++++++++++++++++++++++++++++++++ examples/accessible-panel.js | 64 +++++++++++++++++ 2 files changed, 188 insertions(+) create mode 100644 examples/accessible-panel.html create mode 100644 examples/accessible-panel.js diff --git a/examples/accessible-panel.html b/examples/accessible-panel.html new file mode 100644 index 0000000000..39754ceccc --- /dev/null +++ b/examples/accessible-panel.html @@ -0,0 +1,124 @@ + + + + + + + Custom and accessible panel + + + + + + + +

Custom and accessible panel

+
+ panels, CSS, style, accessibility, button +
+

+ Create a custom and accessible panel, styled entirely with + CSS. +

+
+
+ +
+ +

Accessibility: + +

+

+ +

By default a panel creates buttons as divs. In this example the + createControlMarkup panel function is overridden to create + a more accessible markup for the buttons. See the accessible-panel.js + source to see how this is done.

+ +
+ + + diff --git a/examples/accessible-panel.js b/examples/accessible-panel.js new file mode 100644 index 0000000000..f982fc624b --- /dev/null +++ b/examples/accessible-panel.js @@ -0,0 +1,64 @@ +var lon = 5; +var lat = 40; +var zoom = 5; +var map, layer; + +function init() { + map = new OpenLayers.Map( 'map', { controls: [] } ); + layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); + map.addLayer(layer); + + vlayer = new OpenLayers.Layer.Vector( "Editable" ); + map.addLayer(vlayer); + + zb = new OpenLayers.Control.ZoomBox({ + title: "Zoom box: zoom clicking and dragging", + text: "Zoom" + }); + + var panel = new OpenLayers.Control.Panel({ + defaultControl: zb, + createControlMarkup: function(control) { + var button = document.createElement('button'), + iconSpan = document.createElement('span'), + textSpan = document.createElement('span'); + iconSpan.innerHTML = ' '; + button.appendChild(iconSpan); + if (control.text) { + textSpan.innerHTML = control.text; + } + button.appendChild(textSpan); + return button; + } + }); + + panel.addControls([ + zb, + new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, + {title:'Draw a feature', text: 'Draw'}), + new OpenLayers.Control.ZoomToMaxExtent({ + title:"Zoom to the max extent", + text: "World" + }) + ]); + + nav = new OpenLayers.Control.NavigationHistory({ + previousOptions: { + title: "Go to previous map position", + text: "Prev" + }, + nextOptions: { + title: "Go to next map position", + text: "Next" + }, + displayClass: "navHistory" + }); + // parent control must be added to the map + map.addControl(nav); + panel.addControls([nav.next, nav.previous]); + + map.addControl(panel); + + map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); +}