這篇文章主要為大家展示了“jquery中mobile如何實現(xiàn)可折疊的導航按鈕”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“jquery中mobile如何實現(xiàn)可折疊的導航按鈕”這篇文章吧。
功能:
當功能較多時,創(chuàng)建可折疊分組導航按鈕。只需指定 data-role=" collapsible "創(chuàng)建可折疊面板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可折疊的導航面板</title> <!--使用名為viewport的meta值,其content指定自適應設備的寬度--> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h2>圖書查閱系統(tǒng)</h2> </div> <!--創(chuàng)建一個可折疊的導航面板--> <div data-role="content"> <div data-role="collapsible" data-theme="e"> <h5>文學歷史</h5> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >明代</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >宋代</a></li> </ul> </div> <!--顯示人文社科的可折疊面板--> <div data-role="collapsible" data-theme="b" data-collapsed="false"> <h5>人文社科</h5> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >財務</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >心理</a></li> </ul> </div> <!--顯示計算機應用的可折疊面板--> <div data-role="collapsible" data-theme="e"> <h5>計算機應用</h5> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >軟件開發(fā)</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >數(shù)據(jù)庫</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >移動開發(fā)</a></li> </ul> </div> </div> <div data-role="footer" data-position="fixed"> <h2>請單擊“+”按鈕進行展開</h2> </div> </div> </body> </html>
代碼分析:
通過data-role=" collapsible "創(chuàng)建可折疊的div,再在其中通過 data-role=" listview "創(chuàng)建列表框
data-theme : 指定預定義樣式 (也可以使用樣式構建器創(chuàng)建自定義樣式)
data-collapsed="false" : 表示默認不折疊
效果圖:
以上是“jquery中mobile如何實現(xiàn)可折疊的導航按鈕”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)網站建設公司行業(yè)資訊頻道!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站sd-ha.com,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
本文題目:jquery中mobile如何實現(xiàn)可折疊的導航按鈕-創(chuàng)新互聯(lián)
分享地址:http://sd-ha.com/article46/shjhg.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供品牌網站設計、網站收錄、用戶體驗、關鍵詞優(yōu)化、移動網站建設、靜態(tài)網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)