自定义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;
}