OpenLayers学习笔记3——使用jQuery UI美化界面设计

古城微笑少年丶 2022-08-05 05:06 187阅读 0赞

PC端软件在开发是有较多的界面库可以选择，比如DevExpress、BCG、DotNetBar等，可以很方便快捷的开发出一些炫酷的界面，最近在学习OpenLayers，涉及到web前端开发，在设计界面时刚开始不熟悉，设计的很丑，后来参照ArcGIS在线体验中心的demo以及对web前端界面设计库的调研，最终采用jQuery UI来美化界面（还有比较强大的Dojo）。先来看下效果：

![Center][]

这里说下地图与影像切换两个按钮的实现，其他的都是一样的方式：

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默认的字体较大，并且按钮高度过大，不好看，因此要在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][http_www.w3school.com.cn_index.html]

W3CSchool.CC:[http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html][http_www.w3cschool.cc_jqueryui_jqueryui-tutorial.html]

[Center]: /images/20220805/538dab146f0b41ef9778d44ae0537017.png
[http_www.w3school.com.cn_index.html]: http://www.w3school.com.cn/index.html
[http_www.w3cschool.cc_jqueryui_jqueryui-tutorial.html]: http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html