1. 只需要引入 jquery-ui 的主css文件: jquery-ui.css 文件?? 不需要 引入 jquery-ui-structure/theme.css文件???

,,,,,

2. 一定要把 jquery-ui要用的 图标文件所在的文件夹 : images 放到跟jquery-ui.css 相平级的 目录 位置 处..

3. jquery-ui 中的图标, 使用的就是前端页面的 许多图标放在一个图片中, 根据位置 偏移 offset来 取图标的方法????

注意, 下面这个图是icon作为 "框架自动为 accordion的标题添加一个 span 元素 " 的 背景图片来使用的. 所以 有: background-position: xx xx额属性, 这个是背景图片的 偏移量.

基本上jqueryui的 框架中的 widget都是采用这样的思路: 当为某个wdget 调用 "组件" 方法时, 框架自动为 原始的 div自动 添加很多 预先设置好了类, 设置很多 背景图片. 从而达到widget的效果, 这个就为我们节省了大量的 css和js 工作....

jqueryui图标是作为 "额外添加的 span.ui-icon" 的背景图片的, 其 background-position 的偏移值都是反复 调试 设置好了的, 合理的, 不用再去修改了. 真的要 确实要修改的 划, 就是修改上面的 jquer-ui.css (1111行...附近)的background-position值 而已...

====================================== ===

要控制 jqueryui 的icons 相对于文字的 上下 左右的位置 , 就必须要了解 background 这个css 标签的设置: 参考文章: (这个讲的很好很透彻):http://www.opensoce.com/3745.html

  • 首先要掌握 background 的 内容组成: 由4个部分组成: background: #color颜色(1) url("路径"2) repeat重复属性值3 相对offset偏移值
  • repeat属性可以取4个值中的一个值: repeat, no-repeat, repeat-x, repeat-y
  • 相对offset偏移值: 是指"背景图片的 !左上角! 相对于 标签 容器 的 !左上角! 之间的 偏移量. 有水平偏移值和垂直偏移值组成.
  • offset偏移量可以由3种形式: 百分比50% 50%表示水平/垂直居中, 数值, 位置单词(left center right, top bottom)

==================================================== ============

## jquerui是如何来显示图标的?

还真的是采用的 集中图片 的技术: 

1. 首先把所有的图标 都放在一起,  形成一个文件. 然后根据主题... 提供了几种颜色的 图片, 比如: 比较黑的图片是: ui-icons_222222_256X240.png. 

2. 然后将几种 明暗 不同的 主题 要使用的 css 类 , 分别用前面的 背景图片: backgroud-image: url("..."); 

3. 但是, 这个时候, 显示的背景图片是 整个图片, 而我们需要显示的 只是其中  某一个 图标, 所以,你要设置 背景图片的 偏移. 

4. 怎么偏移呢? 由于默认的 最开始的 这个背景图片和 容器如 div hn等的 座上角都是重合的,  所以要显示 背景图片上的某一个 图标,  这个背景图片必须: 向上 + 向左 移动 . 通常移动的距离和位置 都是 8 16等像素的整数倍.... 最后, 这个也解释了 "为什么background-postion: 的值 总是为 负数!!! 

5, 最后, 也说明了: 为什么图标的 这个background-position的值是不能修改的, 因为如果一修改, 背景图片和 容器之间的 相对偏移就变了, 显示出来的就是别的 图标了....

jquery ui中的highlight 和 error 样式sylte ????

圆角边框如何实现的?

  • 既然是圆角 "边框" 所以使用的是 边框 border!: border-radius: 2px; 注意 不是 box-radius!

  • border-radius的顺序也是顺时针, 但是 跟其他属性的顺序是不同的: 其他的是 上 - 右 - 下 - 左的顺时针方向, 而这个border-radius

    是从 "左上角" "右上角" "右下角" "左下角" 等 四个顺时针方向.

  • border-radius的值 可以有1 到 4个: 1个表示全部相同; 2个表示左上=右下=第一个数值,... 3个 表示左上第一个, 右上和左下使用第二2个数值, 右下角 使用第三个数字...

---=-============================================== ==

如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?的更多相关文章

  1. Jquery ui widget开发

    Jquery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget.在jquery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等), ...

  2. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  3. jQuery UI dialog

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...

  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】.学习笔记.1.CSS框架和其他功能

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

  8. jQuery UI 实例 - 对话框(Dialog)(zhuan)

    http://www.runoob.com/jqueryui/example-dialog.html ************************************************* ...

  9. Jquery UI 组合树 - ComboTree 集成Wabacus4.1 代码剖析

    Jquery UI 1.3 (组合树 - ComboTree ) 集成Wabacus4.1 集成Spring 代码剖析 使用时,请下载需要Jquery ui包进行配置 combotree.js 的代码 ...

随机推荐

  1. BZOJ1024 [SCOI2009]生日快乐

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  2. SPOJ GSS4 Can you answer these queries IV

    Time Limit: 500MS   Memory Limit: 1572864KB   64bit IO Format: %lld & %llu Description You are g ...

  3. maven 的 scope的含义

    依赖范围控制哪些依赖在哪些classpath 中可用,哪些依赖包含在一个应用中.让我们详细看一下每一种范围: compile (编译范围) compile是默认的范围:如果没有提供一个范围,那该依赖的 ...

  4. selenium 基本的键盘方法

    今晚不想加班,于是赶紧回来看看书: 1.下了selenium的小工具:FireBug/FirePath. 2.确定了看书顺序,我觉得难度低点开始比较好,所以我还是先看基于Python的selenium ...

  5. 数据结构与算法分析 - 最大公约数(gcd & extended_gcd)

    以下内容均节选自<算法导论>第31章 最大公约数 定义:若:\[\begin{array}{l}a = p_1^{e_1}p_2^{e_2} \ldots p_r^{e_r}\\b = p ...

  6. Android 使用 DownloadManager 管理系统下载任务的方法,android管理系统

    从Android 2.3(API level 9)开始Android用系统服务(Service)的方式提供了Download Manager来优化处理长时间的下载操作.Download Manager ...

  7. ecshop 批量生成订单信息

    <?php /** * ecshop 给商品添加随机添加订单信息 * @author Abner * qq :346882795 * email: Abner3721@163.com * * * ...

  8. js004-变量、作用域和内存问题

    js004-变量.作用域和内存问题 4.1 基本类型和引用类型的值 基本类型:简单的数据段 引用类型:可能由多个值构成的对象 五种基本数据类型:undefined.null.boolean.Numbe ...

  9. MSDeploy 同步时不删除原有文件

    在 jenkins里  Execute Windows batch command "C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\m ...

  10. JQuery------动态添加的元素on方法不起作用解决方法

    转载: http://www.jb51.net/article/70342.htm