VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 均衡器(Equalizer)

我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:

实例


	
    
		
  1. 
			<div class="row" data-equalizer>
    2. 
		
  2. 
			  <div class="medium-4 columns panel" data-equalizer-watch>
    3. 
		
  3. 
			    Lorem ipsum...
    4. 
		
  4. 
			  </div>
    5. 
		
  5. 
			  <div class="medium-4 columns panel" data-equalizer-watch>
    6. 
		
  6. 
			    Sed ut...
    7. 
		
  7. 
			  </div>
    8. 
		
  8. 
			  <div class="medium-4 columns panel" data-equalizer-watch>
    9. 
		
  9. 
			    Lorem ipsum...
    10. 
		
  10. 
			  </div>
    11. 
		
  11. 
			</div>
    12. 
		
  12. 
			 
    13. 
		
  13. 
			<!-- Initialize Foundation JS -->
    14. 
		
  14. 
			<script>
    15. 
		
  15. 
			$(document).ready(function() {
    16. 
		
  16. 
			    $(document).foundation();
    17. 
		
  17. 
			})
    18. 
		
  18. 
			</script>
    19. 
	

	

		复制

	实例预览 »



	不同屏幕的均衡器



	在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一：



	
		

			
				值
			
				描述
			
				实例
		

		

			
				medium-up
			
				默认。 创建相同高度的容器，宽度大于 40.063em
			
				 
		

		

			
				large-up
			
				创建相同高度的容器，宽度大于 64.063em
			
				实例预览
		

		

			
				xlarge-up
			
				创建相同高度的容器，宽度大于 90.063em
			
				实例预览
		

		

			
				xxlarge-up
			
				创建相同高度的容器，宽度大于 120.063em
			
				实例预览
		

	




	嵌套内容



	为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。 重复多次嵌套均衡器，确保他们是匹配的：



	

		实例

	

	
    
		
  1. 
			 <!-- The Equalized Container -->
    2. 
		
  2. 
			<div class="row" data-equalizer="first">
    3. 
		
  3. 
			  <div class="medium-4 columns">
    4. 
		
  4. 
			    <div class="panel" data-equalizer-watch="first">
    5. 
		
  5. 
			      <h3>Panel</h3>
    6. 
		
  6. 
			 
    7. 
		
  7. 
			      <!-- An Equalized Container Inside The Equalized Container -->
    8. 
		
  8. 
			      <div class="row" data-equalizer="second">
    9. 
		
  9. 
			        <div class="panel" data-equalizer-watch="second">
    10. 
		
  10. 
			          <h3>Nested Panel</h3>
    11. 
		
  11. 
			          <p>Lorem ipsum...</p>
    12. 
		
  12. 
			        </div>
    13. 
		
  13. 
			        <div class="panel" data-equalizer-watch="second">
    14. 
		
  14. 
			          <h3>Nested Panel</h3>
    15. 
		
  15. 
			          <p>Lorem ipsum...</p>
    16. 
		
  16. 
			        </div>
    17. 
		
  17. 
			        <div class="panel" data-equalizer-watch="second">
    18. 
		
  18. 
			          <h3>Nested Panel</h3>
    19. 
		
  19. 
			          <p>Lorem ipsum...</p>
    20. 
		
  20. 
			        </div>
    21. 
		
  21. 
			      </div>
    22. 
		
  22. 
			      <!-- End Nested Equalized Container -->
    23. 
		
  23. 
			 
    24. 
		
  24. 
			    </div>
    25. 
		
  25. 
			  </div>
    26. 
		
  26. 
			  <div class="medium-4 columns">
    27. 
		
  27. 
			    <div class="panel" data-equalizer-watch="first">
    28. 
		
  28. 
			      <h3>Panel</h3>
    29. 
		
  29. 
			      <p>Ut enim...</p> 
    30. 
		
  30. 
			    </div>
    31. 
		
  31. 
			  </div>
    32. 
		
  32. 
			  <div class="medium-4 columns">
    33. 
		
  33. 
			    <div class="panel" data-equalizer-watch="first">
    34. 
		
  34. 
			      <h3>Panel</h3>
    35. 
		
  35. 
			      <p>Lorem ipsum....</p>
    36. 
		
  36. 
			    </div>
    37. 
		
  37. 
			  </div>
    38. 
		
  38. 
			</div>
    39. 
	

	

		复制

	实例预览 »



	 


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程