Framework7-単一の値を持つピッカー

説明

これは、リストから任意の値を選択できる強力なコンポーネントです。

例

次の例は、Framework7で_Pickerを使用して単一の値を使用する方法を示しています-

<!DOCTYPE html>
<html>
   <head>
      <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>Picker with single value</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <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>
            </div>
         </div>
      </div>
   </div>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
   <style>.swiper-slide{background:#fff;box-sizing:border-box;border:1px solid #ccc;line-height:120px;text-align:center;}.swiper-slide span{font-size:17px;}.swiper-container{height:120px;margin:0px 0 35px;}</style>
   <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']
            }
         ]
      });
   </script>

</html>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを picker_with_single_valuel ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/picker_with_single_valuelとして開きます。出力は以下のように表示されます。
この例では、リストから単一の値を選択できます。

Framework7-picker-with-single-value

Framework7-単一の値を持つピッカー

説明

例

出力

目次