`

漂亮的自定义jQueryUI主题

UI 
阅读更多

之前的项目中,使用的是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基础知识,就肯定能懂。

分享到:
评论

相关推荐

    jquery UI 主题 bootstrap

    - 使用 Bootstrap 的类和 jQuery UI 的主题类结合,或者为 jQuery UI 的元素添加特定的 CSS 类来覆盖 Bootstrap 的样式。 - 创建自定义的 CSS,明确指定需要的样式,避免使用过于通用的选择器。 3. **JavaScript ...

    jQueryUI MetroUI WindowUI 主题

    本文将深入探讨“jQueryUI MetroUI WindowUI”主题,这是一个受到Windows 8 Metro UI设计启发的jQuery UI主题,旨在为网页带来现代、简洁的视觉体验。 首先,我们要理解jQuery UI的基础。jQuery UI是一个基于jQuery...

    JQUERY UI 1.10.3官网最新 蓝色主题

    JQuery UI 的主题系统基于 Themeroller,这是一个强大的在线工具,允许开发者自定义组件的颜色、字体、大小等样式,生成定制的主题CSS文件。对于需要创建蓝色调UI的项目,1.10.3 版本的“蓝色主题”是一个理想的选择...

    jquery ui messager 消息框

    jQuery UI Messager允许开发者自定义消息框的样式、内容和行为。 4. **自定义和扩展**:由于“描述”中提到这个版本是修改过的,这意味着可能对原始代码进行了调整,以增加新的功能或优化性能。这可能包括添加新的...

    JQuery UI 中文帮助文档

    jQuery UI的自定义和主题 jQuery UI 提供了灵活的主题系统,允许开发者通过修改CSS样式来自定义组件的外观。默认提供了一套名为“smoothness”的主题,但开发者可以根据需求创建自己的主题,或者使用在线工具如...

    jQuery UI工具风格主题.rar

    jQuery UI 是一个基于jQuery JavaScript库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,极大地增强了网页的用户体验。本资源"jQuery UI工具风格主题.rar"显然是一个包含了jQuery UI...

    bootstrap&jQueryUI例子

    此外,Bootstrap 还支持自定义主题和扩展,满足各种个性化需求。 jQuery UI 是基于 jQuery JavaScript 库的另一款开源框架,它专注于创建交互式的用户界面元素。jQuery UI 提供了各种可拖动、可排序、可调整大小的...

    jquery ui & themes

    jQuery UI提供了一套称为Themeroller的在线工具,让用户可以自定义主题,选择颜色、字体、边框样式等,生成对应的CSS文件。 在给定的文件`jquery-ui-themes-1.9.2.zip`中,包含了多个预设的主题,每个主题通常由一...

    jquery UI 1.7源代码

    理解这些样式对于自定义jQuery UI的主题和适应不同设计需求至关重要。 `development-bundle`目录是jQuery UI的核心部分,它包含了未压缩和未优化的源代码。这个目录下有三个子目录:`themes`、`ui`和`tests`。 1. ...

    JQueryUI,EasyUI一些控件的使用

    JQueryUI提供了多种主题,如smoothness、redmond等,开发者可以根据项目需求选择或自定义主题,确保应用界面符合品牌风格。此外,ThemeRoller工具允许开发者在线定制主题,进一步个性化用户的视觉体验。 接下来转向...

    最新jQueryUI组件下载

    12. **主题(Themeroller)**:提供在线工具,允许开发者根据项目需求自定义jQuery UI的外观和风格。 在使用jQuery UI时,开发者需要先引入jQuery库,然后引入jQuery UI的CSS和JavaScript文件。可以通过CDN链接或者...

    Jquery Ui 后台模板界面

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互式组件和可自定义的主题,适用于构建后台管理系统界面。jQuery UI 包含了多种功能强大的组件,如对话框(Dialog)、日期选择器...

    ,jqueryui jquery ui包 效果不错,只是为了自己保存

    1. **主题定制**:jQuery UI允许开发者通过ThemeRoller工具自定义UI外观,创建符合品牌形象的视觉样式。 2. **对话框(Dialog)**:提供了模态和非模态对话框,用于显示警告、确认或输入信息,支持拖动和自动调整...

    jQuery UI Multiselect (jQuery UI 多选框)

    - **主题支持**:继承自jQuery UI,该插件能够无缝地与各种jQuery UI主题搭配,确保与页面其他组件的视觉一致性。 - **事件处理**:提供了丰富的事件接口,如`select`、`deselect`等,方便开发者根据用户操作进行...

    jQuery UI 中文版 入门到精通 PDF

    4. **主题(Theming)**:jQuery UI支持主题罗盘(ThemeRoller),允许开发者自定义视觉样式,确保与网站的整体设计风格保持一致。 学习jQuery UI,首先需要理解jQuery基础,因为它是jQuery UI的底层支持。掌握基本...

    JQUERY UI 开发指南源码

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,提供了丰富的交互效果、可自定义的主题以及多种组件,如对话框、拖放功能、日期选择器等。本资源是《jQuery UI 开发指南》一书中的示例源代码,对于...

    很强大的jQuery UI

    3. **主题**:jQuery UI 支持主题Roller,可以在线定制和生成符合网站风格的界面样式,使得UI组件与网站设计保持一致。 4. **可定制性**:每个组件都可以通过配置选项进行定制,如大小、颜色、行为等,满足不同的...

    jqueryui需的jar包

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,使得开发者能够更轻松地创建具有吸引力和交互性的Web应用。这个压缩包“jquery-ui-themes-...

    jQuery ui基于myflow.js绘制流程图插件,自定义组织架构图图表,拖拽绘制组织架构图表代码.zip

    本话题主要涉及两个关键库——jQuery UI和myflow.js,以及如何结合它们来构建自定义的组织架构图和流程图。首先,让我们深入了解这两个库及其功能。 jQuery UI是一个流行的JavaScript库,它是jQuery项目的扩展,...

    jqueryui jqueryui

    jQuery UI 包含了大量的主题和自定义选项,使得开发者可以根据自己的需求调整样式和行为。 在提供的文件中,我们可以看到三个主要的组件: 1. **jquery-ui-1.8.custom.zip**:这是jQuery UI的一个特定版本,1.8...

Global site tag (gtag.js) - Google Analytics