• jquery ui的css设计二


    上一篇见这里

    本篇重点说一下其换肤功能

    换肤一般是指改变控件的字体颜色,背景颜色,边框颜色,hover上去的颜色,背景图片,很少再会涉及修改其长宽,字体类型什么的。

    这个版本的CSS为观察对象,可以发现,它从上到下分为

    • Layout helpers 以ui-helper-开头,表示某种功能
    • Interaction Cues 交互 只有一个.ui-state-disabled
    • Icons 装饰用 只有ui-icon, 它与ui-icon-*配合使用
    • Misc visuals 具体的每个组件,以ui- uiname开头
    • Component containers 每个组件都有的部分 与换肤有关,主要有这三个类名:
      .ui-widget .ui-widget-content .ui-widget-header
    • Interaction states各种ui-state-*, 如.ui-state-default, .ui-state-hover, .ui-state-focus, .ui-state-active 与点击,掠过,选中等行为有关
    • Interaction Cues 也是各种ui-state-*, 如.ui-state-highlight, .ui-state-error ,.ui-priority-primary, .ui-priority-secondary, .ui-state-disabled 多 表示按钮的状态,如正常,警告,报错, 成功
    • Icons 各种图标的具体定义
    • Corner radius 圆角
    • Overlays 遮罩层 (这个也与皮肤有关)

    jquery ui官网有下面这样一个工具,我们可以一下把其中的变量扒出来

    http://hi.baidu.com/ivugogo/item/605795f7a5c27a1ea62988e4
  • 相关阅读:
    PHP之项目环境变量设置
    nginx相关服务实践
    模拟器的基本使用
    Redis常见问题汇总
    用OpenResty搭建高性能服务端
    Lua代码规范
    Lua之基础篇
    如何设计一个高性能短链系统?
    通过双 key 来解决缓存并发问题
    Golang常见问题汇总
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3820995.html
Copyright © 2020-2023  润新知