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文件中,用在一般的遮罩层上。这个类产生一个半透明的遮罩层盖在指定的元素上。 |
容器
1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="utf-8" > 5 < title > CSS Framework - Containers 6 </ title > 7 < link rel ="stylesheet" 8 href ="development-bundle/themes/base/jquery.ui.all.css" > 9 </ head > 10 < body > 11 < div class ="ui-widget" > 12 < div class ="ui-widget-header ui-corner-top" > 13 < h2 > This is a .ui-widget-header container </ h2 > 14 </ div > 15 < div class ="ui-widget-content ui-corner-bottom" > 16 < p > This is a .ui-widget-content container </ p > 17 </ div > 18 </ div > 19 </ body > 20 </ html > 外层容器使用 ui-widget 样式。
里层有两个容器,一个 ui-widget-heading ,一个 ui-widget-content 。并通过 ui-corner-top 和ui-corner-bottom 设置各自的圆角属性。
交互
1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="utf-8" > 5 < title > CSS Framework - Interaction states 6 </ title > 7 < link rel ="stylesheet" 8 href ="development-bundle/themes/base/jquery.ui.all.css" > 9 < script src ="development-bundle/jquery-1.4.4.js" > 10 </ script > 11 < script > 12 ( function ($) { 13 $( " .ui-widget a " ).hover( function () { 14 $( this ).parent().addClass( " ui-state-hover " ); 15 }, function () { 16 $( this ).parent().removeClass( " ui-state-hover " ); 17 }); 18 })(jQuery); 19 </ script > 20 </ head > 21 < body > 22 < div class ="ui-widget" > 23 < div 24 class ="ui-state-default ui-state-active ui-corner-all" > 25 < a href ="#" > I am clickable and selected </ a > 26 </ div > 27 < div class ="ui-state-default ui-corner-all" > 28 < a href ="#" > I am clickable but not selected 29 </ a > 30 </ div > 31 </ div > 32 </ body > 33 </ html > 我们定义了两个可以点击的元素,他们都有 ui-state-default 样式,第一个还有ui-state-active样式。
当鼠标放在 div 的 a 上时,该 div 应用 ui-state-hover ,反之 移除。
图标
1 < div class ="ui-widget" > 2 < div class ="ui-state-default ui-state-active ui-corner-all" > 3 < div class ="ui-icon ui-icon-circle-plus" > 4 </ div > 5 < a href ="#" > I am clickable and selected </ a > 6 </ div > 7 < div class ="ui-state-default ui-corner-all" > 8 < div class ="ui-icon ui-icon-circle-plus" > 9 </ div > 10 < a href ="#" > I am clickable but not selected 11 </ a > 12 </ div > 13 </ div > 交互提示
1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="utf-8" > 5 < title > CSS Framework - Interaction cues </ title > 6 < link rel ="stylesheet" 7 href ="development-bundle/themes/base/jquery.ui.all.css" > 8 < link rel ="stylesheet" href ="css/jquery.ui.form.css" > 9 </ head > 10 < body > 11 < div class ="ui-widget ui-form" > 12 < div class ="ui-widget-header ui-corner-all" > 13 < h2 > Login Form </ h2 > 14 </ div > 15 < div class ="ui-widget-content ui-corner-all" > 16 < form action ="#" class ="ui-helper-clearfix" > 17 < label > Username </ label > 18 < div class ="ui-state-error ui-corner-all" > 19 < input type ="text" > 20 < div class ="ui-icon ui-icon-alert" ></ div > 21 < p class ="ui-helper-reset ui-state-error-text" > 22 Required field 23 </ p > 24 </ div > 25 </ form > 26 </ div > 27 </ div > 28 < style > 29 .ui-form .ui-widget-content { padding : 20px ; } 30 .ui-form label, .ui-form input, .ui-form .ui-state-error, 31 .ui-form .ui-icon, .ui-form .ui-state-error p { float : left ; } 32 .ui-form label, .ui-state-error p { 33 font-size : 12px ; padding : 10px 10px 0 0 ; 34 } 35 .ui-form .ui-state-error { padding : 4px ; } 36 .ui-form .ui-state-error p { 37 font-weight : bold ; padding-top : 5px ; 38 } 39 .ui-form .ui-state-error .ui-icon { margin : 5px 3px 0 4px ; } 40 </ style > 41 </ body > 42 </ 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.使用位置功能
1 <! DOCTYPE HTML > 2 < html > 3 < head > 4 < meta charset ="utf-8" > 5 < title > Position Utility - position </ title > 6 </ head > 7 < body > 8 < style > 9 .ui-positioning-element { width : 200px ; height : 200px ; border : 1px solid #000 ; } 10 .ui-positioned-element { width : 100px ; height : 100px ; border : 1px solid #ff0000 ; } 11 </ style > 12 < div class ="ui-positioning-element" > I am being positioned against </ div > 13 < div class ="ui-positioned-element" > I am being positioned </ div > 14 < script src ="development-bundle/jquery-1.4.4.js" ></ script > 15 < script src ="development-bundle/ui/jquery.ui.position.js" ></ script > 16 < script > 17 ( function ($) { 18 19 $( " .ui-positioned-element " ).position({ 20 of: " .ui-positioning-element " , 21 my: " right " , 22 at: " left " 23 }); 24 25 })(jQuery); 26 </ script > 27 28 </ body > 29 </ html > 此处样式一定要定义在元素之前,不然显示不正常。这样设置后,两个元素的右下角相交。
2.避免冲突
1 $(".ui-positioned-element").position({ 2 of: ".ui-positioning-element", 3 my: "right", 4 at: "left" 5 }) 设置一个元素的右边缘与另一个元素的左边缘对齐。此时两个元素相弹(flip),不会重合。
1 $(".ui-positioned-element").position({ 2 collision: "fit", 3 of: ".ui-positioning-element", 4 my: "right", 5 at: "left", 6 }); 当添加 collision:”fit” 选项时,两个元素内相交。
3.使用函数
1 $(".ui-positioned-element").position({ 2 of: ".ui-positioning-element", 3 my: "right bottom", 4 at: "right bottom", 5 using: function(pos) { 6 $(this).css({ 7 backgroundColor: "#fc7676", 8 top: pos.top, 9 left: pos.left 10 }); 11 } 12 }); 此时pos为positioned的左定点。