jQuery ui 1.7更新小結_jquery

來源:互聯網
上載者:User
1. 每個ui外掛程式現在都有自己單獨的css檔案,但是要根據情況與ui.theme.css ui.core.css結合使用,否則有些效果還是顯示不出來的。
eg. datepicker就必須同時引用上述兩個css檔案;accordion 只須引入ui.theme.css即可。這個我會把每個外掛程式獨立的demo放在我的資源裡邊的。
2. ui.accordion
HTML 程式碼要遵循一定的格式要求:
複製代碼 代碼如下:

<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>標籤
3. ui.dialog
注意兩點:
(1) 在ui -1.7.1 中添加了一個新的引用:jquery.bgiframe.js支援
作用:如果網頁上有浮動區塊和下拉選單重疊時,在IE6會看到下拉選框總是把浮動區塊覆蓋住,無論怎麼調整 z-index 都是沒用的,而用 bgiframe 就可以輕鬆解決這個問題。
具體參見: http://www.oschina.net/p/bgiframe
使用:
$.ui.dialog.defaults.bgiframe = true;
(2) 如果想實現dialog的拖動效果,必須添加ui.resizable.css 以及ui.resizable.js檔案
4. ui.tabs
這個相對ui-1.6 尤其需要注意:
(1) HTML代碼規範:
複製代碼 代碼如下:

<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>

注意: 每個tab相應的div必須放在tab生效的div內。
(2) 不再使用 $("#example > ul").tabs();
直接書寫為 $("#example").tabs();

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.