[ Talk is Cheap Show me the CODE ] : jQuery Mobile

時間 2019-12-10

標籤 talk cheap code jquery mobile 欄目 JQuery 简体版

原文原文鏈接

[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具欄

Written In The Font

「 Wirte less Do more」

學習內容:css

頁眉工具欄和頁眉按鈕

頁眉是網頁身體的頭不同.下面咱們演示下在頁面工具欄中添加兩個鏈接,中間一個標題.工具

show the code:學習

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>測試</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    
</head>
<body>
    
    <div data-role="page" id="subone">
        <div data-role="header" data-position="inline">    
            <a href="#">返回</a>
            <h1> 主界面 </h1>
            <a href="#">更多</a>
        </div>
    </div>      
    
</body>
</html>

導航工具欄

導航工具欄是 jQuery Mobile 的小部件.像tab頁,像navbar同樣.下面演示下,音樂的一個網頁的案例:測試

show the code:ui

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jeff Li</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    
</head>
<body>
    
    <div data-role="page" id="subone">
        <div data-role="header" data-position="inline">    
            <a href="#">返回</a>
            <h1>音樂 </h1>
            <a href="#">更多</a>
            <div data-role="navbar" >
                <ul>
                    <li><a href="#">古典</a></li>
                    <li><a href="#">流行</a></li>
                    <li><a href="#">搖滾</a></li>
                </ul>
            </div>
        </div>
        
        <div data-role="content">  
            <h3>I am a single collapsible element </h3>
            <p>I am the content inside of the single collapsible element</p>
        </div>
    
      
    </div>      
</body>
</html>

頁腳工具欄

頁腳工具欄,下面實現按鈕並排顯示,兩端按鈕邊角變爲圓角:spa

(左圖不是圓角,右圖是圓角.代碼就是相差個div)

show the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jeff Li</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    
</head>
<body>
    
    <div data-role="page" id="subone">
        <div data-role="header" data-position="inline">    
            <a href="#">返回</a>
            <h1>音樂 </h1>
            <a href="#">更多</a>
            <div data-role="navbar" >
                <ul>
                    <li><a href="#">古典</a></li>
                    <li><a href="#">流行</a></li>
                    <li><a href="#">搖滾</a></li>
                </ul>
            </div>
        </div>
        
        <div data-role="content">  
            <h3>I am a single collapsible element </h3>
            <p>I am the content inside of the single collapsible element</p>
        </div>
    
        <div data-role="footer" class="ui-bar" data-position="fixed">
           <div data-role="controlgroup" data-type="horizontal">
                <a href="#" data-role="button">千千靜聽</a>
                <a href="#" data-role="button">QQ音樂</a>
                <a href="#" data-role="button">酷我音樂</a>
           </div>
        </div>  
    </div>      
</body>
</html>