实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/1.4.2/css/framework7.ios.min.css">
    <link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/1.4.2/css/framework7.ios.colors.min.css">
    
  </head>
  <body>
    <div class="views">
      <div class="view view-main">
        <div class="pages">
          <div data-page="home" class="page navbar-fixed">
            <div class="navbar">
              <div class="navbar-inner">
                <div class="left"></div>
                <div class="center">Picker</div>
                <div class="right"></div>
              </div>
            </div>
            <div class="page-content">
              <div class="content-block-title">Picker with single value</div>
              <div class="list-block">
                <ul>
                  <li>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-input">
                          <input type="text" placeholder="Your iOS device" readonly id="picker-device">
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="content-block-title">2 values and 3d-rotate effect</div>
              <div class="list-block">
                <ul>
                  <li>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-input">
                          <input type="text" placeholder="Describe yourself" readonly id="picker-describe">
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="content-block-title">Dependent values</div>
              <div class="list-block">
                <ul>
                  <li>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-input">
                          <input type="text" placeholder="Your car" readonly id="picker-dependent">
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="content-block-title">Custom toolbar</div>
              <div class="list-block">
                <ul>
                  <li>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-input">
                          <input type="text" placeholder="Describe yourself" readonly id="picker-custom-toolbar">
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="content-block-title">Inline Picker / Date-time</div>
              <div class="content-block">
                <div style="padding:0; margin-right:-15px; width:auto" class="content-block-inner">
                  <div style="margin:0" class="list-block">
                    <ul style="border-top:none">
                      <li>
                        <div class="item-content">
                          <div class="item-inner">
                            <div class="item-input">
                              <input type="text" placeholder="Date Time" readonly id="picker-date">
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div id="picker-date-container"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="//ku.shouce.ren/libs/fk7/1.4.2/js/framework7.min.js"></script>
    <style>
      #picker-date-container .picker-item {
        color: #999;
      }
      #picker-date-container .picker-selected {
        color: #000;
      }
      @media (max-width: 767px) {
        #picker-date-container .picker-items {
          font-size: 21px;
        }
        #picker-date-container .picker-item {
          height: 36px;
          line-height: 36px;
          padding: 0 6px;
        }
      }
    </style>
    <script>
      var myApp = new Framework7();
      
      var pickerDevice = myApp.picker({
          input: '#picker-device',
          cols: [
              {
                  textAlign: 'center',
                  values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
              }
          ]
      });
      
      var pickerDescribe = myApp.picker({
          input: '#picker-describe',
          rotateEffect: true,
          cols: [
              {
                  textAlign: 'left',
                  values: ('Super Lex Amazing Bat Iron Rocket Lex Cool Beautiful Wonderful Raining Happy Amazing Funny Cool Hot').split(' ')
              },
              {
                  values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' ')
              },
          ]
      });
      
      // Dependent values
      var carVendors = {
          Japanese : ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
          German : ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
          American : ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
      };
      var pickerDependent = myApp.picker({
          input: '#picker-dependent',
          rotateEffect: true,
          formatValue: function (picker, values) {
              return values[1];
          },
          cols: [
              {
                  textAlign: 'left',
                  values: ['Japanese', 'German', 'American'],
                  onChange: function (picker, country) {
                      if(picker.cols[1].replaceValues){
                          picker.cols[1].replaceValues(carVendors[country]);
                      }
                  }
              },
              {
                  values: carVendors.Japanese,
                  width: 160,
              },
          ]
      });
      
      // Custom Toolbar
      var pickerCustomToolbar = myApp.picker({
          input: '#picker-custom-toolbar',
          rotateEffect: true,
          toolbarTemplate: 
              '<div class="toolbar">' +
                  '<div class="toolbar-inner">' +
                      '<div class="left">' +
                          '<a href="#" class="link toolbar-randomize-link">Randomize</a>' +
                      '</div>' +
                      '<div class="right">' +
                          '<a href="#" class="link close-picker">That\'s me</a>' +
                      '</div>' +
                  '</div>' +
              '</div>',
          cols: [
              {
                  values: ['Mr', 'Ms'],
              },
              {
                  textAlign: 'left',
                  values: ('Super Lex Amazing Bat Iron Rocket Lex Cool Beautiful Wonderful Raining Happy Amazing Funny Cool Hot').split(' ')
              },
              {
                  values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' ')
              },
          ],
          onOpen: function (picker) {
              picker.container.find('.toolbar-randomize-link').on('click', function () {
                  var col0Values = picker.cols[0].values;
                  var col0Random = col0Values[Math.floor(Math.random() * col0Values.length)];
                  
                  var col1Values = picker.cols[1].values;
                  var col1Random = col1Values[Math.floor(Math.random() * col1Values.length)];
                  
                  var col2Values = picker.cols[2].values;
                  var col2Random = col2Values[Math.floor(Math.random() * col2Values.length)];
                  
                  picker.setValue([col0Random, col1Random, col2Random]);
              });
          }
      });
      
      // Inline date-time
      var today = new Date();
      var pickerInline = myApp.picker({
          input: '#picker-date',
          container: '#picker-date-container',
          toolbar: false,
          rotateEffect: true,
          value: [today.getMonth(), today.getDate(), today.getFullYear(), today.getHours(), (today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes())],
          onChange: function (picker, values, displayValues) {
              var daysInMonth = new Date(picker.value[2], picker.value[0]*1 + 1, 0).getDate();
              if (values[1] > daysInMonth) {
                  picker.cols[1].setValue(daysInMonth);
              }
          },
          formatValue: function (p, values, displayValues) {
              return displayValues[0] + ' ' + values[1] + ', ' + values[2] + ' ' + values[3] + ':' + values[4];
          },
          cols: [
              // Months
              {
                  values: ('0 1 2 3 4 5 6 7 8 9 10 11').split(' '),
                  displayValues: ('January February March April May June July August September October November December').split(' '),
                  textAlign: 'left'
              },
              // Days
              {
                  values: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
              },
              // Years
              {
                  values: (function () {
                      var arr = [];
                      for (var i = 1950; i <= 2030; i++) { arr.push(i); }
                      return arr;
                  })(),
              },
              // Space divider
              {
                  divider: true,
                  content: '&nbsp;&nbsp;'
              },
              // Hours
              {
                  values: (function () {
                      var arr = [];
                      for (var i = 0; i <= 23; i++) { arr.push(i); }
                      return arr;
                  })(),
              },
              // Divider
              {
                  divider: true,
                  content: ':'
              },
              // Minutes
              {
                  values: (function () {
                      var arr = [];
                      for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
                      return arr;
                  })(),
              }
          ]
      });
    </script>
  </body>
</html>

AخA
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/1.4.2/css/framework7.ios.min.css">
    <link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/1.4.2/css/framework7.ios.colors.min.css">
    
  </head>
  <body>
    <div class="views">
      <div class="view view-main">
        <div class="pages">
          <div data-page="home" class="page navbar-fixed">
            <div class="navbar">
              <div class="navbar-inner">
                <div class="left"></div>
                <div class="center">Picker</div>
                <div class="right"></div>