jQuery mobile—theme、select

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习5</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

      <div data-role="page">
          <div data-role="header" data-theme="b"><h2>头部主题B</h2></div>
          <!--默认a主题,共有abc三个主题-->
          
          <div data-role="main">
              <div class="ui-field-contain">
                  <select name="selectName" id="selectId" data-iconpos="left">
                      <!--data-iconpos规定表单的位置   -->
                      <option value="1">啦啦啦</option>
                      <option value="2">狗贼</option>
                      <option value="3" disabled="disabled">针男</option>
                      <!--不能被选中-->
                      <option value="4">会长</option>
                  </select>
              </div>
              <!--表单创建-->
          </div>
          
          <div data-role="footer" data-theme="c"><h2>底部主题c</h2></div>
      </div>
</body>
</html>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/82118268