/samples/javascript.html

https://github.com/viavansi/flaminwork · HTML · 115 lines · 84 code · 21 blank · 10 comment · 0 complexity · 5a536d3153f63833477442f5adaede0f MD5 · raw file 

    

  1. <!doctype html>
    2. 

  2. <!--[if lt IE 7]><html lang="en" class="ie ie6 ltie9 ltie8 ltie7"><![endif]-->
    3. 

  3. <!--[if IE 7]><html lang="en" class="ie ie7 ltie9 ltie8"><![endif]-->
    4. 

  4. <!--[if IE 8]><html lang="en" class="ie ie8 ltie9"><![endif]-->
    5. 

  5. <!--[if IE 9]><html lang="en" class="ie ie9"><![endif]-->
    6. 

  6. <!--[if gt IE 9]><html lang="en" class="ie"><![endif]-->
    7. 

  7. <!--[if !IE]><!-->
    8. 

  8. <html lang="en">
    9. 

  9. <!--<![endif]-->
    10. 

  10. <head>
    11. 

  11. 	<!--[if IE]><![endif]-->
    12. 

  12. 	<meta charset="utf-8" />
    13. 

  13. 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    14. 

  14. 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    15. 

  15. 	
    16. 

  16. 	<title>CSS Helpers - Flaminwork</title>
    17. 

  17. 	
    18. 

  18. 	<!-- Styles -->
    19. 

  19. 	<link href="../flaminwork.css" rel="stylesheet" />
    20. 

  20. 	<style>
    21. 

  21. 		#wrapper {
    22. 

  22. 			width: 960px;
    23. 

  23. 			margin: 1.5em auto;
    24. 

  24. 		}
    25. 

  25. 		
    26. 

  26. 		.box {
    27. 

  27. 			background: #eee;
    28. 

  28. 		}
    29. 

  29. 		
    30. 

  30. 		li.even {
    31. 

  31. 			background: #eee;
    32. 

  32. 		}
    33. 

  33. 			
    34. 

  34. 		li.odd {
    35. 

  35. 			background: #ccc;
    36. 

  36. 		}
    37. 

  37. 		
    38. 

  38. 		li.first {
    39. 

  39. 			background: purple;
    40. 

  40. 			color: #fff;
    41. 

  41. 		}
    42. 

  42. 		
    43. 

  43. 		li.last {
    44. 

  44. 			background: green;
    45. 

  45. 			color: #fff;
    46. 

  46. 		}
    47. 

  47. 			
    48. 

  48. 		li.hover {
    49. 

  49. 			background: red;
    50. 

  50. 			color: #fff;
    51. 

  51. 		}
    52. 

  52. 	</style>
    53. 

  53. 	
    54. 

  54. 	<!-- Scripts -->
    55. 

  55. 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
    56. 

  56. 	<script src="../flaminwork.js"></script>
    57. 

  57. 	<script>
    58. 

  58. 		jQuery(function() {
    59. 

  59. 			styleHelper.firstLast('ul', 'li');
    60. 

  60. 			styleHelper.evenOdd('ul', 'li');
    61. 

  61. 			styleHelper.addHover('li');
    62. 

  62. 			
    63. 

  63. 			expand.init();
    64. 

  64. 		});
    65. 

  65. 	</script>
    66. 

  66. </head>	
    67. 

  67. <body>
    68. 

  68. 	<div id="wrapper">
    69. 

  69. 		<h1>Javascript demo</h1>
    70. 

  70. 		
    71. 

  71. 		<h2>Style Helper</h2>
    72. 

  72. 		
    73. 

  73. 		<ul>
    74. 

  74. 			<li>This should have <code>class="first"</code> added by JS</li>
    75. 

  75. 			<li>Lorem</li>
    76. 

  76. 			<li>Ipsum</li>
    77. 

  77. 			<li>Dolor</li>
    78. 

  78. 			<li>Sit</li>
    79. 

  79. 			<li>Amet</li>
    80. 

  80. 			<li>Consectetum</li>
    81. 

  81. 			<li>This should have <code>class="last"</code> added by JS</li>
    82. 

  82. 		</ul>
    83. 

  83. 		
    84. 

  84. 		<h2>Expand blocks</h2>
    85. 

  85. 		
    86. 

  86. 		<div class="expand-wrapper">
    87. 

  87. 			<h3 class="expand-title">Click me!</h3>
    88. 

  88. 			
    89. 

  89. 			<div class="expand-body">
    90. 

  90. 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    91. 

  91. 			</div>
    92. 

  92. 		</div>
    93. 

  93. 		
    94. 

  94. 		<hr class="separator" />
    95. 

  95. 		
    96. 

  96. 		<div class="expand-wrapper">
    97. 

  97. 			<h3 class="expand-title">Click me!</h3>
    98. 

  98. 			
    99. 

  99. 			<div class="expand-body visible">
    100. 

  100. 				<p><strong>I will be visible by default!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    101. 

  101. 			</div>
    102. 

  102. 		</div>
    103. 

  103. 		
    104. 

  104. 		<hr class="separator" />
    105. 

  105. 		
    106. 

  106. 		<div class="expand-wrapper">
    107. 

  107. 			<h3 class="expand-title">Click me!</h3>
    108. 

  108. 			
    109. 

  109. 			<div class="expand-body fade">
    110. 

  110. 				<p><strong>I will have a fade effect!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    111. 

  111. 			</div>
    112. 

  112. 		</div>
    113. 

  113. 	</div><!-- #wrapper -->
    114. 

  114. </body>
    115. 

  115. </html>
    116.