OpenLayers學習筆記3——使用jQuery UI美化界面設計

PC端軟件在開發是有較多的界面庫可以選擇，比方DevExpress、BCG、DotNetBar等，可以很是方便快捷的開發出一些炫酷的界面，近期在學習OpenLayers。涉及到web前端開發，在設計界面時剛開始不熟悉，設計的很是醜，後來參照ArcGIS在線體驗中心的demo以及對web前端界面設計庫的調研，終於採用jQuery UI來美化界面（還有比較強大的Dojo）。先來看下效果：

這裏說下地圖與影像切換兩個button的實現，其它的都是同樣的方式：

CSS文件：

#mapViewButton {

    width: 70px;
    top: 70px;
    right: 340px;
    z-index: 1;
    position: absolute;
    
}


#imageViewButton {
    width: 70px;
    top: 70px;
    right: 270px;
    z-index: 1;
    position: absolute;

}

另外。jQuery UI默認的字體較大，並且button高度過大，很差看。所以要在CSS文件裏增長下面代碼：

button span {
    font: bold 70% "Trebuchet MS", sans-serif;

}

可以屢次調整bold的百分比已到達本身想要的效果。腳本代碼：

  $(document).ready(function ()
        {
            $("#mapViewButton").button(
                    {
                        label: "地圖"
                    }
            )
            ;
            $("#imageViewButton").button(
                    {
                        label: "影像"
                    }
            );
<span style="white-space:pre">	</span>}

另外推薦在線的學習地址：

W3CSchool：http://www.w3school.com.cn/index.html

W3CSchool.CC:http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html