Foundation - Interchange Use with HTML

Description

Interchange can also be used for html files. It can exchange the entire block of HTML, it gets loaded in all types of screen size.

Example

The following example demonstrates the use of interchange with HTML in Foundation −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
   </head>

   <body>
      <h2>Example of use with HTML</h2>
      <div data-interchange = "[https://www.tutorialspoint.com, (small)], 
         [https://www.tutorialspoint.com, (medium)], 
         [https://www.tutorialspoint.com, (large)]"></div>
      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </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 use_html.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_plugins.htm