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

OpenLayers学习笔记3——使用jQuery UI美化界面设计的更多相关文章

  1. OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)

    近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...

  2. OpenLayers学习笔记4——使用jQuery UI实现測量对话框

    OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了. 本篇參照量測demo实现对话框形式的量測,抛砖引玉 ...

  3. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. amazeui学习笔记--js插件(UI增强)--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  6. amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown

    amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...

  7. amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

  8. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  9. amazeui学习笔记--js插件(UI增强2)--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

随机推荐

  1. MongoDB如何实现读写分离

    MongoDB如何实现读写分离 MongoDB复制集(Replica Set)通过存储多份数据副本来保证数据的高可靠,通过自动的主备切换机制来保证服务的高可用.但需要注意的时,连接副本集的姿势如果不对 ...

  2. php递归取目录下的所有文件(原创)

    function get_dir_all_files($path) { $result=array(); $temp=array(); if(filetype($path)=='dir') { $di ...

  3. UVA-1335(UVALive-3177) Beijing Guards 贪心 二分

    题面 题意:有n个人为成一个圈,其中第i个人想要r[i]种不同的礼物,相邻的两个人可以聊天,炫耀自己的礼物.如果两个相邻的人拥有同一种礼物,则双方都会很不高兴,问最少需要多少种不同的礼物才能满足所有人 ...

  4. python字符串中的单双引

    python中字符串可以(且仅可以)使用成对的单引号.双引号.三个双引号(文档字符串)包围: 'this is a book' "this is a book" "&qu ...

  5. Tomcat修改默认根目录

    tomcat7默认的程序发布路径为tomcat/webapps/ROOT/下面 修改Tomcat配置文件server.xml <Host name="localhost" a ...

  6. Data内置对象

    1.内置对象 Date 日期对象 2.创建日期对象 2.1 根据当前的系统时间来创建日期对象. var date1 = new Date(); //a.输出日期对象的信息 console.log(da ...

  7. ACM_____不再爱你……

    不再爱你…… 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 现在有一个圆柱形水杯,里面装满了水,在它的底部有一个小洞,通过一些简单的物理知识我们可以知道: 1.由于重力 ...

  8. (转)RabbitMQ学习之spring整合发送同步消息

    http://blog.csdn.net/zhu_tianwei/article/details/40890543 以下实现使用Exchange类型为DirectExchange. routingke ...

  9. C# DataTable 转 json

    public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { //窗体 ...

  10. ZBrush细说3D海盗角色的创建艺术

    一提到海盗,就不由自主想到了<加勒比海盗>,那个帅得一塌糊涂的杰克船长更是让人夜不能寐寝难安,但在艺术的世界里,角色无美丑,今天我们要讲的这位海盗,就与“帅气”八竿子打不着了,它甚至有点古 ...