Framework7 - With Media List View



Description

It is possible to use both checkboxes and radios groups with media list view.

Example

The following example demonstrates the use of checkbox and radios with media list −

<!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>Checkboxes group</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">Checkboxes and Radios</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Select Your Message</div>
                     <div class = "list-block media-list">
                        <ul>
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "my-checkbox" value = "1">
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                 
                                    <div class = "item-title-row">
                                       <div class = "item-title">Amayon</div>
                                       <div class = "item-after">7:10</div>
                                    </div>
                                    
                                    <div class = "item-subtitle">Your order has been shipped</div>
                                    <div class = "item-text">Lorem ipsum dolor sit amet, consectetur 
                                       adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim 
                                       lacus tincidunt.</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "my-checkbox" value = "2">
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                 
                                    <div class = "item-title-row">
                                       <div class = "item-title">VodafoneZone</div>
                                       <div class = "item-after">10:15</div>
                                    </div>
                                    
                                    <div class = "item-subtitle">Bill Payments</div>
                                    <div class = "item-text">Lorem ipsum dolor sit amet, consectetur 
                                       adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim 
                                       lacus tincidunt.</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "my-checkbox" value = "3">
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                 
                                    <div class = "item-title-row">
                                       <div class = "item-title">Popular in your network</div>
                                       <div class = "item-after">19:14</div>
                                    </div>
                                    
                                    <div class = "item-subtitle">New messages from John Doe</div>
                                    <div class = "item-text">Lorem ipsum dolor sit amet, consectetur 
                                       adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim 
                                       lacus tincidunt.</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-checkbox item-content">
                                 <input type = "checkbox" name = "my-checkbox" value = "4">
                                 <div class = "item-media"><i class = "icon icon-form-checkbox"></i></div>
                                 <div class = "item-inner">
                                 
                                    <div class = "item-title-row">
                                       <div class = "item-title">Adam WillSmith</div>
                                       <div class = "item-after">22:44</div>
                                    </div>
                                    
                                    <div class = "item-subtitle">Car Insurance renewal</div>
                                    <div class = "item-text">Lorem ipsum dolor sit amet, consectetur 
                                       adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim 
                                       lacus tincidunt.</div>
                                 </div>
                              </label>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Which is your favourite Magazine?</div>
                     <div class = "list-block media-list">
                        <ul>
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "my-radio" value = "1" checked>
                                 <div class = "item-media"><img src = "/framework7/images/pic3.jpg" width = "80"></div>
                                 <div class = "item-inner">
                                 
                                    <div class = "item-title-row">
                                       <div class = "item-title">Tarangi</div>
                                       <div class = "item-after">$10</div>
                                    </div>
                                    
                                    <div class = "item-subtitle">Monthly</div>
                                    <div class = "item-text">Lorem ipsum dolor sit amet, consectetur 
                                       adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim 
                                       lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, 
                                       pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec 
                                       dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "my-radio" value = "2">
                                 <div class = "item-media"><img src = "/framework7/images/pic2.jpg" width = "80"></div>
                                 <div class = "item-inner">
                                 
                                    <div class = "item-title-row">
                                       <div class = "item-title">Business Today</div>
                                       <div class = "item-after">$20</div>
                                    </div>
                                    
                                    <div class = "item-subtitle">Monthly</div>
                                    <div class = "item-text">Lorem ipsum dolor sit amet, consectetur 
                                       adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim 
                                       lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, 
                                       pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec 
                                       dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "my-radio" value = "3">
                                 <div class = "item-media"><img src = "/framework7/images/pic.jpg" width = "80"></div>
                                 <div class = "item-inner">
                                 
                                    <div class = "item-title-row">
                                       <div class = "item-title">Frontier</div>
                                       <div class = "item-after">$15</div>
                                    </div>
                                    
                                    <div class = "item-subtitle">Weakly</div>
                                    <div class = "item-text">Lorem ipsum dolor sit amet, consectetur 
                                       adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim 
                                       lacus tincidunt. Cras dolor metus, ultrices  condimentum sodales sit amet, 
                                       pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec 
                                       dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
                                 </div>
                              </label>
                           </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>
         
      <script>
         var myApp = new Framework7();
      </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 forms_radio_with_media.html file in your server root folder.

  • Open this HTML file as http://localhost/forms_radio_with_media.html and the output is displayed as shown below.

  • The form layout shows the use of both checkboxes and the radio groups with media list view which allows you to select only on option from radio groups and check one or more options from checkboxes.

framework7_forms.htm
Advertisements