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個數值, 右下角 使用第三個數字...
---=-============================================== ==
