浅析JQuery UI Dialog的样式设置问题


Posted in Javascript onDecember 18, 2013

最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了。

运行插件,需要的环境如下

<script src="../../JS/jquery-1.4.2.js" type="text/javascript"></script>

<script src="../JS/jquery.ui.js" type="text/javascript"></script>

<link href="CSS/themes/redmond/jquery.ui.all.css" rel="stylesheet" type="text/css" />

jquery.ui.all.css 为启动样式的CSS ,用firefox打开查看 ,浮层的title 如下,

<span id="ui-dialog-title-divShow" class="ui-dialog-title" unselectable="on" style="-moz-user-select: none;">百姓一站通提示</span>

其实就是一个span,那么 根据这个class ui-dialog-title  我们去 官网的CSS目录里 找到jquery.ui.dialog.css 文件 查找classui-dialog-title  这个CSS样式。

.ui-dialog .ui-dialog-title { font: 62.5% "Trebuchet MS" , sans-serif;font-weight:bold;float: left; margin: .1em 16px .1em 0; height:15px }

对这个css进行修改即可达到我们想要的浮层的头样式了。

header的背景设置:

.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }

可以去掉背景图片 设置为背景颜色

.ui-widget-header { border: 1px solid #aaaaaa; background-color:red; color: #222222; font-weight: bold; }

关于x与右下角的图标设置:

图标.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }

Javascript 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 #Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 #Javascript
jquery中event对象属性与方法小结
Dec 18 #Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 #Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 #Javascript
cookie中的path与domain属性详解
Dec 18 #Javascript
浅析Cookie中的Path与domain
Dec 18 #Javascript
You might like
javascript 小型动画组件与实现代码
2010/06/02 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python+Opencv识别两张相似图片
2020/03/23 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
学校安全教育制度
2014/01/31 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers