Foundation 中文手冊
/ Foundation 均衡器
Foundation 均衡器
Foundation 均衡器(Equalizer)
我们可以在容器元素添加 data-equalizer
属性,并为每个子元素添加 data-equalizer-watch
属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:
实例
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row" data-equalizer> <h2>Foundation 均衡器(</h2> <p>相等高度容器:</p> <div class="medium-4 columns panel" data-equalizer-watch> <p>php中文网 -- php中文网!!</p> <p>php中文网 -- php中文网!!</p> <p><strong>我是最高的元素。其他元素使用我的搞定。</strong></p> </div> <div class="medium-4 columns panel" data-equalizer-watch> <p>php中文网 -- php中文网!!</p> <p>php中文网 -- php中文网!!</p> </div> <div class="medium-4 columns panel" data-equalizer-watch> <p>php中文网 -- php中文网!!</p> </div> </div> <!-- 初始化 Foundation JS --> <script> $(document).ready(function() { $(document).foundation(); }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
不同屏幕的均衡器
在均衡器上通过添加 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
属性添加相同的值。 这会一起连接到均衡器容器。
重复多次嵌套均衡器,确保他们是匹配的:
实例
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row" data-equalizer="first"> <h2>内嵌均衡器</h2> <p>一个均衡容器内嵌入另一个均衡容器:</p> <div class="medium-4 columns"> <div class="panel" data-equalizer-watch="first"> <h3>面板</h3> <div class="row" data-equalizer="second"> <div class="panel" data-equalizer-watch="second"> <h3>内嵌面板</h3> p>php中文网 -- php中文网!!</p> </div> <div class="panel" data-equalizer-watch="second"> <h3>内嵌面板</h3> <p>php中文网 -- php中文网!!</p> </div> <div class="panel" data-equalizer-watch="second"> <h3>内嵌面板</h3> <p>php中文网 -- php中文网!!</p> </div> </div> </div> </div> <div class="medium-4 columns"> <div class="panel" data-equalizer-watch="first"> <h3>面板</h3> <p>php中文网 -- php中文网!!</p> <p>php中文网 -- php中文网!!</p> </div> </div> <div class="medium-4 columns"> <div class="panel" data-equalizer-watch="first"> <h3>面板</h3> <p>php中文网 -- php中文网!!</p> </div> </div> </div> <!-- 初始化 Foundation JS --> <script> $(document).ready(function() { $(document).foundation(); }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例