之前的项目中,使用的是jqueryUI的UI组件,jqueryUI的个性化定制确实不错,但大多是字体,颜色方面的小改动。而且不知大家是否看
过jQuery的示例页面,貌似排版布局很精美,但是使用查看样式就能发现在body元素的样式中有一条针对font-size的设置。使用
Firebug禁用这条样式再看看,排版一下子“肥”了n多。真的搞不懂,为什么jqueryUI的尺寸样式要这样奇怪??
之前看到jQuery EasyUI的外观样式比较养眼,都说它是山寨“ExtJS”,我看做的还不错。但是貌似这个家伙与强大的jqGrid有些冲突,而且有时执行速度有点缓慢延迟。不得已只好忍痛割爱,毕竟舍不得放弃jqGrid的强大功能。
既然最初看中的是jQuery EasyUI的外观样式,干脆从jqueryUI下载一个自定义版的UI主题,然后根据自己的要求,借助Firebug,改造出适合自己主题。既然要改,就不能只是改个字体、颜色的小打小闹,要从字体、颜色、尺寸、布局都动动手脚。
以下内容是jqueryUI提供的Redmond主题和我修改后的aero主题(下载地址
)的部分对比(全都取消了body中的font-size样式),当然各人审美不同。
1. 整个jqueryUI外观最令我看不顺眼的就是tab组件,原来的tab组件又肥又丑,看上去一点都不秀敏。修改后的主题,缩小了每个标签的边距,去掉了标签条背后的深色背景,使它看上去更协调。
2. 修改后的主题使对话框的标题与整个窗体融为一体。
3. 修改后主题的日期选择框也与整个主题风格一致。
这些变化都只是通过修改jquery-ui-1.8.1.custom.css的内容得来的。当然里面的一些图标还可以继续替换美化,相信使用CSS Sprite方法应该不难。
如果有兴趣的话,可以使用UltraEdit的文本比较功能,查看一下我修改的jquery-ui-1.8.1.custom.css与
jqueryUI提供的那些自带主题的jquery-ui-1.8.1.custom.css有什么区别。只要有CSS基础知识,就肯定能懂。
分享到:
相关推荐
- 使用 Bootstrap 的类和 jQuery UI 的主题类结合,或者为 jQuery UI 的元素添加特定的 CSS 类来覆盖 Bootstrap 的样式。 - 创建自定义的 CSS,明确指定需要的样式,避免使用过于通用的选择器。 3. **JavaScript ...
本文将深入探讨“jQueryUI MetroUI WindowUI”主题,这是一个受到Windows 8 Metro UI设计启发的jQuery UI主题,旨在为网页带来现代、简洁的视觉体验。 首先,我们要理解jQuery UI的基础。jQuery UI是一个基于jQuery...
JQuery UI 的主题系统基于 Themeroller,这是一个强大的在线工具,允许开发者自定义组件的颜色、字体、大小等样式,生成定制的主题CSS文件。对于需要创建蓝色调UI的项目,1.10.3 版本的“蓝色主题”是一个理想的选择...
jQuery UI Messager允许开发者自定义消息框的样式、内容和行为。 4. **自定义和扩展**:由于“描述”中提到这个版本是修改过的,这意味着可能对原始代码进行了调整,以增加新的功能或优化性能。这可能包括添加新的...
jQuery UI的自定义和主题 jQuery UI 提供了灵活的主题系统,允许开发者通过修改CSS样式来自定义组件的外观。默认提供了一套名为“smoothness”的主题,但开发者可以根据需求创建自己的主题,或者使用在线工具如...
jQuery UI 是一个基于jQuery JavaScript库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,极大地增强了网页的用户体验。本资源"jQuery UI工具风格主题.rar"显然是一个包含了jQuery UI...
此外,Bootstrap 还支持自定义主题和扩展,满足各种个性化需求。 jQuery UI 是基于 jQuery JavaScript 库的另一款开源框架,它专注于创建交互式的用户界面元素。jQuery UI 提供了各种可拖动、可排序、可调整大小的...
jQuery UI提供了一套称为Themeroller的在线工具,让用户可以自定义主题,选择颜色、字体、边框样式等,生成对应的CSS文件。 在给定的文件`jquery-ui-themes-1.9.2.zip`中,包含了多个预设的主题,每个主题通常由一...
理解这些样式对于自定义jQuery UI的主题和适应不同设计需求至关重要。 `development-bundle`目录是jQuery UI的核心部分,它包含了未压缩和未优化的源代码。这个目录下有三个子目录:`themes`、`ui`和`tests`。 1. ...
JQueryUI提供了多种主题,如smoothness、redmond等,开发者可以根据项目需求选择或自定义主题,确保应用界面符合品牌风格。此外,ThemeRoller工具允许开发者在线定制主题,进一步个性化用户的视觉体验。 接下来转向...
12. **主题(Themeroller)**:提供在线工具,允许开发者根据项目需求自定义jQuery UI的外观和风格。 在使用jQuery UI时,开发者需要先引入jQuery库,然后引入jQuery UI的CSS和JavaScript文件。可以通过CDN链接或者...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互式组件和可自定义的主题,适用于构建后台管理系统界面。jQuery UI 包含了多种功能强大的组件,如对话框(Dialog)、日期选择器...
1. **主题定制**:jQuery UI允许开发者通过ThemeRoller工具自定义UI外观,创建符合品牌形象的视觉样式。 2. **对话框(Dialog)**:提供了模态和非模态对话框,用于显示警告、确认或输入信息,支持拖动和自动调整...
- **主题支持**:继承自jQuery UI,该插件能够无缝地与各种jQuery UI主题搭配,确保与页面其他组件的视觉一致性。 - **事件处理**:提供了丰富的事件接口,如`select`、`deselect`等,方便开发者根据用户操作进行...
4. **主题(Theming)**:jQuery UI支持主题罗盘(ThemeRoller),允许开发者自定义视觉样式,确保与网站的整体设计风格保持一致。 学习jQuery UI,首先需要理解jQuery基础,因为它是jQuery UI的底层支持。掌握基本...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,提供了丰富的交互效果、可自定义的主题以及多种组件,如对话框、拖放功能、日期选择器等。本资源是《jQuery UI 开发指南》一书中的示例源代码,对于...
3. **主题**:jQuery UI 支持主题Roller,可以在线定制和生成符合网站风格的界面样式,使得UI组件与网站设计保持一致。 4. **可定制性**:每个组件都可以通过配置选项进行定制,如大小、颜色、行为等,满足不同的...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,使得开发者能够更轻松地创建具有吸引力和交互性的Web应用。这个压缩包“jquery-ui-themes-...
本话题主要涉及两个关键库——jQuery UI和myflow.js,以及如何结合它们来构建自定义的组织架构图和流程图。首先,让我们深入了解这两个库及其功能。 jQuery UI是一个流行的JavaScript库,它是jQuery项目的扩展,...
jQuery UI 包含了大量的主题和自定义选项,使得开发者可以根据自己的需求调整样式和行为。 在提供的文件中,我们可以看到三个主要的组件: 1. **jquery-ui-1.8.custom.zip**:这是jQuery UI的一个特定版本,1.8...