/Jueves 23/jQuery/codelabs03.html

https://bitbucket.org/labscommunity/css3-jquery · HTML · 170 lines · 165 code · 5 blank · 0 comment · 0 complexity · 7866a9f17df0a78e991c007daf72bf96 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<title>CodeLabs</title>
    5. 

  5. 		<style type="text/css">
    6. 

  6. 		* {
    7. 

  7. 			margin: 0;
    8. 

  8. 			padding: 0;
    9. 

  9. 		}
    10. 

  10. 		li {
    11. 

  11. 			list-style: none;
    12. 

  12. 		}
    13. 

  13. 		.acordeon {
    14. 

  14. 			font-family: Arial;
    15. 

  15. 			width: 600px;
    16. 

  16. 			margin: 20px auto;
    17. 

  17. 			text-align: center;
    18. 

  18. 		}
    19. 

  19. 		.acordeon > li {
    20. 

  20. 			display: block;
    21. 

  21. 			position: relative;
    22. 

  22. 			text-transform: uppercase;
    23. 

  23. 			font-size: 15px;
    24. 

  24. 			padding: 10px 0;
    25. 

  25. 			color: red;
    26. 

  26. 			border-top: 1px dashed #999;
    27. 

  27. 			cursor: pointer;
    28. 

  28. 		}
    29. 

  29. 		.acordeon > li:first-child {
    30. 

  30. 			border-top: none;
    31. 

  31. 		}
    32. 

  32. 		.acordeon > li > span {
    33. 

  33. 			position: absolute;
    34. 

  34. 			top: 0;
    35. 

  35. 			left: 0;
    36. 

  36. 			width: 150px;
    37. 

  37. 			padding: 10px;
    38. 

  38. 			color: white;
    39. 

  39. 			background: #ff0000;
    40. 

  40. 			/*-webkit-border-radius: 5px;*/
    41. 

  41. 			border-radius: 5px;
    42. 

  42. 			z-index: 5;
    43. 

  43. 		}
    44. 

  44. 		.acordeon > p {
    45. 

  45. 			display: none;
    46. 

  46. 			color: #666;
    47. 

  47. 			font-size: 12px;
    48. 

  48. 			margin: 0 0 10px 0;
    49. 

  49. 			line-height: 15px;
    50. 

  50. 		}
    51. 

  51. 		</style>
    52. 

  52. 		<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
    53. 

  53. 	</head>
    54. 

  54. 	<body>
    55. 

  55. 		<ul class="acordeon">
    56. 

  56. 			<li>menu 01<span>Mi nombre es Ralph :3</span></li>
    57. 

  57. 			<p>
    58. 

  58. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    59. 

  59. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    60. 

  60. 			</p>
    61. 

  61. 			<li>menu 02<span>tooltip</span></li>
    62. 

  62. 			<p>
    63. 

  63. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    64. 

  64. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    65. 

  65. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    66. 

  66. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    67. 

  67. 			</p>
    68. 

  68. 			<li>menu 03<span>tooltip</span></li>
    69. 

  69. 			<p>
    70. 

  70. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    71. 

  71. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    72. 

  72. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    73. 

  73. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    74. 

  74. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    75. 

  75. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    76. 

  76. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    77. 

  77. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    78. 

  78. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    79. 

  79. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    80. 

  80. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    81. 

  81. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    82. 

  82. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    83. 

  83. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    84. 

  84. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    85. 

  85. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    86. 

  86. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    87. 

  87. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    88. 

  88. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    89. 

  89. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    90. 

  90. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    91. 

  91. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    92. 

  92. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    93. 

  93. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    94. 

  94. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    95. 

  95. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    96. 

  96. 			</p>
    97. 

  97. 			<li>menu 04<span>Algo me dice que ma&ntilde;ana me har&aacute;n bullying u.u</span></li>
    98. 

  98. 			<p>
    99. 

  99. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    100. 

  100. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    101. 

  101. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    102. 

  102. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    103. 

  103. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    104. 

  104. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    105. 

  105. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    106. 

  106. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    107. 

  107. 			</p>
    108. 

  108. 			<li>menu 05<span>Mam&aacute; estoy triunfando =D</span></li>
    109. 

  109. 			<p>
    110. 

  110. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    111. 

  111. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    112. 

  112. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    113. 

  113. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    114. 

  114. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    115. 

  115. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    116. 

  116. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    117. 

  117. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    118. 

  118. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    119. 

  119. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    120. 

  120. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    121. 

  121. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    122. 

  122. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    123. 

  123. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    124. 

  124. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    125. 

  125. 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    126. 

  126. 				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    127. 

  127. 			</p>
    128. 

  128. 		</ul>
    129. 

  129. 		<script type="text/javascript">
    130. 

  130. 		(function(){
    131. 

  131. 			//crear varialbes para mejorar el orden y la utilidad del código
    132. 

  132. 			var acordeon = $('ul.acordeon'),
    133. 

  133. 				li = acordeon.children('li'),
    134. 

  134. 				span = li.find('span').hide(),
    135. 

  135. 				twitterP = '@paulrrdiaz',
    136. 

  136. 				twitterC = '@LabsCommunity';
    137. 

  137. 

  138. 			console.log(twitterP);
    139. 

  139. 			console.log('Si tienen alguna duda sobre algun punto envia un tweet a: ' + twitterC);
    140. 

  140. 			li.hover(function() {
    141. 

  141. 				$(this).find('span').stop(true, true).fadeIn('slow');
    142. 

  142. 			}, function(){
    143. 

  143. 				$(this).find('span').stop(true, true).fadeOut('fast');
    144. 

  144. 			});
    145. 

  145. 

  146. 			li.click(function(){
    147. 

  147. 				$(this).next().slideDown().end().next().siblings('p').slideUp();
    148. 

  148. 				/*
    149. 

  149. 				$(this).next().slideDown();
    150. 

  150. 				$(this).next().siblings('p').slideUp();
    151. 

  151. 				
    152. 

    153. 

  153. 				console.log() nos ayudará a ver que errores tenemos en nuestro código, e ir dandonos una idea de lo que estamos haciendo.
    154. 

    155. 

  155. 				$('li').find('span') -> busca a todos los span dentro del elemento li
    156. 

  156. 				$('li').children('span') -> busca a todos los span hijos del elemento li
    157. 

  157. 				.hide() -> sirve para esconder el elemento
    158. 

  158. 				.slideDown() -> deslizamiento hacia abajo
    159. 

  159. 				.slideUp() -> deslizamiento hacia arriba
    160. 

  160. 				.siblings() -> sirve para seleccionar a todos los hermanos del elemento
    161. 

  161. 				.next() -> selecciona al elemento siguiente
    162. 

  162. 				.prev() -> selecciona al elemento anterior
    163. 

  163. 				.end() -> sirve para regresar al primer selector
    164. 

  164. 				.stop() -> sirve para detener la cola de efectos comom
    165. 

  165. 				*/
    166. 

  166. 			});
    167. 

  167. 		})();
    168. 

  168. 		</script>
    169. 

  169. 	</body>
    170. 

  170. </html>
    171.