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
OpenLayers学习笔记3——使用jQuery UI美化界面设计的更多相关文章
- OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)
近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...
- OpenLayers学习笔记4——使用jQuery UI实现測量对话框
OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了. 本篇參照量測demo实现对话框形式的量測,抛砖引玉 ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- amazeui学习笔记--js插件(UI增强)--警告框Alert
amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...
- amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown
amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...
- amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
- jquery源码学习笔记三:jQuery工厂剖析
jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...
- amazeui学习笔记--js插件(UI增强2)--按钮交互Button
amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...
随机推荐
- MongoDB如何实现读写分离
MongoDB如何实现读写分离 MongoDB复制集(Replica Set)通过存储多份数据副本来保证数据的高可靠,通过自动的主备切换机制来保证服务的高可用.但需要注意的时,连接副本集的姿势如果不对 ...
- php递归取目录下的所有文件(原创)
function get_dir_all_files($path) { $result=array(); $temp=array(); if(filetype($path)=='dir') { $di ...
- UVA-1335(UVALive-3177) Beijing Guards 贪心 二分
题面 题意:有n个人为成一个圈,其中第i个人想要r[i]种不同的礼物,相邻的两个人可以聊天,炫耀自己的礼物.如果两个相邻的人拥有同一种礼物,则双方都会很不高兴,问最少需要多少种不同的礼物才能满足所有人 ...
- python字符串中的单双引
python中字符串可以(且仅可以)使用成对的单引号.双引号.三个双引号(文档字符串)包围: 'this is a book' "this is a book" "&qu ...
- Tomcat修改默认根目录
tomcat7默认的程序发布路径为tomcat/webapps/ROOT/下面 修改Tomcat配置文件server.xml <Host name="localhost" a ...
- Data内置对象
1.内置对象 Date 日期对象 2.创建日期对象 2.1 根据当前的系统时间来创建日期对象. var date1 = new Date(); //a.输出日期对象的信息 console.log(da ...
- ACM_____不再爱你……
不再爱你…… 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 现在有一个圆柱形水杯,里面装满了水,在它的底部有一个小洞,通过一些简单的物理知识我们可以知道: 1.由于重力 ...
- (转)RabbitMQ学习之spring整合发送同步消息
http://blog.csdn.net/zhu_tianwei/article/details/40890543 以下实现使用Exchange类型为DirectExchange. routingke ...
- C# DataTable 转 json
public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { //窗体 ...
- ZBrush细说3D海盗角色的创建艺术
一提到海盗,就不由自主想到了<加勒比海盗>,那个帅得一塌糊涂的杰克船长更是让人夜不能寐寝难安,但在艺术的世界里,角色无美丑,今天我们要讲的这位海盗,就与“帅气”八竿子打不着了,它甚至有点古 ...