【初探移動前端開發04】jQuery Mobile 一

時間 2019-11-26

標籤初探移動前端開發04 jquery mobile 欄目 JQuery 简体版

原文原文鏈接

網格佈局

jquery mobile提供一種多列布局功能，因爲移動設備的屏幕大小緣由，通常狀況仍是不要使用多列布局啦。javascript

jquery mobile提供一種css樣式規則來定義多列布局，對應css爲ui-block，每列的樣式是經過定義前綴+「-a」等方式對網格的列進行佈局，a字母根據網格的列數而定。css

例如兩列布局CSS爲：ui-block-a與ui-block-bhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <input type="button" value="肯定" />
        </div>
        <div class="ui-block-b">
            <input type="button" value="取消" />
        </div>
    </div>
</body>
</html>

咱們看見了他這些都是使用float佈局的。java

兩列布局，須要指定外層div樣式是ui-grid-a，ui-grid-a樣式用於指定行列採用兩列布局樣式。jquery

以上兩個按鈕各佔屏幕的50%，採用data-line屬性對按鈕進行水平排列，按鈕寬度根據實際文本而定。ide

ui-grid-a 兩列
ui-grid-b 三列
ui-grid-c 四列
ui-grid-d 五列

咱們來看一個三列網格佈局：佈局

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div class="ui-grid-b">
        <div class="ui-block-a">
            <input type="button" value="肯定" />
        </div>
        <div class="ui-block-b">
            <input type="button" value="取消" />
        </div>
        <div class="ui-block-c">
            <input type="button" value="取消" />
        </div>
    </div>
</body>
</html>

摺疊功能

摺疊塊是移動端常常用到的效果，只要使用jquery mobile約定的編碼規則而且利用HTML5的dataset特性，程序就能生成摺疊快了。ui

其中data-role設置爲collapsible，即可以建立一個可摺疊的內容區，來個例子吧：編碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
  <div data-role="collapsible">
    <h3>可摺疊區域</h3>
    <p>刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵</p>
  </div>
</body>
</html>

咱們手機上的form表單其實都很漂亮了，可是咱們的jquery mobile仍是給他渲染了下下，是很是不錯的。url

咱們來一個例子看看：form表單

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <label for="name">
        姓名</label>
    <input type="text" name="name" id="name" />
    <label for="password">
        密碼</label>
    <input type="password" name="password" id="password" />
    <label for="content">
        密碼</label>
    <textarea name="content" id="content"></textarea>
    <label for="number">
        年齡</label>
    <input type="number" name="number" id="number" />
    <label for="tel">
        手機</label>
    <input type="tel" name="tel" id="tel" />
    <label for="tel">
        email</label>
    <input type="email" name="email" id="email" />
    <label for="tel">
        url</label>
    <input type="url" name="url" id="url" />
    <label for="search">
        搜索</label>
    <input type="search" name="search" id="search" />
</body>
</html>

我這裏噴一下《HTML5移動Web開發指南》這本書！
唐駿開寫的，這傢伙寫的這本書不行，書中不少例子有問題。

Toggle類型

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="fieldcontain">
        <label for="slider">
            打開開關：</label>
        <select name="slider" id="slider" data-role="slider">
            <option value="off">關閉</option>
            <option value="on">開啓</option>
        </select>
    </div>
</body>
</html>

單選按鈕類型

咱們要建立一組單選按鈕須要這樣作：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <fieldset data-role="controlgroup">
        <legend>請選擇你的年齡範圍：</legend>
        <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
        <label for="radio1">
            不限</label>
        <input type="radio" name="radio1" id="radio2" value="16-22" />
        <label for="radio2">
            16-22歲</label>
        <input type="radio" name="radio1" id="radio3" value="23-30" />
        <label for="radio3">
            23-30歲</label>
        <input type="radio" name="radio1" id="radio4" value="31-40" />
        <label for="radio4">
            31-40歲</label>
        <input type="radio" name="radio1" id="radio5" value="40" />
        <label for="radio5">
            40歲以上</label>
    </fieldset>
</body>
</html>

咱們看到，他仍是挺好看的哈。。。

咱們先是豎排，咱們設置一個橫排的單選按鈕看看：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>請選擇你的年齡範圍：</legend>
        <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
        <label for="radio1">
            不限</label>
        <input type="radio" name="radio1" id="radio2" value="16-22" />
        <label for="radio2">
            16-22歲</label>
        <input type="radio" name="radio1" id="radio3" value="23-30" />
        <label for="radio3">
            23-30歲</label>
    </fieldset>
</body>
</html>

複選框

單選完了咱們來看看複選框：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>愛好：</legend>
        <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />
        <label for="radio1">
            足球</label>
        <input type="checkbox" name="radio1" id="radio2" value="16-22" />
        <label for="radio2">
           籃球</label>
        <input type="checkbox" name="radio1" id="radio3" value="23-30" />
        <label for="radio3">
            編碼（危險）</label>
    </fieldset>
</body>
</html>

下拉菜單

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="controlgroup">
        <label class="select">
            請選擇興趣
            <select>
                <option>電影</option>
                <option>體育</option>
                <option>旅遊</option>
            </select>
        </label>

        <label class="select">
            請選擇興趣（多選）
            <select>
                <optgroup label="通常類">
                    <option>電影</option>
                    <option>體育</option>
                    <option>旅遊</option>
                </optgroup>
                <optgroup label="特殊類">
                    <option>C</option>
                    <option>C++</option>
                    <option>Java</option>
                </optgroup>
            </select>
        </label>
    </div>
</body>
</html>

咱們這裏作一點改變，樣式會發生變化：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
    <script id="jquery_182" type="text/javascript" class="library" 
    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    <script id="jquerymobile_120" type="text/javascript" class="library" 
    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="controlgroup">
      <label class="select">
            請選擇興趣
            <select data-native-menu="false">
                <option>電影</option>
                <option>體育</option>
                <option>旅遊</option>
            </select>
        </label>

        <label class="select">
            請選擇興趣
            <select>
                <option>電影</option>
                <option>體育</option>
                <option>旅遊</option>
            </select>
        </label>

        <label class="select">
            請選擇興趣（多選）
            <select>
                <optgroup label="通常類">
                    <option>電影</option>
                    <option>體育</option>
                    <option>旅遊</option>
                </optgroup>
                <optgroup label="特殊類">
                    <option>C</option>
                    <option>C++</option>
                    <option>Java</option>
                </optgroup>
            </select>
        </label>
    </div>
</body>
</html>