SHARE
TWEET

Untitled

a guest Feb 21st, 2019 46 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.   <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.     <script type='text/javascript' src='jquery-1.7.2.min.js'></script>
  5.     <script type='text/javascript' src='folder.js'></script>
  6.     <link rel='stylesheet' type='text/css' href='style.css'></link>
  7.     <title>Folder Example</title>
  8.   </head>
  9. </html>
  10.    
  11. div.folder-header
  12. {
  13.   background-color:#f0f0f0;
  14.   border-color:#e0e0e0;
  15.   border-width:1px;
  16.   cursor:pointer;
  17. }
  18.  
  19. div.folder-body
  20. {
  21.   background-color:#f8f8f8;
  22.   border-color:#e0e0e0;
  23.   border-width:1px;
  24. }
  25.  
  26. div.link-viewport
  27. {
  28.   position:relative;
  29. }
  30.  
  31. img.link-image
  32. {
  33.   position:absolute;
  34.   display:block;
  35.   border:none;
  36. }
  37.    
  38. $(document).ready(function()
  39. {
  40.     var border = true;
  41.  
  42.     var folder = function(title, src)
  43.     {
  44.         var section = $('<div>').appendTo('body');
  45.         var header = $('<div>').addClass('folder-header').text(title).appendTo(section);
  46.         var folder = $('<div>').addClass('folder-body').appendTo(section);
  47.         var viewport = $('<div>').addClass('link-viewport').css('width', 64).css('height', 64).appendTo(folder);
  48.         var image = $('<img>').addClass('link-image').attr('src', src).appendTo(viewport);
  49.  
  50.         header.css('border-style', border ? 'solid' : 'none');
  51.         folder.css('border-style', border ? 'solid' : 'none');
  52.  
  53.         header.click(function()
  54.         {
  55.             folder.toggle();
  56.         });
  57.     };
  58.  
  59.     folder("Red", "red.png");
  60.     folder("Green", "green.png");
  61.     folder("Blue", "blue.png");
  62. });
  63.    
  64. if (folder.height()) {
  65.     folder.hide();
  66.     folder.height(0); }
  67. else {
  68.     folder.show();
  69.     folder.height(64);
  70. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top