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. 宽字符,Ansic和Unicode

    电脑发展的初期,只是在美国等英文国家使用,英文只有26个字母和其它字符,一个字节最多可以表示256个字符,如字母"A"用0x41(二进制01000001)表示,字母"a& ...

  2. 【bzoj2654】 tree

    http://www.lydsy.com/JudgeOnline/problem.php?id=2654 (题目链接) 题意 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有nee ...

  3. bzoj3283: 运算器

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  4. Mac: Jdk版本切换

    通过命令’jdk6′, ‘jdk7′,’jdk8′轻松切换到对应的Java版本: 1.首先安装所有的JDk:* Mac自带了的JDK6,安装在目录:/System/Library/Java/JavaV ...

  5. PHP框架中的日志系统

    现在在一家公司做PHP后台开发程序猿(我们组没有前端,做活动时会做前端的东西),刚开始到公司的时候花2个周赶出了一个前端加后台的活动(记得当时做不出来周末加了两天班...),到现在过去4个多月了,可以 ...

  6. oracle--知识点汇总1

    同义词: -- e是scott.emp表的临时别名 select e.* from (select * from scott.emp) e; --创建私有同义词 create synonym myem ...

  7. Saltstack远程执行(四)

    Saltstack远程执行 语法例:salt '*' cmd.run 'w' -  命令:salt -  目标:'*' -  模块:cmd.run,自带150+模块,也可以自己写模块 -  返回:执行 ...

  8. 【原】js 签到用日历

    最近做的一个项目中,需要用到一个日历来记录你的签到,网上找了一些,感觉挺庞大的,所以就自己写了一个,记录一下自己写这个日历的经过 html代码: <table cellspacing=" ...

  9. Spring配置文件详解 – applicationContext.xml文件路径

    Spring配置文件详解 – applicationContext.xml文件路径 Java编程                 spring的配置文件applicationContext.xml的默 ...

  10. quartz_jobs.xml标准配置

    <?xml version="1.0" encoding="UTF-8"?><job-scheduling-data xmlns=" ...