JQuery UI Dialog的样式设置问题

本篇文章主要是对JQuery中UI Dialog的样式设置问题进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助

最近在用一个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教程 时间:2012-01-05 人气:34
本文关键词:
分享到:

相关文章

  • jquery ui dialog实现弹窗特效的思路及代码 2012-02-07

    这篇文章介绍了jquery ui dialog实现弹窗特效的思路及代码,有需要的朋友可以参考一下   今天我们用jquery ui dialog来做一个弹窗特效。我们先看下效果截图:   我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的。。。实现这一切,只要以下代码:   我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于 jquery ui,我们做弹窗就是这么简单。。。当然了,大家可以看

  • jquery ui dialog实现弹窗特效 2014-01-31

      今天我们用jquery ui dialog来做一个弹窗特效。我们先看下效果截图:   我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的。。。实现这一切,只要以下代码:   我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单。。。当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto:   我先通过变量

  • jQuery 入门教程(34): jQuery UI Dialog 示例(二) 2013-11-04

    模式对话框 如想对话框显示为模式的,可以通过配置modal: true来设置。 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>jQuery UI Demos</title> 6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /

  • JQUERY dialog的用法详细解析 2012-02-20

    本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下。 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框。 <input type="button" value="删除" id="btn" /> 为了设置这个按钮点击的事件,需要准备 jQuery 的环境。 <script type="text/javasc

  • 对Asp.net Mvc和jQuery UI使用者的一些忠告 2012-04-14

    首先,如果你使用asp.net mvc,而且使用的js库是jQuery, 那么一定别错过使用jquery UI。 在以前的工作中,我如果需要写一个类似于Google搜索的自动完成,那可能涉及到JS的编写,CSS样式,以及后台代码如何生成json或者xml传递给自动完成控件。 现在可以使用jQuery UI的Autocomplete,你的工作量会少的惊人。来看我如何实现: 1.添加jquery ui js和css引用。 2.页面添加一个textbox,并在该textbox上使用autocomple

  • jQuery拖拽 & 弹出层介绍与示例 2012-07-09

    这篇文章主要介绍了jQuery拖拽 & 弹出层,有需要的朋友可以参考一下 iDrag & iDialog 介绍 特点: iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法: •1、拖拽函数 iDrag() 或 $.drag(); •2、对话框函数 iDialog() 或 $.dialog(); 跨平台兼容: 兼容:IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支

  • jquery 美化弹出提示 漂亮的Dialog 对话框 2013-07-04

    三个不同的效果,分别是普通的警告,确认/取消,带一个输入框 本例用了jquery.alertify.js,请到演示页面查看 css文件也请到演示页面查看 jquery 美化弹出提示 漂亮的Dialog 对话框 演示 JavaScript Code <script type="text/javascript"> $(document).ready(function() { $(".alert").click(function() { var message = "<h3>A

  • jquery dialog open后,服务器端控件失效的快速解决方法 2014-02-27

    本篇文章是对jquery dialog open后,服务器端控件失效的快速解决方法。进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert、confirm、prompt好用很多。 在使用jquery与.net共同开发时,直接调用jquery dialog的open后,服务器端控件全部失效了,不能执行相应的后台代码。只是源于jquery默认把dialog添加到body中,而不是原来所在的服务器端的form中

  • 把jquery 的dialog和ztree结合实现步骤 2014-02-17

    首先准备好juqury-ui、ztree 的js文件和css 文件,接下来的步骤祥看本文希望对大家有所帮助 第一步:先准备好juqury-ui、ztree 的js文件和css 文件 第二步:example.jsp文件代码中写 复制代码 代码如下: ..引入jqueryui、ztree 的js和css文件 <body> <button value="点击弹出树的dialog对话框" onclick ="getTree()"/> <div id="ztree" clas

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.172 (s). 10 q(s)