Framework7 Dependent Values

by Online Tutorials Library July 14, 2022

Framework7 Dependent Values

It specifies that values are dependent on each other for specified elements.

Example

Let’s take an example to display the dependent values of a particular element in 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>Dependent values</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>          <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”>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>                                     </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();                   // 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,                 },              ]           });        </script>     </body>    </html>  

Test it Now

Next TopicFramework7 Inline Picker Date-time

Framework7 Dependent Values

Framework7 Dependent Values

Example

Income tax calculating formula in Excel

Framework7 Inline Tabs

You may also like