Framework7 - Icônes, couleurs et images personnalisées

La description

Vous pouvez définir une icône, une couleur ou une image personnalisée sur la sélection intelligente en utilisant respectivement les attributs data-option-icon , data-option-color et data-option-image .

Exemple

L'exemple suivant montre l'utilisation de la sélection intelligente dans les icônes, couleurs et images personnalisées dans 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>Custom icons, colors and images</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 = "navbar">
               <div class = "navbar-inner">
                  <div class = "left"> </div>
                  <div class = "center sliding">Smart Select Custom Icons, Colors and Images</div>
                  <div class = "right"> </div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "home" class = "page">
                  <div class = "page-content">
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" class = "item-link smart-select">
                              
                                 <select name = "countries">
                                    <option value = "India" selected data-option-image = "images/ind.gif">India</option>
                                    <option value = "Newz = Zealnad" data-option-image = "images/arg.gif">Argentina</option>
                                    <option value = "Srilanka" data-option-color = "red" data-option-image = "images/bgm.gif">Belgium</option>
                                 </select>
                                 
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Countries</div>
                                    </div>
                                 </div>
                              </a>
                           </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>
         // here initialize the app
         var myApp = new Framework7 ({
            animateNavBackIcon:true
         });

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         
            // enable the dynamic navbar for this view
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code HTML ci-dessus sous smart_select_icons_colors_images.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML comme http: //localhost/smart_select_icons_colors_images.html et la sortie s'affiche comme indiqué ci-dessous.

  • La sortie montre l'utilisation d'icône d'option de données, de couleur d'option de données et d'image d'option de données pour définir l'icône, la couleur ou l'image personnalisée pour la sélection intelligente.

  • Lorsque vous cliquez sur l'option nommée en tant que pays, une liste de différents pays s'affiche avec une icône, une couleur ou une image qui vous permet de sélectionner une option.