jQuery UI 应用不同Theme的办法_jquery

 

  一开始,我准备去动手,自己修改CSS文件。这被证明是个非常费力不讨好的事情。

  有一次在jQuery UI的主页【http://jqueryui.com/home】停留的时候,一个单词很快吸引了我的注意:【themeable】,这不就是“可变主题的”的意思吗?于是我进入到【http://jqueryui.com/themeroller/】这里,发现了下图的这个地方,他们官网的人把主题的更换叫做“主题滚轮”(哈哈哈,翻译水平一般,信达雅也不知道满足了多少)。

   

  第一个TAB页里说的是【滚出我们自己的主题样式】。打开下面各个分项后,可以自己定义自己需要的样式,定义好以后,点那个下载的按钮就可以下载自己定义好的一套主题样式了。这比自己动手去改CSS文件什么的方便多了。

  第二个TAB页打开后,就发现原来他们已经准备好了很多的主题。这对于我这样的懒人很合适,这么多的样式总有一个是我想要的。

  选中自己喜欢的样式,点击下载按钮,会自动转到下载页面,然后就能把自己想要的主题样式包给下载下来了。也可以在下载页面的【Theme】区的下拉框里选择自己需要的主题,我选择的是【Cupertino】。

 

  两个压缩包下载下来(注意:不同的主题样式,压缩包名称是一样的,保存时别覆盖了),解压以后就发现,不同的主题其实只有CSS文件夹中的内容不同,也就是主题包的资源不同(主题包资源包括图片和CSS文件)。其它的都是一样的,文件夹文件名都一样,甚至于文件里面的元素的命名都是一样的。

 

  在应用的项目工程中,只需要将主题包和【jquery-ui-1.8.4.custom.min.js】文件加入工程,就可以使用可变主题的jQuery UI了。如图:

   我们所要做的就是在需要使用jQuery UI的页面中添加对于CSS文件和JS文件的引用即可。我一般是在母版页里添加。

复制代码 代码如下:

<link rel="stylesheet" type="text/css" href="http://www.jb51.net/Content/smoothness/jquery-ui-1.8.4.custom.css" />
<script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.4.custom.min.js"></script>

当我们要更换jQuery UI的主题样式时,只需要修改对CSS的引用路径即可实现。如下图,这个颜色的部分就是修改的地方。

复制代码 代码如下:

<link rel="stylesheet" type="text/css" href="http://www.jb51.net/Content/cupertino/jquery-ui-1.8.4.custom.css" />

这里【http://jqueryui.com/demos/tabs/】是jQuery UI的一些使用示例的介绍,这个地址已经直接进入到TAB控件的使用说明。使用说明的页面布局如下图:

  左边:选择你要显示的对象;

  中间:是运行时的实际效果显示的地方,点击【View Source】能显示源代码;

  右边:是选中对象的一些扩展功能的示例,选择不同的功能,显示区即会有随之变化,源代码区也会跟着变更;例如:上图选择【Open on mouseover】,Tab控件的Tab Page则由原来需要点击才能切换变成了只需要鼠标移动上去就可以切换了。

 

  最后,再次强烈推荐jQuery UI

时间: 2024-09-04 07:03:26

jQuery UI 应用不同Theme的办法_jquery的相关文章

jQuery dataTables与jQuery UI 对话框dialog的使用教程_jquery

首先介绍下这两个插件功能 1.DataTables是一个jQuery的表格插件. 官方网站及其下载地址:http:/www.datatables.net 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 2.对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript的aler

jquery ui dialog替代confirm实例分析_jquery

本文实例讲述了jquery ui dialog替代confirm的方法.分享给大家供大家参考,具体如下: js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能 1.html代码 <div id="confirm_dialog" title="提示" style="display:none;"> </div> 把上面代码放到公用的地方 2.

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

最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了. 运行插件,需要的环境如下 <script src="../../JS/jquery-1.4.2.js" type="text/javascript"></script> <script src="../JS/jquery.ui.js" type="text/javascript">&

jQuery UI制作选项卡(tabs)_jquery

先看一下效果: Jquery-UI 选项卡的制作实际上是利用锚点链接的原理,实现起来非常的简单. 第一步:引入 jquery 和 jquery-ui 文件. 以下是我的head部分的代码: <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="style.css"> <script

jQuery UI AutoComplete 自动完成使用小记_jquery

页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

jQuery UI 实现email输入提示实例_jquery

效果:   复制代码 代码如下: 使用了Jquery UI ,要导入的js和css: <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <link rel="stylesheet" href="../demos.css"> <script src="../../jquery-1.7.2.js"&

bootstrap与Jquery UI 按钮样式冲突的解决办法_jquery

参考: http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上 要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了. 网上查了下, 需要在JS开始的地方 添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton; 添加完, 刷新页面就正常了

jQuery UI Dialog 创建友好的弹出对话框实现代码_jquery

主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod

jQuery UI结合Ajax创建可定制的Web界面_jquery

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可