`
iuottp
  • 浏览: 171523 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

漂亮的自定义jQueryUI主题 收藏

阅读更多

漂亮的自定义jQueryUI主题 收藏
之前的项目中,使用的是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基础知识,就肯定能懂。

新主题的下载地址:http://code.google.com/p/jquery-ui-theme-aero/downloads/list

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/gengv/archive/2010/05/26/5624814.aspx

分享到:
评论
2 楼 287854442 2011-04-09  
不错不错 必须要顶! 好像是字体小了一些(firefox下,其他的测试过没有什么问题)。


------------------------

楼主有时间能不能说一下是怎么改的。
1 楼 287854442 2011-04-09  
引用
整个jqueryUI外观最令我看不顺眼的就是tab组件,原来的tab组件又肥又丑,看上去一点都不秀敏


说到我心坎里了 下载你的看看。

相关推荐

    jquery ui 1.7.3值得收藏

    2. **css** - 这个目录包含了jQuery UI的样式表文件,包括默认的主题样式。这些CSS文件定义了组件的颜色、布局、边距等视觉元素,确保UI的一致性和美观性。 3. **js** - JavaScript文件夹,包含了jQuery库本身以及...

    jQuery UI 1.7(2009).pdf

    ### jQuery UI 1.7:用户界面库的深入解析 #### 概述 《jQuery UI 1.7》是2009年由Packt ...对于那些希望深入了解jQuery UI的过去、现在和未来趋势的开发者而言,《jQuery UI 1.7》是一本值得收藏的经典之作。

    jquery培训材料

    这个定制版本可能包含了一些预设的主题和组件,开发者可以根据需求自定义。 **jqGrid文档 (值得收藏的jqgrid文档.pdf)** jqGrid是一个基于jQuery的数据网格插件,支持数据排序、筛选、分页等功能。这份文档可能...

    jQuery插件集合

    - `jQuery UI`提供了各种组件,如对话框、滑块、日期选择器等,丰富了DOM元素的操作和交互。 2. **事件处理插件**: - `jQuery HoverIntent`可以优化悬停事件,防止在鼠标快速移动时触发过多的事件。 - `jQuery ...

    软件工程师_经典收藏50个jQueryMobile开发技巧集萃.docx

    9. **移动WordPress主题**:教程展示了如何利用jQuery Mobile创建针对移动设备优化的WordPress主题。 10. **创建网站**:系列教程介绍如何使用jQuery Mobile构建网站,包括了解其特点和构建首页。 11. **更多组件...

    软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx

    《软件工程师-经典收藏50个jQueryMobile开发技巧集萃》文档主要涵盖了jQuery Mobile框架的开发技巧和实践经验,旨在帮助开发者提升移动Web应用的构建效率和用户体验。jQuery Mobile是一个跨平台的UI框架,专为创建...

    50个最值得收藏的jQuery Mobile开发技巧

    通过使用jQuery Mobile,开发者可以为WordPress构建响应式的主题,确保博客或网站在移动设备上同样具有良好的可用性和可访问性。 最后,使用jQuery Mobile创建网站涉及到对框架中各种组件的理解和应用。例如,...

    jquery ztree实现右键收藏功能

    zTree 具有高度可定制的UI,可以与各种前端框架和主题样式配合使用,它的设计目标是易于扩展、可定制、性能优秀。 知识点二:右键菜单功能 在Web开发中,右键菜单功能是一个常见的交互设计,它通常用于提供额外的...

    精心收藏的JS时间控件10款

    1. **jQuery UI Datepicker**:作为jQuery UI库的一部分,Datepicker是一款功能强大、高度可定制的时间选择器。它可以轻松集成到现有项目中,支持多种语言,并能自定义格式、日期范围和事件处理。 2. **Bootstrap ...

    jquerymobile isscroll 实现上拉加载下拉刷新

    首先,jQuery Mobile 是一个强大的移动UI框架,它提供了丰富的组件和样式,使得开发者能够快速构建响应式的移动网页应用。而 iScroll 是一个JavaScript滚动插件,它提供了高性能的滚动效果,包括平滑的滚动体验和...

    4个Web前端经典实用绝对值得学习收藏的地图实现模板(四)

    在本资源中,我们关注的是"4个Web前端经典实用绝对值得学习收藏的地图实现模板(四)"。这个标题暗示了这是一个系列教程的第四部分,专门介绍如何在Web前端开发中实现地图功能。Web前端是网页设计和开发的重要组成...

    仿淘宝日历控件

    - JavaScript库:例如jQuery UI、Bootstrap Datepicker、FullCalendar等,提供丰富的功能和定制选项。 - 原生移动应用:iOS和Android系统都有原生的日历组件,开发者可以通过API进行集成。 4. **仿淘宝日历控件...

    网站设计素材网址(个人收藏)

    ### 网站设计素材网址(个人收藏) 在进行网站设计的过程中,设计师们常常需要借助各种素材来丰富自己的作品,提升用户体验。以下是一些精心整理的网站设计素材资源站点,涵盖了PS设计素材、网页模板等多个方面,...

    毕业设计:基于SSM的诗词论坛设计与实现.zip

    4. 搜索功能:论坛应具备关键词搜索,用户能快速找到感兴趣的主题或诗词。 5. 点赞与收藏:用户可以对喜欢的诗词进行点赞,或者将其收藏到个人空间。 6. 个人中心:用户可以查看自己的发帖记录、收藏的诗词、收到的...

    个人总结的一些web后台模版

    1. 自定义:尽管模板提供了基础结构,但通常需要根据实际项目需求进行定制,如替换品牌logo、调整颜色主题、添加特定功能等。 2. 兼容性:确保模板在主流浏览器(如Chrome、Firefox、Safari、Edge)上都能正常工作...

    蓝色风格会员中心用户个人管理页面模板

    1. **前端框架**:这个模板可能基于常见的前端框架,如Bootstrap、Element UI或Ant Design,这些框架提供了响应式布局和预设的UI组件,使得开发更高效。 2. **HTML结构**:HTML文件定义了页面的基本结构,包括头部...

    在线电影影视网站html静态模板.zip

    10. **图标字体(Font Awesome)**: 这是一种常见的图标集,可以像字体一样使用,便于自定义大小和颜色,常用于导航栏、按钮和其他UI元素。 11. **Ajax技术**: 可能使用Ajax进行异步数据加载,比如分页、搜索结果的...

    响应式音乐app单页模板

    5. **定制化设计**: 除了基础的Bootstrap样式,模板可能还包含了自定义CSS来实现独特的视觉效果,如过渡动画、颜色主题、图标设计等,以满足音乐应用的特定需求。 6. **字体和图标**: 为了增强视觉效果,模板可能会...

Global site tag (gtag.js) - Google Analytics