Foundation对于模态框以及Subsystems的深入运用的理解心得

2022-08-22 133

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Foundation对于模态框以及Subsystems的深入运用的理解心得

@[toc]

Foundation 模态框

在这里插入图片描述

模式框是显示在页面顶部的弹出窗口。
我们可以在容器元素上使用唯一ID（例如＜div ID＝“mymodal”），并添加。

查看模态类和数据查看属性以添加模态框。我们可以使用data review id=“id”属性Ali打开任何元素上的模式框。

ID必须与容器ID一致（实例为“mymodal”）。如果想通过单击模式框外部的区域来关闭模式框。

可以添加将review模态类关闭到模态框的“关闭”按钮<a>选项卡。

<!-- Trigger the Modal -->
<button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>

<!-- The Modal Content -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Heading in Modal.</h2>
  <p>Some text in the modal.</p>
  <p>Some text in the modal.</p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

模态框大小

可以在模态框容器上添加以下类以设置模态框的大小：

微小：30%宽度
小：40%宽度
中等：60%宽度
大：70%宽度
XLarge:95%宽度
全尺寸：100%宽度和高度

<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>

可以在模式框中嵌入一个模式框，并在第一个模式框上添加一个新的触发器按钮。必须为嵌入式模态框设置唯一ID：

<div id="myModal" class="reveal-modal" data-reveal>
  <h2>First Modal</h2>
  <p>Some text..</p>
  <p><a href="#" data-reveal-id="secondModal" class="button">Open Second Modal</a></p>
  <a class="close-reveal-modal">&times;</a>
</div>

第二模态框代替第一模态框。如果要在不关闭第一个模态框的情况下打开第二个模态框。

可以将数据选项＝“multiple_opened:true”添加到第二个模式框属性：

<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">

Foundation 开关

切换开关是使用＜div class＝“switch”＞＜向div＞添加一个具有唯一ID的＜input type＝“checkbox”＞创建的，并且＜label＞元素的for属性需要与＜input type＝“heckbox”＜的ID匹配：

使用大的小的。设置开关大小的小类：

<div class="switch large">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>

Foundation下的Subsystems

优点：

1.它有一个强大的网格系统、一些有用的UI组件和优秀的JavaScript插件。
2.它提供了一种响应性设计，可以服务于所有类型的设备。
3.它针对移动设备进行了优化，并真正支持移动优先方法。
4.它提供了可定制和可扩展的HTML模板。

缺点：

1、由于twitter bootstrap的流行，社区比基金会更支持twitter Bootsstrap。
2、初学者可能需要一些时间来学习和利用预处理器支持。
3、缺乏广泛的支持，如质量检查网站和论坛来解决问题。

根据屏幕方向显示元素

以下类根据设备（屏幕大小）隐藏元素。
我们可以设置元素在不同方向上是显示还是隐藏。笔记本和其他桌面设备通常是水平的，但移动电话和平板设备可以是水平的或垂直的。我们可以根据用户手机的方向设置元素隐藏和显示：

.show-for-landscape：在横向时显示元素（纵向隐藏）

show-for-portrait：在纵向时显示元素（横向隐藏）

<p class="show-for-landscape">文本只在横向显示。</p>
<p class="show-for-portrait">文本只在纵向显示。</p>

Foundation5是一款针对移动设备的响应式设计。

该框架的核心是移动优先。
为了确保页面可以自由缩放，可以将以下＜meta＞标记添加到＜head＞元素：

<meta name="viewport" content="width=device-width, initial-scale=1">

Foundation坍塌清单

这个Accordion类和data Accordion属性用于创建可折叠元素Accordion导航类用于渲染可折叠元素。

实际内容在中。内容类（<div class=“Content”）。单击按钮以显示它。
我们将＜a＞元素添加到列表项以控制（显示/隐藏）可折叠内容。然后，锚链接使用与可折叠内容内容相同的ID（<a href=#demo”与<div ID=“demo”相关联）。
注意：可折叠效果需要初始化foundation JS。
默认情况下，隐藏可折叠内容。我们可以补充。<div>上的活动类以使其默认显示：

<div id="demo" class="content active">

手风琴效果用于扩展和设置可折叠内容。
通过使用多个不同的锚链接和ID创建手风琴效果：

<li class="accordion-navigation">
    <a href="#demo2">手风琴实例 2</a>
    <div id="demo2" class="content">
      Demo 2 - Lorem ipsum dolor sit amet....
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo3">手风琴实例 3</a>
    <div id="demo3" class="content">
    </div>

默认情况下，其中一个手风琴列表项处于打开状态。如果要全部关闭，可以使用data options=“multi_expand:true；”属性。