jQuery - UI/Theming

UI/Theming

From jQuery JavaScript Library

Jump to: navigation, search

Contents

• 1 Theming jQuery UI
• 2 Getting started
• 3 Using ThemeRoller and Themes
• 4 jQuery UI CSS Framework & Custom themes

Theming jQuery UI

All jQuery UI plugins are designed to allow a developer toseamlessly integrate UI widgets into the look and feel of their site orapplication. Each plugin is styled with CSS and contains two layers ofstyle information: standard jQuery UI CSS Framework styles and plugin-specific styles.

The jQuery UI CSS Framework provide semantic presentationclasses to indicate the role of an element within a widget such as aheader, content area, or clickable region. These are appliedconsistently across all widgets so a clickable tab, accordian or buttonwill all have the same "ui-state-default" class applied to indicatethat it is clickable. When a user mouses over one of these elements,this class is changed to ui-state-hover, then ui-state-active whenselected. This level of class consistency makes it easy to ensure thatall elements with a similar role or interaction state will look thesame across all widgets.

The CSS Framework styles are encapsulated in a single file called ui.theme.css and this is the file modified by the ThemeRollerapplication. Framework styles only include attributes that affect thelook and feel (primarily color, background images and icons) so theseare 'safe' styles that will not affect functionality of individualplugins. This separation means that a developer can create a customlook and feel by modifying the colors and images in theme.css file andknow that as future plugins or bug fixes become available, these shouldwork with the theme without modification.

Since the framework styles only cover look and feel, pluginspecific stylesheets are included that contain all the additionalstructural style rules required make the widget functional, such asdimensions, padding, margins, positioning and floats. Stylesheets foreach plugin are located in the themes/base folder of the download andare named to match the plugin such as "ui.accordion.css". These stylesmust be carefully edited because they work in conjunction with thescripting and provide overrides of framework styles as needed.

We encourage all developers creating jQuery plugins toleverage the new jQuery UI CSS Framework because it will make it mucheasier for end users to theme and use your plugin.

Getting started

There are three general approaches to theming jQuery UI plugins:

• Download a ThemeRoller theme: The easiest way to build a theme is to use the ThemeRollerto generate and download a theme. This app will create a newui.theme.css file and and images directory containing all necessarybackground images and icon sprites which can simply be dropped intoyour project. This approach will be the easiest to create and maintainbut limits customization to the options provided in ThemeRoller.
• Modify the CSS files:To get a bit more control over the look and feel, you may choose tostart with the default theme (Smoothness) or a ThemeRoller-generatedtheme and then adjust the ui.theme.css file or any of the individualplugin stylesheets. For example, you could easily tweak the cornerradius for all buttons to be different than the rest of the UIcomponents or change the path for the icon sprite to use a custom set.With a bit of style scoping, you can even use multiple themes togetherin a single UI. To keep maintenance simple, restricting changes to justthe ui.theme.css file and images is recommended.
• Write completely custom CSS:For the greatest amount of control, the CSS for each plugin can bewritten from scratch without using the framework classes orplugin-specific stylesheet. This may be necessary if the desired lookand feel can't be achieved by modifying the CSS or if highly customizedmarkup is used. This approach requires deep expertise in CSS and willrequire manual updates for future plugins.

Using ThemeRoller and Themes

• ThemeRoller application
• ThemeRoller documentation - How to use the ThemeRoller application
• Theme switcher widget - add a widget to quickly switch between the gallery themes to your site
• ThemeRoller bookmarklet for Firefox (coming soon)
• List of plugins and sites that use the new jQuery UI CSS Framework and are ThemeRoller-ready

jQuery UI CSS Framework & Custom themes

• jQuery UI CSS Framework documentation - Explore the full class API and icon set
• How to create custom themes - Tutorial for creating a theme from scratch

[jQuery - UI/Theming - 文档]

http://docs.jquery.com/UI/Theming

[jQuery - 官方网站]

http://jquery.com/

[jQuery - download下载]

当前版本, http://docs.jquery.com/Release:jQuery_1.3.1
下载列表, http://docs.jquery.com/Downloading_jQuery
最新代码, http://code.jquery.com/nightlies/jquery-nightly.js

[jQuery - 相关论坛]

http://groups.google.com/group/jquery-en
http://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/JavaScript/

[jQuery - 关键词]

jQuery

[jQuery - 文档]

http://docs.jquery.com/Main_Page

[jQuery - Core核心]

each迭代, http://docs.jquery.com/Core/each
jQuery, http://docs.jquery.com/Core/jQuery

[jQuery - Ajax]

jQuery的Ajax文档, http://docs.jquery.com/Ajax/jQuery.ajax
jQuery的Ajax选项，http://docs.jquery.com/Ajax/jQuery.ajax#options
dataType选项，设置返回值类型
timeout选项，用于设置超时
与PHP集成可以使用json_encode返回结果, http://www.php.net/manual/zh/function.json-encode.php

readyState获取请求操作的当前状态, http://msdn2.microsoft.com/en-us/library/ms534361.aspx

[jQuery - 特效]

jQuery淡入特效,http://docs.jquery.com/Effects/fadeIn

[jQuery - Selectors选择器]

表单元素选择器, http://docs.jquery.com/DOM/Traversing/Selectors#Form_Selectors
属性相等选择器，http://docs.jquery.com/Selectors/attributeEquals
checked选中, http://docs.jquery.com/Selectors/checked

:input匹配所有input, textarea, select和button元素, http://docs.jquery.com/Selectors/input

选择器在选择body中出现的title标记时，会出现和预期不同的效果。

element按指定名称匹配所有元素, http://docs.jquery.com/Selectors/element

[jQuery - Attributes属性]

val获取第一个匹配元素value属性的内容, http://docs.jquery.com/Attributes/val

[jQuery - 常用函数]

attr访问自定义属性，减少javascript脚本中代码和数据的耦合

filter, 用于在集合中过滤元素

[jQuery - Events事件]

hover, http://docs.jquery.com/Events/hover
submit提交, http://docs.jquery.com/Events/submit

focus响应每个匹配元素的焦点事件, http://docs.jquery.com/Events/focus

click单击, 触发每个匹配元素的单击事件, 绑定函数到每个匹配元素的单击事件, http://docs.jquery.com/Events/click

[jQuery - Manipulation操作]

after在每个匹配的元素之后插入内容, http://docs.jquery.com/Manipulation/after

[jQuery - Traversing遍历器]

filter过滤, http://docs.jquery.com/Traversing/filter
find查找, http://docs.jquery.com/Traversing/find

[jQuery - Tutorials教程]

Introducing $(document).ready(), http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29

[jQuery - plugins插件]

Easing动画, http://jquery.com/plugins/project/easing
jCarouseLite, 走马灯效果, http://jquery.com/plugins/project/jCarouselLite
tableFilter, 表过滤器, http://jquery.com/plugins/project/tableFilter
Rounded Corner圆角矩形, http://docs.jquery.com/Tutorials:Rounded_Corners#Rounded_Corners_Without_Images

Jeditable原位置编辑器插件, http://plugins.jquery.com/project/jeditable

[jQuery - Utilities实用工具]

trim去掉字符串前后的空格, http://docs.jquery.com/Utilities/jQuery.trim

[jQuery - UI]

UI, http://docs.jquery.com/UI
UI/Theming, http://docs.jquery.com/UI/Theming

[jQuery - 参考资料]

http://www.json.org/, http://www.json.org/json.js

JScript (Windows Script Technologies):, http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx

prototype Property (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/f5s9ycex.aspx

parseInt Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx

toString Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/k6xhc6yc.aspx

HTTP Status Codes (Windows):, http://msdn2.microsoft.com/en-us/library/Aa384325.aspx

HTML+TIME:, http://msdn2.microsoft.com/en-us/library/ms533112.aspx

HTA:APPLICATION对象, http://msdn2.microsoft.com/en-us/library/ms536495.aspx

About Cross-Frame Scripting and Security:关于跨框架脚本和安全, http://msdn2.microsoft.com/en-us/library/ms533028.aspx

How to Build Tables Dynamically:如何动态构建表格, http://msdn2.microsoft.com/en-us/library/ms532998.aspx

Filter Property (Tabular Data Control): - Filter属性(表格数据控件), http://msdn2.microsoft.com/en-us/library/ms531364.aspx

close Method (window):, http://msdn2.microsoft.com/en-us/library/ms536367.aspx

ECMA标准下载, http://www.ecma-international.org/publications/standards/Ecma-262.htm

parseInt Method (JScript 5.6): - IE标准, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx

complete Property (IMG, INPUT, INPUT type=image):, http://msdn2.microsoft.com/en-us/library/ms533688.aspx

fireEvent Method (A, ABBR, ACRONYM, ...):, http://msdn2.microsoft.com/en-us/library/ms536423.aspx

SunSpider JavaScript Benchmark: JavaScript性能测试, http://webkit.org/perf/sunspider-0.9/sunspider.html

onbeforeunload Event (BODY, FRAMESET, window):, http://msdn2.microsoft.com/en-us/library/ms536907.aspx

 

 

 

[jQuery - 综合实例]

实现前一个和后一个效果

跨窗口调用函数

定时刷新

下拉列表框打开指定网站

生成在两个边界间的随机数
文本输入框与标签自动更换

密码输入框与标签自动更换

文本输入区域与标签自动更换

Pre标签在IE与Firefox下效果相对理想的换行处理

固定表头，滚动表格内容