如何为HTML5和CSS3编程的AJAX元素添加主题
jQuery主题工具使通过CSS3装饰元素非常容易。
jQuery主题的伟大之处在于它们是语义性的。
也就是说，您指定元素的一般用途，然后让主题应用适当的特定CSS。
您可以使用themeRoller应用程序轻松创建新主题或者修改现有主题。
许多jQuery界面元素都会自动使用当前的CSS主题。
当然，您也可以将它们应用于您自己的任何元素以获得一致的外观。
主题只是CSS类。
要将CSS主题应用于元素，您只需向对象添加一个特殊的类。
例如，通过添加以下代码，可以使一段看起来像ui-widget的当前定义：
<div class = "ui-widget"> My div now looks like a widget </div>
当然，在HTML中添加类违反了语义设计的原则之一，因此最好使用jQuery与JavaScript一起工作：
function themify(){
//add theme-based CSS to the elements
$("div").addClass("ui-widget")
.addClass("ui-widget-content")
.addClass("ui-corner-all");
$(":header").addClass("ui-widget-header")
.addClass("ui-corner-all");
$("#resizeMe")
.append('<span class = "ui-icon ui-icon-star"></span>');
}
themify()函数将所有主题添加到页面上的元素，并为其应用漂亮的jQuery主题。
用jQuery识别所有div。
将ui-widget类添加到所有div。
此类在主题中定义。
所有jQuery主题都定义了此类，但具体内容因主题而异。
这样，您可以换出主题以更改外观，并且代码仍然有效。
ui-widget类将元素定义为小部件。
- 也添加ui-widget-content。
div需要连接两个类，因此某些程序员使用链接来指定div也应该是该类的成员。
此ui-widget-content类指示应为小部件的内容设置样式。
- 指定圆角。
圆角已成为Web 2.0视觉设计的标准。
使用jQuery可以非常轻松地实现这种效果—只需将ui-corner-all类添加到要具有圆角的任何元素即可。
圆角使用CSS3，并非所有浏览器都支持。
您的页面在较旧的浏览器中不会显示圆角，但是在其他情况下，该页面仍然可以正常工作。
- 使所有标题符合小部件标题样式。
jQuery主题包括漂亮的标题样式。
您可以轻松地使所有标题标签(H1至H6)都遵循此主题。
使用：header过滤器可以识别所有标题，并将ui-widget-header和ui-corner-all类应用于这些标题。
jQuery UI包支持许多有趣的类。
| Class | Used On | Description |
|---|---|---|
| ui-widget | Outer container of widget | Makes element look like a widget. |
| ui-widget-header | Heading element | Applies distinctive heading appearance. |
| ui-widget-content | Widget | Applies widget content style to element and children. |
| ui-state-default | Clickable elements | Displays standard (unclicked) state. |
| ui-state-hover | Clickable elements | Displays hover state. |
| ui-state-focus | Clickable elements | Displays focus state when element has keyboard focus. |
| ui-state-active | Clickable elements | Displays active state when mouse is clicked on element. |
| ui-state-highlight | Any widget or element | Specifies that an element is currently highlighted. |
| ui-state-error | Any widget or element | Specifies that an element contains an error or warningmessage. |
| ui-state-error text | Text element | Allows error highlighting without changing other elements(mainly used in form validation). |
| ui-state-disabled | Any widget or element | Demonstrates that a widget is currently disabled. |
| ui-corner-all, ui-corner-tl (etc) | Any widget or element | Adds current corner size to an element. Specify specificcorners with tl, tr, bl, br, top, bottom, left, right. |
| ui-widget-shadow | Any widget | Applies shadow effect to a widget. |
UI主题中定义了其他一些类，但这些是最常用的类。
有关更多详细信息，请参考当前的jQuery UI文档。
如何添加图标
注意元素内出现的小开始。
此元素是jQuery UI图标的示例。
所有jQuery主题都支持一组标准的图标，这些图标是小图片(16像素见方)。
图标集包括用于箭头的标准图标以及菜单和工具栏中常用的图像。
一些jQuery UI元素会自动使用图标，但是您也可以直接添加它们。
要在程序中使用图标，请按照下列步骤操作：
- 包括一个jQuery UI主题。
图标是主题包的一部分。
包括与主题相对应的CSS样式表。
- 确保可以访问图像。
下载主题包时，它包含图像目录。
此目录中包含的图像用于创建自定义背景以及图标。
CSS文件期望一个名为CSS的目录。
该目录应包含多个以ui-icons开头的图像。
这些图像包含所有必要的图标。
如果图标图像文件不可用，则图标不会显示。
- 在要显示图标的位置创建一个跨度。
在您希望图标出现在HTML中的任何地方放置一个空的span元素。
您可以根据需要将跨度直接放在HTML中，也可以通过jQuery添加跨度。
- 将ui-icon类附加到跨度。
这告诉jQuery将范围视为图标。
范围的内容将被隐藏，并且范围将被调整大小以容纳16像素的正方形图标图像。
- 附加第二类以标识特定的图标。
查看themeRoller页面以查看可用的图标。
将鼠标悬停在此页面上的图标上时，您可以看到与该图标关联的类名称。
您可以像这样直接在HTML中添加代码：
<p id = "myPara"> This is my text <span class = "ui-icon ui-icon-star"></span> </p>
或者，您可以使用jQuery将适当的代码添加到您的元素中：
$("#myPara").append('<span class = "ui-icon ui-icon-star"></span>');
