zoukankan      html  css  js  c++  java
  • OpenLayers学习笔记3——使用jQuery UI美化界面设计

    PC端软件在开发是有较多的界面库能够选择,比方DevExpress、BCG、DotNetBar等,能够非常方便快捷的开发出一些炫酷的界面,近期在学习OpenLayers。涉及到web前端开发,在设计界面时刚開始不熟悉,设计的非常丑,后来參照ArcGIS在线体验中心的demo以及对web前端界面设计库的调研,终于採用jQuery UI来美化界面(还有比較强大的Dojo)。先来看下效果:


    这里说下地图与影像切换两个button的实现,其它的都是一样的方式:

    CSS文件:

    #mapViewButton {
    
         70px;
        top: 70px;
        right: 340px;
        z-index: 1;
        position: absolute;
        
    }
    
    
    #imageViewButton {
         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

  • 相关阅读:
    单片机4*4按键数码管显示0-9
    netbeans设置语言
    单片机中断的应用
    Linux 命令总结
    vc6.0快捷键大全
    怎么使PUTTY一直连接
    mysql alter 效率
    treeview
    Gitbook
    linux 进程监控软件 supervisor
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/6904624.html
Copyright © 2011-2022 走看看