Loading...
Helix SwarmHelix Swarm
Loading...

accordion.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • UI Layout/
  • accordion.html #1
  • View
  • Commits
  • Open Download .zip Download (8 KB) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 	<meta name="language" content="en" />
  7.  
  8. 	<title>Layout with Accordion</title>
  9.  
  10. 	<link rel="stylesheet" type="text/css" href="../lib/css/layout-default-latest.css" />
  11. 	<link rel="stylesheet" type="text/css" href="../lib/css/themes/base/jquery.ui.all.css" />
  12. 	<!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
  13. 	<style type="text/css">
  14.  
  15. 	/* remove padding and scrolling from elements that contain an Accordion OR a content-div */
  16. 	.ui-layout-center ,	/* has content-div */
  17. 	.ui-layout-west ,	/* has Accordion */
  18. 	.ui-layout-east ,	/* has content-div ... */
  19. 	.ui-layout-east .ui-layout-content { /* content-div has Accordion */
  20. 		padding: 0;
  21. 		overflow: hidden;
  22. 	}
  23. 	.ui-layout-center P.ui-layout-content {
  24. 		line-height:	1.4em;
  25. 		margin:			0; /* remove top/bottom margins from <P> used as content-div */
  26. 	}
  27. 	h3, h4 { /* Headers & Footer in Center & East panes */
  28. 		font-size:		1.1em;
  29. 		background:		#EEF;
  30. 		border:			1px solid #BBB;
  31. 		border-width:	0 0 1px;
  32. 		padding:		7px 10px;
  33. 		margin:			0;
  34. 	}
  35. 	.ui-layout-east h4 { /* Footer in East-pane */
  36. 		font-size:		0.9em;
  37. 		font-weight:	normal;
  38. 		border-width:	1px 0 0;
  39. 	}
  40. 	</style>
  41.  
  42. 	<!-- REQUIRED scripts for layout widget -->
  43. 	<script type="text/javascript" src="../lib/js/jquery-latest.js"></script>
  44. 	<script type="text/javascript" src="../lib/js/jquery-ui-latest.js"></script>
  45. 	<script type="text/javascript" src="../lib/js/jquery.layout-latest.js"></script>
  46. 	<script type="text/javascript" src="../lib/js/jquery.layout.resizePaneAccordions-1.0.js"></script>
  47.  
  48.     <script type="text/javascript" src="../lib/js/themeswitchertool.js"></script> 
  49. 	<script type="text/javascript" src="../lib/js/debug.js"></script>
  50.  
  51. 	<script type="text/javascript">
  52. 	$(document).ready( function() {
  53.  
  54. 		myLayout = $('body').layout({
  55. 			west__size:			300
  56. 		,	east__size:			300
  57. 			// RESIZE Accordion widget when panes resize
  58. 		,	west__onresize:		$.layout.callbacks.resizePaneAccordions
  59. 		,	east__onresize:		$.layout.callbacks.resizePaneAccordions
  60. 		});
  61.  
  62. 		// ACCORDION - in the West pane
  63. 		$("#accordion1").accordion({ fillSpace:	true });
  64. 		
  65. 		// ACCORDION - in the East pane - in a 'content-div'
  66. 		$("#accordion2").accordion({
  67. 			fillSpace:	true
  68. 		,	active:		1
  69. 		});
  70.  
  71.  
  72. 		// THEME SWITCHER
  73. 		addThemeSwitcher('.ui-layout-north',{ top: '12px', right: '5px' });
  74. 		// if a new theme is applied, it could change the height of some content,
  75. 		// so call resizeAll to 'correct' any header/footer heights affected
  76. 		// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
  77. 		setTimeout( myLayout.resizeAll, 1000 ); /* allow time for browser to re-render with new theme */
  78.  
  79. 	});
  80. 	</script>
  81.  
  82. </head>
  83. <body>
  84.  
  85. <div class="ui-layout-north ui-widget-content" style="display: none;">
  86. 	<div style="float: right; margin-right: 160px;">
  87. 		<button onClick="resizeWidgets()">Resize</button> &nbsp;
  88. 		<button onClick="removeUITheme(); myLayout.resizeAll()">Remove Theme</button>
  89. 	</div>
  90. 	North Pane
  91. </div>
  92.  
  93. <div class="ui-layout-south ui-widget-content ui-state-error" style="display: none;"> South Pane </div>
  94.  
  95. <div class="ui-layout-center" style="display: none;"> 
  96. 	<h3 class="ui-widget-header">Center Pane</h3>
  97. 	<p class="ui-layout-content ui-widget-content">
  98. 		<b>NOTE</b>: As of UI v1.7.1, the Accordion widget has a 'resize' method.
  99. 		If you were previously using the patched version of ui.accordion, 
  100. 		you should upgrade to the latest versions of jQuery and jQuery UI.
  101. 	</p>
  102. </div>
  103.  
  104. <div class="ui-layout-west" style="display: none;">
  105. 	<div id="accordion1" class="basic">
  106.  
  107. 			<h3><a href="#">Section 1</a></h3>
  108. 			<div>
  109. 				<h5>West Pane</h5>
  110. 				<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
  111. 					Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</p>
  112. 				<p>Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 
  113. 					Vestibulum a velit eu ante scelerisque vulputate.</p>
  114. 			</div>
  115.  
  116. 			<h3><a href="#">Section 2</a></h3>
  117. 			<div>
  118. 				<h5>Sed Non Urna</h5>
  119. 				<p>Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.
  120. 					Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,
  121. 					faucibus interdum tellus libero ac justo.</p>
  122. 				<p>Vivamus non quam. In suscipit faucibus urna.</p>
  123. 			</div>
  124.  
  125. 			<h3><a href="#">Section 3</a></h3>
  126. 			<div>
  127. 				<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
  128. 					Phasellus pellentesque purus in massa. Aenean in pede.</p>
  129. 				<p>Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, 
  130. 					magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
  131. 				<ul>
  132. 					<li>List item one</li>
  133. 					<li>List item two</li>
  134. 					<li>List item three</li>
  135. 				</ul>
  136. 			</div>
  137.  
  138. 			<h3><a href="#">Section 4</a></h3>
  139. 			<div>
  140. 				<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
  141. 					ac turpis egestas.</p>
  142. 				<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  143. 					Aenean lacinia mauris vel est.</p>
  144. 				<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
  145. 					Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  146. 			</div>
  147.  
  148. 	</div>
  149. </div>
  150.  
  151. <div class="ui-layout-east" style="display: none;">
  152. 	<h3 class="ui-widget-header">East Pane</h3>
  153.  
  154. 	<div class="ui-layout-content">
  155. 		<div id="accordion2" class="basic">
  156.  
  157. 			<h3><a href="#">Section 1</a></h3>
  158. 			<div>
  159. 				<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
  160. 					Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</p>
  161. 				<p>Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 
  162. 					Vestibulum a velit eu ante scelerisque vulputate.</p>
  163. 			</div>
  164.  
  165. 			<h3><a href="#">Section 2</a></h3>
  166. 			<div>
  167. 				<h5>Sed Non Urna</h5>
  168. 				<p>Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.
  169. 					Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,
  170. 					faucibus interdum tellus libero ac justo.</p>
  171. 				<p>Vivamus non quam. In suscipit faucibus urna.</p>
  172. 			</div>
  173.  
  174. 			<h3><a href="#">Section 3</a></h3>
  175. 			<div>
  176. 				<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
  177. 					Phasellus pellentesque purus in massa. Aenean in pede.</p>
  178. 				<p>Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, 
  179. 					magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
  180. 				<ul>
  181. 					<li>List item one</li>
  182. 					<li>List item two</li>
  183. 					<li>List item three</li>
  184. 				</ul>
  185. 			</div>
  186.  
  187. 			<h3><a href="#">Section 4</a></h3>
  188. 			<div>
  189. 				<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
  190. 					ac turpis egestas.</p>
  191. 				<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  192. 					Aenean lacinia mauris vel est.</p>
  193. 				<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
  194. 					Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  195. 			</div>
  196.  
  197. 		</div>
  198. 	</div>
  199.  
  200. 	<h4 class="ui-widget-content ui-state-hover">Accordion inside DIV.ui-layout-content</h4>
  201. </div>
  202.  
  203. </body>
  204. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/UI Layout/accordion.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago