手风琴（有展开／折叠功能的模块） 手风琴是个垂直罗列的元素组合，例如标签或缩略图，这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。...如果实现只允许一个面板被展开，如果另一个面板被展开，折叠这个面板。 当焦点在展开状态的手风琴标题上，如果实现支持折叠，折叠该面板。...选项卡列表 被包含在 tablist 元素中的选项卡元素组合。 选项卡 选项卡列表中的一个元素，作为其中一个内容面板的标签，可以激活以显示对应的内容面板。...当选项卡列表包含焦点，移动焦点到当前页面 tab 序列中的选项卡列表外的下一个元素，一般情况是内容面板的第一个可聚焦元素，或内容面板本身。...层次结构中的任何项目都可能有子项，并且有子项的元素，可以展开或折叠来显示或隐藏子项。
CSS 将 HTML 文档中的每个元素视为一个”框”或”盒”，其中包含一系列不同的属性，用于确定它在页面上的显示位置。...本章介绍了 CSS 框模型的核心组件: 填充，边框，边距，Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图，因为它定义了框的个别行为。...在以后的章节中，我们将更多地了解 HTML 结构和 CSS 框模型如何组合以形成各种复杂的页面布局。...您选择其中一个的最常见原因是: 填充具有背景，而边距始终是透明的 填充包含在元素的单击区域中，而边距则不包括在内 边距会发生垂直折叠，而填充则不会 块级元素和内联元素之间最明显的对比之一是它们对边距的处理...垂直外边距折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边距发生折叠 父子元素的外边距发生折叠 首子元素与父元素的上外边距发生折叠 尾子元素与父元素的下外边距发生折叠 预防边距折叠 有时我们确实希望防止边距折叠
事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。...jQuery对这个事件对象进行了必要的扩展，从而在不论什么浏览器中都能够使用这个属性。通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。...如今，单击button不会再折叠样式转换器。而单击边框则会触发折叠操作。可是，单击标签相同什么也不会发生，由于它也是一个后代元素。实际上。...我们能够不把检查代码放在这里，而是通过改动button的行为来达到目标 。 2. 停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...这样的行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时。会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。
它包含传达用户界面中真实信息的UI项，包括可以接收键盘焦点的UI项以及一些不是UI项上的标签的文本。例如，下拉组合框中的值将出现在内容视图中，因为它们代表终端用户正在使用的信息。...在内容视图中，组合框和列表框都被表示为一组UI项，其中可以选择一个或多个项。 在内容视图中，一个始终处于打开状态，而另一个可以展开和折叠的事实是无关紧要的，因为它旨在显示呈现给用户的数据或内容。...DockPattern DockPatternIdentifiers 可展开和折叠的元素的状态 ExpandCollapsePattern ExpandCollapsePatternIdentifiers...ExpandCollapsePattern IExpandCollapseProvider 用于可展开或折叠的控件。 例如，应用程序中的菜单项，如 “文件” 菜单。...ScrollItemPattern IScrollItemProvider 用于一种控件，该控件具有可滚动列表中的各个项。 例如，一个列表控件，该控件具有滚动列表中的各个项，如组合框控件。
一 ExpandableListView基本介绍 ExpandableListView是Android中的一个可扩展列表视图，它继承自ListView，并提供了支持展开和折叠的功能。...ExpandableListView可以展示带有分组和子项的层次结构数据，让用户可以方便地通过展开和折叠操作来浏览和查看更多的内容。...适配器为每个分组和子项提供数据，并负责渲染它们的视图。 分组和子项布局：你可以定义自己的分组项布局和子项布局，包括文本、图像和其他UI元素的组合。通过适配器，将数据绑定到各个视图上。...分组展开与折叠：用户可以点击分组项来展开或折叠子项。这样可以在有限的空间内显示大量的分组和子项，提供更好的用户体验。 点击事件处理：可以为分组项和子项设置点击事件监听器，以响应用户的点击操作。...定制样式和行为：你可以通过样式和属性来自定义ExpandableListView的外观和行为，如分组项的指示箭头、分割线样式等。
颜色框的自动缩放-调色板中的颜色框的大小是根据色柱填充给定宽度的属性自动计算的。 色框是的宽度和高度都是相同的。...您可以在预定义的动画中选择并根据您的情况进行进一步的定制。 Multicolumn 模式 组合框 –多列模式支持所有先进的AJAX功能组合—按需载入、自动完成等。...可对接对象的不同行为 –您可以规定可对接对象是否可以缩放、展开/折叠、关闭或打印到页面当前位置。 按照指定的行为，会显示预定义命令所对应的按钮。...行为命令 – RadDock 可提供标准的行为命令(展开/折叠/钉住/解钉/关闭)，这些命令可通过设置相应的行为而被启用。...展开/折叠一个区内的所有对象 –程序员可以用提供的客户端对接区对象函数(zone.ExpandAllObjects()和zone.CollapseAllObjects())，将一个特定区域对所有可对接对象展开
-- 组件内容 --> 元素：这是 HTML 中的 div 元素，通常用作容器，用于包含组件的内容。...navbar-expand-lg、navbar-expand-md：根据屏幕尺寸展开或折叠导航栏。... 元素：这是 HTML 中的 div 元素，用于包含警告框的内容。...：这是 HTML 中的 div 元素，用于包含模态框的内容。...：这是 HTML 中的 div 元素，用于包含进度条。
(注意：将焦点困在一个元素中不使该元素成为模态元素，但如果它是真正的模态元素，则焦点无法移动到外部元素，因为外部元素不是可聚焦的)。...键盘可关闭/可折叠 如果内容可以被关闭或折叠，用户也应该能够只用键盘关闭或折叠它。 当内容可以关闭时，一种常见的模式是按下 Escape 键关闭内容。...WAI-ARIA 规定，当使用 role="dialog" 时，应至少包含一个可聚焦的元素，并在对话框打开时将焦点移动到其中一个可聚焦的元素上。...在Details/summary中，Scott O'Hara 建议这样做更为一致: 如果你的的目标是在不同的浏览器中创建绝对一致的披露组件行为，即确保所有的都暴露为展开/收缩按钮，那么你最好使用...例子 一个常见问题部分，其中折叠了答案，可以从问题中展开它们 可以展开单个行的表格（参见 Adrian Roselli 的Table with Expando Rows） “切换提示”，例如显示在复杂术语旁边的
深入理解布局 深入理解布局指南 介绍了布局容器的相关概念，它提供了一个整体框架，可帮助开发者思考如何在屏幕上排列导航栏、工具栏和内容等界面元素。...包括适当缩放以展示更多内容，如示例中的副标题和日期，以及较小的组合技术，例如在紧凑型的布局中对内容进行视觉分组并保持其相关性等。...△ 使用栏式网格在不同屏幕尺寸中对内容进行重排 记住网格系统有助于您选择组件行为，在不同的布局中，以对设备尺寸和场景最有意义的方式决定替换还是更改组件。...在主页横幅布局中，我们强调某个特定元素，重新排布它周围的其他支持元素。...FoldingFeature 中还包含窗口中的折叠位置，当折叠导致内容视图被割裂时，我们应该及时更新布局参数。
这类页面主要包含两种内容元素：相对固定的商品服务分类入口、相对动态的运营和推荐内容（结合市场活动、用户消费习惯等条件动态生成的信息流）。...小视频的播放形式：保持视频播放的最大化，将原本重叠在视频上的文字和交互入口，转移到页面的边缘上，相当于从折叠态到展开态的转换过程中，对界面上的用户交互层元素（如各种入口、按钮等）做了相对拉伸型的布局变化...3.快速浏览与视频播放组合页面 视频类应用，尤其是小视频类应用，用户经常会碰到在宫格阵列或瀑布流的视频缩略图列表界面寻找感兴趣的视频，点击后打开观看的情况，这种场景的架构在折叠屏展开态中体现为基本形态“...4.直播+互动的组合页面 在折叠态中，互动内容会以浮层形式重叠在图像上，而且因为避免对直播图像的遮挡，文字内容的行数受控，得不到充分的展示，尤其在互动内容多，滚动速度快的情况下，互动信息展示不充分。...本篇文章依据折叠屏的使用场景，简要分析了可能会出现的界面设计方法。开发者们可参考文中样例，接下来我们还会推出开发指导系列文章，敬请关注！ ·END·
边栏区域 左边栏提供了关于你代码的辅助信息，并展示识别出的各种各样的图标（代码结构，断点，书签，指示器，变动人，代码折叠）。当然你可以从左侧边栏改变其行为。...配置注释行为 一般情况下，idea的注释(比如//)是在行头的。如果你想改变的话，可以打开settings对话框，选择 Code Style | Java,点击 Code Generation标签。...在 Reformat Code对话框中配置选项后，然后run。 格式化当前文件代码 1.在打开的文件中按键Ctrl+Shift+Alt+L。...如果你按住alt来操作，会递归的展开和折叠代码片段。 选择Code | Folding后，在子单中你能看到关于折叠的选项以及快捷键 -对于折叠的代码片段，点击 ? 即可展开。...展开等级（数字代表展开的层级，比如有两层折叠，如果按1则只展开最外一层，2则展开2层）当前代码块 折叠等级 ctrl+shift+* 和1,2,3,4,5 折叠等级（数字代表折叠的层级，如果按1则只折叠最外一层
通过几天的观察和思考，我认为折叠屏手机有以下好处： 更好的阅读体验 目前各手机厂商的折叠屏展开态均大于7英寸，我们看视频时拥有更好地观看体验，同时我们再也不用担心看漫画时字体太小看不清了。 ?...以上基于“展开”态的想法，在折叠状态下还有一些不错的想法供大家思考： 外折叠设计 华为在MWC2019上演示了一个名叫“镜像智拍”的功能，它可以让被拍摄的人可以实时看到拍摄效果，并调整面部表情与姿势。...折叠屏当然不只有展开和折叠两个状态，还有翻折状态，它区别于传统手机和平板的独立状态。最直接的效果就是它可以不需要支架就立在桌面上，实现中远距离的自拍；同时它可以进行多角度拍摄，成为制作VR内容的利器。...以下是Android对Fragment的官方介绍：“Fragment表示Activity中的行为或用户界面部分。...您可以将多个Fragment组合在一个 Activity 中来构建多窗格 UI，以及在多个 Activity 中重复使用某个Fragment。
块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。...删除一些文本 这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...BFC 是布局中的一个迷你布局 你可以将 BFC 看作是页面内的一个迷你布局。一旦一个元素创建了一个 BFC，它就包含了所有的内容。正如我们所看到的，这包括浮动的元素，它们不再从盒子底部伸出来。...BFC 还会导致一些其他有用的行为。 BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。...产生折叠的必备条件 再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。 BFC 可以阻止元素被浮动元素覆盖 你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。
2、在 tab-content中包含任意多的内容模块(class="tab-pane") 2、JS插件-模态对话框 模态框由两部分组成 1、触发器...ID" 2、模态框 共包含四层结构 1、第一层 框ID"...:模态框脚注 3、JS插件-折叠插件(Collapse) 1、基本折叠效果 1、触发器元素..."collapse" 2、data-target="#被折叠元素ID" 2、被折叠元素 属性：...选择器1; ... ... } 最终：选择器2中会包含选择器1中定义好的样式 带参数的混合： 在声明选择器的时候
文件操作 功能 按键 打开 :e 打开文件对话框 :bro e 保存 :w 另存为对话框 :bro w 查看历史文件列表 :ol 查看并打开历史文件 :bro ol 重命名当前文件 :f filename...功能 按键 查看 Buffer 列表 :ls 转到 Buffer 列表中的下一个 Buffer :bn 转到 Buffer 列表中的上一个 Buffer :bp 转到 Buffer 列表中的 num 号...Buffer :bnum 你之前待过的一个 Buffer :b# 从 Buffer 列表中删除 num 号 Buffer :bdnum 组合命令 可以使用 | 来组合命令，比如 cmd1 | cmd2...代码 功能 按键 格式化代码 gg=G 去除 1-20 行首的行号 :1,20s/^\\s\*[0-9]\*\\s\*//g 展开全部折叠 zR 展开当前层级折叠 zr 全部折叠 zM 当前层级折叠 zm...切换折叠/展开 za 递归折叠/展开当前大区块 zA 折叠当前区块 zc 递归折叠当前大区块 zC 展开当前区块 zo 递归展开当前大区块 zO 格式化 json 数据 :%!
相信大多数设计师都遇到过下面这种窘境，在设计过程中由于缺少基础规范参考，设计师一般会按照个人的主观经验及感觉做设计，这样就会出现同一App展开折叠时差别很大，缺乏统一性的情况，影响用户体验的现象。...为了帮助开发者高效完成适配工作，软件绿色联盟特别邀请了华为资深UX设计专家，从以下三个方面：①折叠屏应用基础体验UX规范、②单页面布局设计规范、③组合页面设计规范，为大家深度解读《折叠屏UX设计规范》。...界面信息展示： 图片、视频等视觉元素不应发生变形、裁剪等信息缺失。 展开态字体大小不应发生明显变化，在保证可读性的基础上，建议保持跟折叠态一样的大小。...除了上面提到的界面信息展示，以新技术主导的折叠屏设备背后，更多挑战则是深入折叠屏设备的用户交互层面。屏幕宽窄的变化给交互设计也会带来相关的变化。在做用户交互的过程中，应该避免哪些情况发生？...在没有“前车之鉴”的基础上，对于开发者而言，在适配过程中，应用需要满足哪些要求呢？ 设备特征适配： 由于折叠屏在展开态下的屏幕显示比例接近方屏，因此横屏的体验跟手机和平板不同，需要做对应的适配。
块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。...这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...BFC 是布局中的一个迷你布局 你可以将 BFC 看作是页面内的一个迷你布局。一旦一个元素创建了一个 BFC，它就包含了所有的内容。正如我们所看到的，这包括浮动的元素，它们不再从盒子底部伸出来。...BFC 还会导致一些其他有用的行为。 BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。...如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。
单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验，特别是在应用在屏幕可自由切换的折叠屏手机上时 在上篇《折叠屏 ① | 华为资深专家解读折叠屏应用基础体验要求》中，为开发者详细讲解了应用基础体验要求...组合页面（信息架构重构）：将原先两个或多个页面的内容，合并到一个新页面中以分栏或其他形式呈现出来，形成跨页面的交互，从而在适合的场景下构建出新的页面组合样式和新的用户体验。...二 单页面布局设计 折叠屏展开态下屏幕宽度变宽，为用户提供了高效便捷的使用体验。动态布局是一种针对设备宽度变化而进行界面版面优化重排的有效变化方式，能够提供良好的体验。...延伸效果 布局特点：延伸布局的特点是当组件内元素横向布局，元素间的距离是固定时，布局可显示元素的数量可随着显示宽度的改变而发生变化。...无论折叠屏设备是折叠还是展开，单页面布局设计提供的高度直观、高效实用的效果将有助于为用户提供最佳体验。 ·END·
现在你可以使用前一节中的模板来创建一个包含三个跳转到其他页面的链接的导航页面： 中，按钮可通过三种方式创建： 使用 元素 使用 元素 使用带有 data-role="button" 的 元素 元素（H1-H6），后跟您想要进行扩展的 HTML 标记，默认情况下，内容是被折叠起来的。... 我是被展开的内容。 点击我 - 我是嵌套的可折叠块！... 我是嵌套的可折叠块中被展开的内容。 panel ? jQuery Mobile中的面板会在屏幕的左侧向右侧划出。
但是它也有个会让人困惑的机制，叫做外边距折叠。所谓外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，折叠后外边距的高度等于两者中较大的那个高度。...而有了外边距折叠就不会这样了。所以外边距折叠是为了排版而生的。 最后，外边距折叠只会发生在常规文档流中块级盒子的垂直方向上。行内盒子、浮动盒子或绝对定位盒子的外边距都不会折叠。...只有当元素的定位方式是静态定位或相对定位时，这时候元素都还在正常的文档流中，其包含块是最近的块级父元素。...全部右浮动 大家应该看得出来，当所有元素全部右浮动时，三个盒子超出了父元素的范围（绿色框），这就是常说的元素塌陷。至于该怎么解决元素塌陷的问题，下面我们再说。...浮动受非同级元素影响 如上，这种情况下，第二组合子挂在了第一组盒子的左边。如果我们不想让第二组的盒子 1 挂在第一组的盒子 3 左边应该如何处理呢？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
