jQuery UI
  • [jQuery UI]jQuery UI 教程
  • [jQuery UI]jQuery UI 简介
  • [jQuery UI]jQuery UI 下载
  • [jQuery UI]jQuery UI 使用
  • [jQuery UI]jQuery UI 定制
  • [jQuery UI]jQuery UI 工作原理
  • [jQuery UI]jQuery UI 主题
  • [jQuery UI]jQuery UI ThemeRoller
  • [jQuery UI]jQuery UI CSS 框架 API
  • [jQuery UI]jQuery UI 设计主题
  • [jQuery UI]jQuery UI 部件库(Widget Factory)
  • [jQuery UI]jQuery UI 通过部件库(Widget Factory)扩展小部件
  • [jQuery UI]jQuery UI 小部件(Widget)方法调用
  • [jQuery UI]jQuery UI 为什么使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 如何使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 1.10 API 文档
  • [jQuery UI]jQuery UI API 类别 - 特效(Effects)
  • [jQuery UI]jQuery UI API类别 - 特效核心Effects Core
  • [jQuery UI]jQuery UI API 类别 - 交互Interactions
  • [jQuery UI]jQuery UI API 类别 - 方法重载Method Overrides
  • [jQuery UI]jQuery UI API 类别 - 方法Methods
  • [jQuery UI]jQuery UI API 类别 - 选择器Selectors
  • [jQuery UI]jQuery UI API 类别 - 主题Theming
  • [jQuery UI]jQuery UI API 类别 - UI 核心UI Core
  • [jQuery UI]jQuery UI API 类别 - 实用工具Utilities
  • [jQuery UI]jQuery UI API 类别 - 小部件Widgets
  • [jQuery UI]jQuery UI 实例
  • [jQuery UI]jQuery UI 实例 - 拖动Draggable
  • [jQuery UI]jQuery UI 实例 - 放置Droppable
  • [jQuery UI]jQuery UI 实例 - 缩放Resizable
  • [jQuery UI]jQuery UI 实例 - 选择Selectable
  • [jQuery UI]jQuery UI 实例 - 排序Sortable
  • [jQuery UI]jQuery UI 实例 - 折叠面板Accordion
  • [jQuery UI]jQuery UI 实例 - 自动完成Autocomplete
  • [jQuery UI]jQuery UI 实例 - 按钮Button
  • [jQuery UI]jQuery UI 实例 - 日期选择器Datepicker
  • [jQuery UI]jQuery UI 实例 - 对话框Dialog
  • [jQuery UI]jQuery UI 实例 - 菜单Menu
  • [jQuery UI]jQuery UI 实例 - 进度条Progressbar
  • [jQuery UI]jQuery UI 实例 - 滑块Slider
  • [jQuery UI]jQuery UI 实例 - 旋转器Spinner
  • [jQuery UI]jQuery UI 实例 - 标签页Tabs
  • [jQuery UI]jQuery UI 实例 - 工具提示框Tooltip
  • [jQuery UI]jQuery UI 实例 - 特效Effect
  • [jQuery UI]jQuery UI 实例 - 显示Show
  • [jQuery UI]jQuery UI 实例 - 隐藏Hide
  • [jQuery UI]jQuery UI 实例 - 切换Toggle
  • [jQuery UI]jQuery UI 实例 - 添加Class-Add Class
  • [jQuery UI]jQuery UI 实例 - 移除 Class-Remove Class
  • [jQuery UI]jQuery UI 实例 - 切换Class-Toggle Class
  • [jQuery UI]jQuery UI 实例 - 转换Class-Switch Class
  • [jQuery UI]jQuery UI 实例 - 颜色动画Color Animation
  • [jQuery UI]jQuery UI 实例 - 定位Position
  • [jQuery UI]jQuery UI 实例 - 部件库Widget Factory
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> javaScript >> jQuery UI >> jQuery UI 主题
    jQuery UI 主题
    更新日期: 2017年07月20日 来源: 本站原创 作者: 佚名 阅读:
    上一篇jQuery UI 工作原理 下一篇:jQuery UI ThemeRoller

    jQuery UI 主题

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

    jQuery UI CSS 框架提供了语义表示的类,用来表明小部件内元素的角色,比如标题、内容或可点击区域。这些在所有的小部件中都是一致的,一个可点击的 tab(标签页)、accordion(折叠面板)或 button(按钮)都有相同的 ui-state-default class,用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时,这个 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 主题:最早的创建主题的方式是使用 ThemeRoller 来生成和下载一个主题。这个应用程序将创建一个新的 ui.theme.css 文件和一个包含了所有必需的背景图像及图标精灵的 images 文件夹。这个方法是最早的创建和维护主题的方式,但是它对 ThemeRoller 中提供的选项限制了自定义。
    •  
    • 修改 CSS 文件:为了对外观和感观做进一步的控制,您可以选择从默认主题(Smoothness)开始,或者从一个由 ThemeRoller 生成的主题开始,然后调整 ui.theme.css 文件,或者任意一个独立插件的样式表。例如,您可以很容易地调整所有按钮的角半径为不同于其他 UI 组件的值,或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围,您甚至可以在一个 UI 中同时使用多个主题。为了易于维护,建议只更改 ui.theme.css 文件和图像。
    •  
    • 重新编写自定义的 CSS:为了最大程度地控制外观和感观,可以重新开始编写每个插件的 CSS,而不使用框架类或者特定的插件样式表。如果想要的外观和感观不能通过修改 CSS 来实现或者使用高度自定义的标记,那么就可以采用这个方法。这个方法要求在 CSS 方面有深厚的专业知识,且要求手动更新未来的插件。

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

    • jQuery UI ThemeRoller
    •  
    • jQuery UI CSS 框架 API
    •  
    • 设计主题
     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇jQuery UI 工作原理 下一篇:jQuery UI ThemeRoller
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918