浅析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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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
DOMXML函数笔记
2006/10/09 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
django rest framework serializers序列化实例
2020/05/13 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
android面试问题与答案
2016/12/27 面试题
优纳科技软件测试面试题
2012/05/15 面试题
迎元旦广播稿
2014/02/22 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
开学随笔
2015/08/15 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android