- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Dependent Values
Description
Values are dependent on each other for specified element.
Example
The following example displays 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>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as dependent_values.html file in your server root folder.
Open this HTML file as http://localhost/dependent_values.html and the output is displayed as shown below.
The example allows you to select dependent values for the specified element. When you rotate the element, you will get the dependent value of it.
framework7_picker.htm
Advertisements
To Continue Learning Please Login
Login with Google