Framework7 - Selector con valor único

Descripción

Es un componente poderoso que le permite elegir cualquier valor de la lista.

Ejemplo

El siguiente ejemplo demuestra el uso de Picker con valor único en Framework7:

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código HTML proporcionado anteriormente como picker_with_single_value.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/picker_with_single_value.html y la salida se muestra como se muestra a continuación.
El ejemplo le permite elegir un valor único de la lista.

↰ Previous page