jQuery UI 主题

收藏:0   阅读:62

jQuery UI主题

所有的 jQuery UI 插件都允许开发人员无缝集成 UI 小部件到他们网站或应用程序的外观和感观。每个插件通过 CSS 定义样式,且包含了两层样式信息:标准的 jQuery UI CSS 框架 样式和具体的插件样式。

jQuery UI CSS 框架提供了语义表示的类,用来表明小部件内元素的角色,比如标题、内容或可点击区域。这些在所有的小部件中都是一致的,一个可点击的 tab(标签页)、accordion(折叠面板)或 button(按钮)都有相同的ui-state-defaultclass,用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时,这个 class 就变成ui-state-hover,当选中这些元素时则变成ui-state-active。这些 class 的一致性使得所有部件中具有相似角色或交互状态的元素在外观表现上一致。

CSS 框架样式封装在一个单独的文件中,名为ui.theme.css。这个文件时通过 ThemeRoller 应用程序来修改的。框架样式只包含影响外观和感观的属性,只要是颜色、背景图像、图标等。所以这些是 "安全的" 样式,不会影响到插件的功能。这种分隔意味着开发人员可以通过在theme.css文件中修改颜色和图像来创建一个自定义的外观和感观。由于未来的插件或者 bug 修复将是可用的,这些不通过修改即可与主题一起使用。

由于框架样式只覆盖了外观和感观,所以还需要包含具体的插件样式表,这些样式表包括了所有额外的让小部件具有功能性的结构样式规则,比如尺寸、内边距、外边距、定位、浮动。每个插件的样式表位于themes/base文件夹内,且配合插件进行命名,比如 "jquery.ui.accordion.css"。这些样式必须认真编辑,因为它们与脚本一起提供了框架样式的覆盖。

我们鼓励所有的开发人员创建 jQuery 插件,jQuery UI CSS 框架使得最终用户更容易定制主题和使用插件。

主题化

下面列出了三种主题化 jQuery UI 插件的一般方法:

使用 ThemeRoller、jQuery UI CSS 框架,以及设计自定义主题

© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!