[翻译] jQuery UI CSS Framework - Part1:Intro and How To Style a Button

March 26th, 2011

原文链接：传送门

 

本文是 jQuery UI CSS Framework 系列文章的第一篇，这是一套强大的 CSS 选择器，你可以使用它来构建一套统一界面的 Web 应用程序。jQuery UI 的 DEMO 页面演示了很多 UI 部件（当然和 ExtJS 等比起来还是有差距的~），但是相对于你以前的工作方式和别的 UI 组件，它还是能帮到你许多的。这里，我们将解释一下这个框架，讲解一下它的优缺点，并用一个例子（一个 Button 的例子）来演示一下。

 

什么是 jQuery UI CSS Framework ？

它是一套复合 jQuery UI 标准部件集的 CSS 选择器，可以很有效地帮助你设计自己的网页。

传送门：官方文档 http://docs.jquery.com/UI/Theming/API

**jQuery UI CSS Framework 的优点 **

下面是我认为的优点：

  1. 它为你处理设计难题：例如在做圆角的时候，只要标记一个 ”ui-corner-all” class 即可
  2. 它为你提供一个一致的外观
  3. 你可以使用它的 UI 部件（例如：tabs, dialog boxes, accordions 等），并获得相同的外观和体验
  4. UI 是一套皮肤，你可以在 这里 设计你自己的皮肤，并且可以非常容易地更换它（不用修改任何代码）

 

该框架的缺点

  1. 选择器没有很好的文档支持，你只能翻阅手册，或靠自己理解它真正的用处（因为它也仅仅是靠一个 class 来识别的）
  2. 用 em 作为度量单位，而不是 px
  3. 该框架并不完整，不是所有你想要的东西都可以被找到
  4. 有时候你往往需要按照网上的例子做

 

如何了解这个框架？

  1. 你可以通过如下途径了解这个框架：
  2. 阅读官方文档：传送门
  3. 查看官方的例子，用 FireBug 等工具查看它们的用法
  4. 查看论坛和相关书籍：《jQuery UI 1.7》

 

 

使用案例

下面是一个简单的例子：

<button id="cancel" type="button" class="ui-state-default ui-corner-all">Cancel</button>

uibuttonie uibuttonfirefox uibuttonchrome
IE 下的效果 Firefox 下的效果 Chrome 下的效果

可以看到，我们很快捷地就创建了一个具有统一外观和圆角的按钮（虽然在 IE 下它没有显示出来…）

上面用到了2个 class，第一个代表这个按钮现在的状态（默认、悬停、按下 等），第二个是用来标记圆角的。

这里就是最简单的用法了，更多的 class 可以参考官方的文档。

本作品由 Dozer 创作，采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。