最全Jquery UI 教程.docxVIP

最全Jquery UI 教程jQuery Tools 是一套非常优秀的 Web UI 库，包括 Tab 容器，可折叠容器，工具提示，浮动层以及可滚动容器等等，可以为你的站点带来非同寻常的桌面般体验，这套工具的主要作用是显示内容，这是绝多多数站点最需要的东西。这套令人惊异的 UI 库只有 5.59K 大小，基于 MIT 和 GPL 两种许可模式。和别的 Web UI 库不同，别的 UI 库很多是面向行为的，如拖放，滚动，表格排序，可拖放窗口等等，它们更适合于富 Web 应用，如 Email 客户端，任务管理，图片组织整理等。而 jQuery Tools 主要面向内容展示，因此更适用于单纯的内容型网站。jQuery Tools 使用也很简便，只需几行调用代码即可，其官方站点包含大量演示和调用代码可以参考。以下是该 UI 库中包含的主要 UI 工具介绍。jQuery Tools / TabsWeb 上最受欢迎的 UI 部件当属 Tab 容器，如果没有 Tab，我们的很多网页不知要多么混乱，所有用户都熟悉 Tab 这种用户友好的部件，jQuery Tools / Tab 非常好用，甚至可以使用浏览器的前进后退导航按钮在 Tab 间前进或后退。jQuery Tools / Flashembed如今?JavaScript?真是越来越快了，所有浏览器都在 JavaScript 引擎上较量，我们会看到越来越多的基于 JavaScript 的 Web 部件面世，然而至少在当下， Flash 仍有其用武之地，比如播放视频。jQuery Tools / Flashembed 可以用来在网页中加载 Flash 对象，虽然类似的工具比比皆是，但 Flashembed 绝对是其中最好用的一个。jQuery Tools / OverlayOverlay （浮动层）可以用来浮动在任何?HTML?对象的上方，在现代 Web 设计中，浮动层是一种非常有效的 UI 概念，可以用来着重显示你的产品。显示警示信息。提示用户输入。以灯箱风格浏览图片库。jQuery Tools / Overlay 可以很轻松地处理上述各种情形和各种效果。jQuery Tools / Tooltip工具提示是 Web 上最实用的工具，Web 默认的提示工具太简陋，jQuery Tools / Tooltip 会以一种非常漂亮的视觉效果显示提示内容。jQuery Tools / ScrollablejQuery Tools / Scrollable 可以在网页中实行定制的，局部的滚动，在现代 Web 设计中，这几乎是最受欢迎的一种技术，可以用在下面这些场合：产品目录滚动新闻在表单中实现定制选择框浏览图片库视频播放列表各种站点导航HTML设置这里是上面的例子中的HTML设置。img id=overlaytrigger src=img/gustavohouse.jpg rel=#overlay/ !-- overlayed element, everything is styled with external stylesheet -- div id=overlay img src=img/gustavohouse-medium.jpg / div class=details h2Berlin Gustavohouse/h2 p The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in 1998 by the Spanish artist Gustavo. /p /div /div JavaScript的设置$(#overlaytrigger).overlay({effect: apple, expose: #004C7D}); HTML设置所有你需要的是触发元素和一个提示元素。所有方面都可以用CSS样式：!-- a couple of trigger elements -- div id=tooltips img src=img/tooltip/1.jpg title=My tooltip #1/ img src=img/tooltip/2.jpg title=My tooltip #2/ img src=img/tooltip/3.jpg title=My tooltip #3/ /div !-- the tooltip -- div id=tooltip /div JavaScript的设置$(#tooltips img).tooltip({