jquery.ui.all.css

1.所有主题必须的文件都包含在这个文件中。它由ui.base.css和ui.them.css两个文件中拉入的@import执行构成。

jquery.ui.base.css

1.这个文件被ui.all.css文件引用。它依然由ui.core.css文件中拉入的@import指令构成,像每个控件一样。但是,它不包含控制每个控件显示的主题样式。

jquery.ui.core.css

1.这个文件提供CSS框架的核心样式,诸如clear-fix helper和generic overlay,被所有的组件引用。包含以下样式:

.ui-helper-hidden 使用 display:none 隐藏元素
.ui.helper-hidden-accessible 将元素的位置设置到屏幕之外,使其看不见
.ui-helper-reset 清除一些基本的样式,如padding 等被浏览器应用于公共元素的公共默认style
.ui-helper-clearfix:after 这个calsses提供一种自动清理浮动的跨浏览器解决方案。每当一个元素浮动了,.ui-helper-clearfix class就被加在浮动元素的容器上。当父容器自动清除浮动后,ui.helper-clearfix:after styles被 添加。
.ui-helper-clearfix 被用在容器自身,适用于浮动包裹父元素的属性。
.ui-helper-zfix 提供规则,适用于修复iframe元素覆盖的问题。
.ui-state-disabled 应用于那些被禁用的用户界面元素
.ui-icon 用于设置ui.theme.css文件中的背景图片。
.ui-widget-overlay 设置页面上覆盖层出现时的基本样式,
   
   

jquery.ui.theme.css

1.这个文件包含完整的可视化主题和所有 库中被装扮起来的可视化元素的触发器。

2.被框架大量使用的style sheet和包含大量classes

容器 为widget,heading,content容器设置style属性
交互状态 这个classes为任何可以点击的元素,设置默认,鼠标位于上方(hover),活动时的状态
交互提示 这个类别为元素应用高亮,错误,禁用,主要的(primary),次要(secondary)样式的可视化提示
状态图片 这个classes为content,heading容器的图标设置图片。像任何可以点击的元素,包括默认,鼠标位于上方,活动,高亮,focus,错误的状态。
图片位置 主题使用的所有图标的图片,都存储在同一个文件中,通过background-position属性单独显示个体。这个类别为所有图标个体设置background-position属性。
圆角半径 CSS3
遮罩层 这个图片定义在core.css文件中,用在一般的遮罩层上。这个类产生一个半透明的遮罩层盖在指定的元素上。

容器

</html>

外层容器使用 ui-widget 样式。

里层有两个容器,一个 ui-widget-heading ,一个 ui-widget-content 。并通过 ui-corner-top 和ui-corner-bottom 设置各自的圆角属性。

交互

</html>

我们定义了两个可以点击的元素,他们都有 ui-state-default 样式,第一个还有ui-state-active样式。

当鼠标放在 div 的 a 上时,该 div 应用 ui-state-hover ,反之 移除。

图标

</div>

交互提示

</html>

位置功能

1.位置功能是一个强大的单独的功能,用来设置任何元素相对于窗口,文件,指定的元素或鼠标的位置。它是组件库中独一无二的,不需要jquery.ui.core.js或者jquery.effects.core.js文件支持的。我们可以通过一系列的配置选项来使用它。

Option Format Used to..
at string 指定元素被放置冲突时的边缘,比如 left bottom
collision(冲突) string 当被移动的元素溢出它的容器,将其移动到另一个供选择的位置。
my sting 预计在位置冲突的时候,指定用于对齐的边缘。比如 right top
of selector,jQuery,object,event object 指定位置冲突时,被放置的元素。
offset string 移动被放置的元素到指定像素。例如,10,20 x,y
using function 接收一个函数,查看被放置元素的实际位置。这个函数接收一个包含top和left值新位置的对象

2.使用位置功能

</html>

此处样式一定要定义在元素之前,不然显示不正常。这样设置后,两个元素的右下角相交。

2.避免冲突

})

设置一个元素的右边缘与另一个元素的左边缘对齐。此时两个元素相弹(flip),不会重合。

});

当添加 collision:”fit” 选项时,两个元素内相交。

3.使用函数

});

此时pos为positioned的左定点。

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能的更多相关文章

  1. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  2. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

    Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

    默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...

  4. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

  5. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

    之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...

  6. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件

    像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为  j ...

  7. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.8.Datepicker控件

    默认datepicker的安装启用 探索它的配置选项 安装启用一个触发按钮 配置一个供选择的动画 dateFormat选项 简单的国际化 多月datepicker 日期范围选择 datepicker的 ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.9.Progressbar控件

    Progressbar控件用来显示任意进程的完成百分比. 默认安装启用 配置选项 控件暴露的事件API progressbar暴露的独一无二的方法 一些现实生活的例子 当前版本中,我们或系统必须明确进 ...

随机推荐

  1. .net泛型理解

    泛型简介: 泛型(Generic Type)是.NET Framework2.0最强大的功能之一.泛型的主要思想是将算法与数据结构完全分离开,使得一次定义的算法能作用于多种数据结构,从而实现高度可重用 ...

  2. SQLServer找出执行慢的SQL语句

      SELECT (total_elapsed_time / execution_count)/1000 N'平均时间ms' ,total_elapsed_time/1000 N'总花费时间ms' , ...

  3. IntelliJ IDEA 的 Java 热部署插件 JRebel 安装及使用

    JRebel 介绍 JRebel for Intellij JRebel 在 Java Web 开发中, 一般更新了 Java 文件后要手动重启 Tomcat 服务器, 才能生效,  自从有了 JRe ...

  4. RouterOS软路由常用命令

    修改用户密码 [admin@MikroTik]>/user                               #进入操作路径 [admin@MikroTik]/user>prin ...

  5. python enumerate

    >>> a = [1, 2, 3] >>> for index, item in enumerate(a): print index, item 0 1 1 2 2 ...

  6. 用于sql server启动的账户

    用于启动和运行 SQL Server 的启动帐户可以是域用户帐户.本地用户帐户.托管服务帐户.虚拟帐户或内置系统帐户. 若要启动和运行 SQL Server 中的每项服务,这些服务都必须有一个在安装过 ...

  7. j2ee ehcache

    Ehcache is an open source, standards-based cache that boosts performance, offloads your database, an ...

  8. Leetcode: Perfect Rectangle

    Given N axis-aligned rectangles where N > 0, determine if they all together form an exact cover o ...

  9. qsort函数用法

    qsort函数用法   qsort 功 能: 使用快速排序例程进行排序 用 法: void qsort(void *base, int nelem, int width, int (*fcmp)(co ...

  10. em和rem及rem在移动的应用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style t ...