博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能
阅读量:5051 次
发布时间:2019-06-12

本文共 6695 字,大约阅读时间需要 22 分钟。

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的左定点。

转载于:https://www.cnblogs.com/msdynax/p/3254711.html

你可能感兴趣的文章
天气预报插件
查看>>
Unity 游戏框架搭建 (十三) 无需继承的单例的模板
查看>>
模块与包
查看>>
mysql忘记root密码
查看>>
apache服务器中设置目录不可访问
查看>>
嵌入式Linux驱动学习之路(十)字符设备驱动-my_led
查看>>
【NOIP模拟】密码
查看>>
java容器---------手工实现Linkedlist 链表
查看>>
three.js 性能优化的几种方法
查看>>
《梦断代码》读书笔记(三)
查看>>
FreeMarker解析json数据
查看>>
Java8 Lambda表达应用 -- 单线程游戏server+异步数据库操作
查看>>
次序+“选择不重复的记录”(3)——最大记录
查看>>
Codeforces 450 C. Jzzhu and Chocolate
查看>>
[Unity3D]Unity3D游戏开发MatchTarget的作用攀登效果实现
查看>>
ACdream 1115 Salmon And Cat (找规律&amp;&amp;打表)
查看>>
JSON、JSONP、Ajax的区别
查看>>
AngularJS学习篇(一)
查看>>
关于Xshell无法连接centos6.4的问题
查看>>
css3动画——基本准则
查看>>