git.roojs.org Git - bootswatch/blob - api/example.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Bootswatch API Example</title>
   6         <style type="text/css">
   7                 .hidden { display: none; }
   8         </style>
   9 </head>
  10
  11 <body>
  12
  13         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  14         <script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
  15         <script type="text/javascript">
  16
  17         $(document).ready(function(){
  18
  19                 $.get("http://simplejsonp.nodester.com/thomaspark/bootswatch", function (data) {
  20
  21                                         var template_menu = "<div id='menu'><select>{{#.}}<option>{{name}}</option>{{/.}}</select></div>";
  22                                         var template_previews = "{{#.}}<div class='preview hidden' id='{{name}}'><h1>{{name}}: {{description}}</h1><p><a href='{{preview}}'><img src='{{thumbnail}}'></a></p></div>{{/.}}"
  23
  24                                         var output_menu = Mustache.render(template_menu, data.themes);
  25                                         var output_previews = Mustache.render(template_previews, data.themes);
  26
  27                                         $('body').append(output_menu + output_previews);
  28
  29                                         $('.preview').first().removeClass('hidden');
  30
  31                                         $('#menu').change(function(){
  32                                                 $('.preview').addClass('hidden');
  33                                                 var show = '#' + $('#menu :selected').text();
  34                                                 $(show).removeClass('hidden');
  35                                         });
  36
  37                         }, "json");
  38
  39         });
  40
  41         </script>
  42
  43 </body>
  44 </html>