【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能

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

posted @ 2013-08-13 10:58  Reinhard_Hsu  阅读(219)  评论(0)  编辑  收藏  举报