jQuery UI 应用不同Theme的办法

2024-10-16 21:42:56

　　一开始，我准备去动手，自己修改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文件的引用即可。我一般是在母版页里添加。

代码如下:

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

代码如下:

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

　　左边：选择你要显示的对象；

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

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

　　最后，再次强烈推荐jQuery UI。

jQuery UI 应用不同Theme的办法

一开始,我准备去动手,自己修改CSS文件.这被证明是个非常费力不讨好的事情. 有一次在jQuery UI的主页[http://jqueryui.com/home]停留的时候,一个单词很快吸引了我的注意:[themeable],这不就是"可变主题的"的意思吗?于是我进入到[http://jqueryui.com/themeroller/]这里,发现了下图的这个地方,他们官网的人把主题的更换叫做"主题滚轮"(哈哈哈,翻译水平一般,信达雅也不知道满足了多少). 第一个TA
bootstrap与Jquery UI 按钮样式冲突的解决办法

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

最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅. 问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡. 解决过程: 首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添
jquery ui dialog ie8出现滚动条的解决方法

此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么说好.. JQUI 开发提交BUG的帖子:http://dev.jqueryui.com/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵附上修改的代码: 修改:jquery.ui.dialog.js 复制代码代码如下: var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-w
关于jQuery UI 使用心得及技巧

1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题--Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代
jquery UI Datepicker时间控件的使用及问题解决

本文实例为大家分享了jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题. 1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题:下载地址: -->下载后的文件 jquery-ui-1.10.3.custom文件夹:不同的主题的区别在于它们引用的css不同默认下载的样式如下: 其它样式比如我下载的样式: 下载的jqueryUI中除了css文件夹
jquery.ui.progressbar 中文文档

复制代码代码如下: <?xml version="1.0" encoding="UTF-8" ?> <!-- 注意事项: 1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议 2. 格式中的所有项都是选填, 如果没有, 不写就是了. 3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<![CDATA[这中间写内容]]> 4. 翻译过程中, 一块对
基于jQuery UI CSS Framework开发Widget的经验

jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller来生成自己的样式. .ui-helper-hidden :为元素应用display:none .ui-helper-hidden-accessible:将元素的绝对位置设置为不可见 .ui-helper-clearfix:适用于浮动包裹父元素的属性 . ui-helper-zfix:适用于修复if
jQuery UI Dialog控件中的表单无法正常提交的解决方法

最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化
jQuery UI Dialog 创建友好的弹出对话框实现代码

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

jQuery UI 应用不同Theme的办法

相关推荐

随机推荐