自定义ArcGIS JavaScript 工具条样式

有时候项目里涉及到地图操作功能时，我们总是希望将这些功能都集成到一个工具条上去，这样用户操作起来更加方便，界面看起来的话也更加整洁。

效果图如下：

主要代码：

布局文件Toolbar.html:

<ul  class = "horizontal-toolbar"><li><img src="assets/icons/pan.png" title="平移"></li><li><img src="assets/icons/zoom_in.png" title="放大"></li><li><img src="assets/icons/zoom_out.png" title="缩小"></li><li><img src="assets/icons/default.png" title="默认视图"></li><li><img src="assets/icons/distance.png" title="测量距离"></li><li><img src="assets/icons/area.png" title="测量面积"></li><li><img src="assets/icons/clear.png" title="清除图层"></li><li><img src="assets/icons/layers.png" title="图层控制"></li><li class="no-border"><img src="assets/icons/legend.png" title="图例"></li>
</ul>

样式表Toolbar.css:

ul,li{padding: 0;margin: 0;list-style: none;
}/*工具栏样式*/
.vertical-toolbar{/*竖向*/position: absolute;top: 10px;right: 10px;height: 389px; width: 42px;overflow: hidden;background-color: #fff;border-radius: 8px;-moz-box-shadow: 6px 6px 5px #cccccc; -webkit-box-shadow:6px 6px 5px #cccccc; box-shadow: 6px 6px 5px #cccccc;
}
.vertical-toolbar>li{box-sizing: content-box;height: 40px;width: 26px;margin: 0 auto;border-bottom: 2px solid #f5f5f5;cursor: pointer;position: relative;float: none;
}
.vertical-toolbar>li.no-border{border: 0;
}
.horizontal-toolbar>li>img,.vertical-toolbar>li>img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);width: auto;
}.horizontal-toolbar{/*横向*/position: absolute;top: 20px;right: 10px;height: 42px;width: 421px;overflow: hidden;background-color: #fff;border-radius: 8px;-moz-box-shadow: -6px 6px 5px #cccccc; -webkit-box-shadow:-6px 6px 5px #cccccc; box-shadow: -6px 6px 5px #cccccc;
}
.horizontal-toolbar>li{float: left;position: relative;height: 26px;width: 41px;border-right: 2px solid #f5f5f5;margin: 8px 0 0 0;cursor: pointer;
}
.horizontal-toolbar>li.no-border{border: 0;width: 40px;
}

自定义ArcGIS JavaScript 工具条样式相关推荐

怎么将arcgis新建工具条如何保存_ArcGIS中寻找最短路径的方法
1 流程图将两个道路数据统一坐标系,然后合并建立数据集,将未联通的道路路线进行结合,对接便后的道路数据集构建网络,使用追踪分析查找两点间最短路径,流程图如图1-1所示. 图1-1 流程图 2 操作 ...
百度富文本编辑器UEditor如何自定义配置toolbars工具条
UE.getEditor('editor', {toolbars: [[//工具条'fullscreen', 'source', 'undo', 'redo', 'bold', 'italic','u ...
Silverlight的自定义tooltip提示工具条
这种应用场景其实很多,比如游戏中装备/魔法的选择菜单,这里借用了"深蓝色右手"的一张图再比如聊天室中的文本颜色设置虽然sl的ToolTipService.ToolTip属性可以 ...
WebPart(SharePoint)中如何使用自定义的Javascript和css样式
由于SharePoint WebPart 不像asp.net,可以拖拽控件,而且没有前台代码.你只能发布倒sharepoint上进行浏览.由于没有前台的HTML,只有后台的cs文件.所以不能通过通常的 ...
自定义chrome浏览器导航条样式
设置滚动条样式 /* 设置滚动条的样式 */ ::-webkit-scrollbar {width: 3px;height: 3px; }/* 滚动槽 */ ::-webkit-scrollbar-t ...
P73-前端基础项目开发-首页main部分开发工具条
P73-前端基础项目开发-首页main部分开发工具条 1.概述网页的右下角通常会有个工具条用来设置一些快捷操作,例如回到网页顶部. 2.工具条 2.1.工具条需求效果 2.2.创建工具条结构在in ...
基于ArcGIS JS API封装dojo微件(以工具条为例)
1.应用场景: 我们知道ArcGIS JS API自带了一些微件(或者说是控件),比如缩放按钮.定位按钮等等.但是有的时候这些微件的样式不太符合项目实际要求,或者是项目上想要把这些组合起来,这时候我们 ...
html自定义工具条,为Autodesk Viewer添加自定义工具条的更好方法
上一篇文章中我介绍了使用Autodesk Viewer的UI API来给viewer添加自定义工具条的方法,看起来很简单是吧.不过有个问题,就是关于自定义工具条的信息(包括按钮的文本.图标.样式.ca ...
Wince5.0自定义工具条
2007-3-18 Wince5.0自定义ToolBar 做WinCE的开发时,碰到一很头疼的事(Coolpad机器).它的菜单很难看,字体很大,样式也太简单,就选用了 CF2.0中的ToolBa ...

自定义ArcGIS JavaScript 工具条样式

效果图如下：

主要代码：

自定义ArcGIS JavaScript 工具条样式相关推荐

最新文章

热门文章