Solved! Go to Solution.
if (dojo.byId('legendButton')) { dojo.byId('legendButton').innerHTML = i18n.viewer.buttons.legend; dojo.byId('listItemLegend').innerHTML = i18n.viewer.buttons.legend; }
var legendDijit = new esri.dijit.Legend({ map :map, layerInfos:layerInfo }, 'legendDiv'); legendDijit.startup();
// 'Legend' button var legendTooBarButton = new dojox.mobile.ToolBarButton({ id :'legendToolbarButton', toggle :true, icon :'images/legendIcon.png', style :{ float :'right', width :'44px', 'padding-top':'2px' }, onClick:function () { legendButtonSelectionHandler(); } }); // for smartphones only, add the legend toolbar button to the right side of the header if (isSmartPhone) dijit.byId('rightPanelHeader').addChild(legendTooBarButton);
if (isSmartPhone) { var legendBackground = dojo.create('div', null, dojo.byId('rightPane')); dojo.attr(legendBackground, 'id', 'legendBackgroundDiv'); dojo.setStyle(legendBackground, 'bottom', '2px'); dojo.setStyle(legendBackground, 'height', '180px'); dojo.setStyle(legendBackground, 'right', '5px'); dojo.setStyle(legendBackground, 'left', '5px'); dojo.setStyle(legendBackground, 'background-color', '#FFF'); dojo.setStyle(legendBackground, 'position', 'absolute'); dojo.setStyle(legendBackground, 'z-index', '10'); dojo.setStyle(legendBackground, 'opacity', '.8'); dojo.setStyle(legendBackground, 'overflow', 'scroll'); dojo.setStyle(legendBackground, '-webkit-border-radius', '6px'); dojo.setStyle(legendBackground, '-moz-border-radius', '6px'); dojo.setStyle(legendBackground, 'border-radius', '6px'); dojo.place('legendDiv', 'legendBackgroundDiv', 'first'); dojo.setStyle('legendDiv', 'margin', '1px'); dojo.setStyle('legendDiv', 'padding', '1px'); dojo.setStyle('legendDiv', 'font-size', '0.7em'); dojo.setStyle(legendBackground, 'display', 'none'); }
legendButtonSelectionHandler()
<li id="listItemLegend" data-dojo-type="dojox.mobile.TabBarButton" moveTo="legendSubView" selected="true"></li>
<div id="legendSubView" data-dojo-type="dojox.mobile.ScrollableView" selected="true"> <div id="legendContainer"> <div id="legendHeader"></div> <div id="legendDiv"></div> </div> </div>
if (dojo.byId('legendButton')) { dojo.byId('legendButton').innerHTML = i18n.viewer.buttons.legend; dojo.byId('listItemLegend').innerHTML = i18n.viewer.buttons.legend; }
var legendDijit = new esri.dijit.Legend({ map :map, layerInfos:layerInfo }, 'legendDiv'); legendDijit.startup();
// 'Legend' button var legendTooBarButton = new dojox.mobile.ToolBarButton({ id :'legendToolbarButton', toggle :true, icon :'images/legendIcon.png', style :{ float :'right', width :'44px', 'padding-top':'2px' }, onClick:function () { legendButtonSelectionHandler(); } }); // for smartphones only, add the legend toolbar button to the right side of the header if (isSmartPhone) dijit.byId('rightPanelHeader').addChild(legendTooBarButton);
if (isSmartPhone) { var legendBackground = dojo.create('div', null, dojo.byId('rightPane')); dojo.attr(legendBackground, 'id', 'legendBackgroundDiv'); dojo.setStyle(legendBackground, 'bottom', '2px'); dojo.setStyle(legendBackground, 'height', '180px'); dojo.setStyle(legendBackground, 'right', '5px'); dojo.setStyle(legendBackground, 'left', '5px'); dojo.setStyle(legendBackground, 'background-color', '#FFF'); dojo.setStyle(legendBackground, 'position', 'absolute'); dojo.setStyle(legendBackground, 'z-index', '10'); dojo.setStyle(legendBackground, 'opacity', '.8'); dojo.setStyle(legendBackground, 'overflow', 'scroll'); dojo.setStyle(legendBackground, '-webkit-border-radius', '6px'); dojo.setStyle(legendBackground, '-moz-border-radius', '6px'); dojo.setStyle(legendBackground, 'border-radius', '6px'); dojo.place('legendDiv', 'legendBackgroundDiv', 'first'); dojo.setStyle('legendDiv', 'margin', '1px'); dojo.setStyle('legendDiv', 'padding', '1px'); dojo.setStyle('legendDiv', 'font-size', '0.7em'); dojo.setStyle(legendBackground, 'display', 'none'); }
legendButtonSelectionHandler()
<li id="listItemLegend" data-dojo-type="dojox.mobile.TabBarButton" moveTo="legendSubView" selected="true"></li>
<div id="legendSubView" data-dojo-type="dojox.mobile.ScrollableView" selected="true"> <div id="legendContainer"> <div id="legendHeader"></div> <div id="legendDiv"></div> </div> </div>