jQuery ui 1.7更新小結(jié)

更新時(shí)間：2009年08月15日 01:45:18 作者：

因?yàn)橐o新員工進(jìn)行培訓(xùn)jQuery.UI方面的內(nèi)容，我之前學(xué)習(xí)的都是jquery.ui-1.6b的，現(xiàn)在的版本升級(jí)到j(luò)query-ui-1.7.1，除了樣式上有很大調(diào)整以外，API也有了很大的變化。

1. 每個(gè)ui插件現(xiàn)在都有自己單獨(dú)的css文件，但是要根據(jù)情況與ui.theme.css ui.core.css結(jié)合使用，否則有些效果還是顯示不出來的。
eg. datepicker就必須同時(shí)引用上述兩個(gè)css文件；accordion 只須引入ui.theme.css即可。這個(gè)我會(huì)把每個(gè)插件獨(dú)立的demo放在我的資源里邊的。
2. ui.accordion
HTML 代碼要遵循一定的格式要求：

復(fù)制代碼代碼如下:

<ul id="example"> 
        <li> 
            <h3><a href="#" href="#">Test 1</a></h3> 
            <div><table height="100px"><tr><td>News</td></tr></table> 
            </div> 
        </li> 
        <li> 
            <h3><a href="#" href="#">Test 2</a></h3> 
            <div><table height="100px"><tr><td>Magazine</td></tr></table> 
            </div> 
        </li> 
        <li> 
            <h3><a href="#" href="#">Test 3</a></h3> 
            <div><table height="100px"><tr><td>Sport</td></tr></table> 
            </div> 
        </li> 
    </ul>

必須使用<h>標(biāo)簽
3. ui.dialog
注意兩點(diǎn)：
(1) 在ui -1.7.1 中添加了一個(gè)新的引用：jquery.bgiframe.js支持
作用：如果網(wǎng)頁上有浮動(dòng)區(qū)塊和下拉選單重疊時(shí)，在IE6會(huì)看到下拉選框總是把浮動(dòng)區(qū)塊覆蓋住，無論怎么調(diào)整 z-index 都是沒用的，而用 bgiframe 就可以輕松解決這個(gè)問題。
具體參見： http://www.oschina.net/p/bgiframe
使用：
$.ui.dialog.defaults.bgiframe = true;
(2) 如果想實(shí)現(xiàn)dialog的拖動(dòng)效果，必須添加ui.resizable.css 以及ui.resizable.js文件
4. ui.tabs
這個(gè)相對(duì)ui-1.6 尤其需要注意：
(1) HTML代碼規(guī)范：

復(fù)制代碼代碼如下:

 
<div id="example"> 
            <ul> 
                <li><a href="#tab-1" href="#tab-1"><span>One</span></a></li> 
                <li><a href="#tab-2" href="#tab-2"><span>two</span></a></li> 
                <li><a href="#tab-3" href="#tab-3"><span>three</span></a></li> 
            </ul> 
            <div id="tab-1"> 
                This is jQuery tab one. 
            </div> 
            <div id="tab-2"> 
                I'm tab two. 
            </div> 
            <div id="tab-3"> 
                Haha, three is here. 
            </div> 
            <div id="new-tab"> 
                This is add tab. 
            </div> 
        </div> 