首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【译】W3C WAI-ARIA最佳实践 -- 表单

- 当焦点在一个menu,将焦点移动到下一个项目,可选的,从最后一个项目返回到第一个项目。...- (可选):当焦点在menuitem 中一个 menubar时,打开其子菜单,并将焦点放置在子菜单的最后一个项目。...- 当焦点在 menu 的一个具有子菜单的 menuitem 时,打开子菜单并将焦点放置在其第一个项目。 - 当焦点在一个 menu 中的不具有子菜单的项目时,执行以下3个操作: 1....禁用的菜单项是可聚焦的,但无法激活。 2. 菜单中的separator不可聚焦或交互。 3....滑块 滑块是供用户从给定范围内选择值的输入控件。滑块通常有个拖动拇指,可以沿着条或轨道移动来改变滑块的值。 示例 水平滑块示例: 演示使用三个水平对齐的滑块来制作颜色选择器。

8.2K30

06-移动端开发教程-fullpage框架

他们的详细介绍如下: 选项 选项 类     型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 slidesColor...数组 空 项目导航的 tip slidesNavigation 布尔值 false 是否显示左右滑块的项目导航 slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选...afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink...、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex...配合fullpage的onLeave事件,可以实现在上一屏离开的时候,给下一屏添加动画样式类,并把一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。

5.1K90
您找到你想要的搜索结果了吗?
是的
没有找到

06-移动端开发教程-fullpage框架

他们的详细介绍如下: 选项 选项 类     型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 slidesColor...数组 空 项目导航的 tip slidesNavigation 布尔值 false 是否显示左右滑块的项目导航 slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选...afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink...、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex...配合fullpage的onLeave事件,可以实现在上一屏离开的时候,给下一屏添加动画样式类,并把一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。

5.1K50

物联网智能家居系统设计方案(想开一家智能产品店)

用来模拟温度计湿度计等智能家居中的环境采集器,使人们能生活在舒服的环境中。...以此来模拟智能家居中的火警报警器,当有烟雾反应时即刻反馈信息并报警。...1.3.7 PWM调光模块 本模块的主要功能是通过操作界面程序中的调光灯模块的滑块来控制灯光(光照强度)的大小,以此来模拟家居中的柔光强光等各种情况分别适宜的光线。...通过网关程序中的调光灯模块的滑块来控制灯光的大小,以此来模拟家居中的灯光大小。...这是PWM调光灯模块,滑块向右滑动,灯的亮度会增加;滑块向左滑动,灯的亮度会降低。 实验现象如上图5-2所示,对室内灯的调控。

1.1K40

Unity基础教程-物体运动(十)——环境交互(Movement with Consequences)

区域可以通过添加一个带有触发器碰撞器的对象到场景中来创建,然后将 zone behavior 附加到它。你也可以添加可视化的跳板对象,但是我只是用半透明的黄色材质使区域可见。 ?...3.1 自动滑动条 无论插值什么,它在概念都由从0到1的滑块控制。如何更改值是与插值本身不同的问题。保持滑块分离还可以将其用于多个插值。...一旦值达到1,我们就可以完成并可以禁用滑块。 ? 再一次,我们将使用Unity事件使它能够附加行为到滑动条。在本例中,我们需要一个随值变化的事件,我们将使用它来传递滑块的当前值。...插值器的Interpolate方法的动态版本绑定到滑块的事件,这就是为什么其值没有字段的原因。然后,我将滑块连接到检测区域,以便在有物体进入该区域时激活平台。请注意,插值点在世界空间中。 ?...并使它成为可配置的选项。 ? (线性VS平滑) ? ? ? (开启了平滑步长的平台) 3.5 更多控制 可以通过检测区域事件,并禁用滑块组件来暂停动画,但让我们也可以控制其方向。

3.1K10

简单了解下无障碍设计模式

样式 布局 Material Design 的触摸目标指南使那些无法看到屏幕、或者运动不灵活的用户能够点击应用中的元素。 触摸目标 触摸目标是屏幕中响应用户输入的部分。...正确示例 滑块值和滑块控件非常接近。 错误示例 滑块值和滑块控件之间的距离太远。对于放大了屏幕的用户,如果不在滑块和值之间来回浏览的话,可能不能同时看到滑块和值。...启用焦点导航 使用焦点控制导航 屏幕阅读器 屏幕阅读器为用户提供了多种屏幕导航的方法,包括: 屏幕阅读器的触摸界面允许用户在屏幕移动手指,以听到手指正下方的内容。这使用户能快速了解整个界面。...错误示例 描述图标的外观无法清楚的表明操作的作用。 正确示例 导航菜单的无障碍文本可以是 “显示/隐藏导航菜单” (首选)或者 “显示/隐藏主菜单” (可接受)。...不要提及确切的手势和交互 不要告诉用户如何与控件进行身体的交互,因为它们可能使用键盘或其他设备进行导航,而不是用手指或鼠标进行导航。无障碍软件会为用户描述正确的交互方式。

4.7K40

iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

API注释 想要了解如何在代码中定义信息按钮,可以参考UIButton. iOS包含了两种信息按钮样式:适用于浅色内容的深色按钮,以及适用于深色内容的浅色按钮。...如果用户可以在你的应用程序打开超过20个视图,请考虑给视图一个不同的展示方式,以提供关于视图的详细信息,使其支持不连续的导航。 在打开视图的底部边缘和屏幕的底部边缘里垂直居中页面控件。...如果你给分段控件添加了自定义底图,请确保控件里自动居中的文本依然清晰美观。...举个例子,如果一个模态视图中含有导航条和取消或完成任务的按钮,这里的导航条样式应该与你的app中导航条一样。 合适的话,在模态视图里加入可以说明任务内容的标题。...弹出(Flip).当前视图从右往左水平滑动,露出模态视图。从视觉看,模态视图好像原来就处于当前视图的下面,当前视图移开时,它便出现了。离开模态视图时,原先的父视图从左边滑回屏幕右边。

13.2K30

从React-Native坑中爬出,我记下了这些

一篇文章 当React开发者初次走进React-Native的世界 前言 最近因为业务需要,做了一些关于React-Native方面的开发,对一些自己遇到的问题做了记录。...其中导航我们有两种写法,一种是单纯写成React的props函数调用的风格,另外一种是写成Redux的风格,就是通过dispatch/action的风格,使用Redux风格,是因为少部分场景可能会用到全局导航状态共享的需求...—— 自定义长度的居中下划线的切换 ?...一般情况下,设计师给我们的下划线不是占满满一个tab的,而是只占一个tab的一部分长度,比如60%,同时还要实现居中,这时这个开源的tab模块就让我感到头疼了。...可是,这样的话,我们切换的时候,平滑过渡的动画效果怎么实现?模块没有提供可以切入的相关props啊,实在没有办法,我最终还是无奈得自己定义了一个。

2.3K30

简单的聊一聊如何用CSS制作一个专业的头部页眉(Headers)

Space-Between在一个三列的页眉中无法居中 首先,让我们谈谈三列页眉,因为这是我最常见到实现错误的一种情况。...通常情况下,导航应该在第一个和最后一个项之间居中对齐。 根据我的观察,这个问题已经成为前端社区中的新问题,类似于“居中一个div”的问题。...因为许多开发人员会使用justify-content属性的space-between值来解决这个问题,但它实际并不能将中间元素居中对齐。...这样做是为了使嵌套关系更加清晰。 然后,页眉下的每个元素都是一个弹性容器。这也是不必要的。目前,它仅用于导航的最后一个子元素,以将其子元素移动到右侧。...在较小的屏幕隐藏导航栏 与使用justify-content属性的space-between值一样,上述模式使我们能够在布局保持完整的同时隐藏中间导航

31910

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

移动与另一个折点重合时无法选择的贝塞尔控点。将鼠标悬停在控点,直到指针变为折点,然后拖动该控点。 Ctrl+H 将 z 值移动到指针。 将选定折点的 z 值移动到指针的高程。保留 x 值和 y 值。...1 当地图框处于活动状态时,可在布局缩放和平移。 地图导航 可使用以下键盘快捷键在地图视图中导航。...Shift + 单击 使指针位置居中并放大。 Ctrl + 单击 以指针位置作为视图中心。 在 2D 环境下,这将使视图居中。在 3D 环境下,照相机会转向中心并显示该位置。...在播放时,将地图显示在传感器的视频帧和地面轨迹保持居中。当视频到达显示器边缘时,地图显示将平移。这与自动追踪视频播放器工具相同。 Ctrl+Alt+N 在活动视频窗格的视频显示指北针。...时间 时间滑块的键盘快捷键 键盘快捷键 操作 注释 Ctrl+空格键 播放/暂停。 按时间滑块设置中定义的方向和速度从头至尾播放时间序列,或重复按下键盘快捷键暂停播放。

70420

10个适用于WordPress的最佳时间轴插

1.珠穆朗玛峰时间表 珠峰时间表 是一个响应时间轴插件,可以帮助您为网站创建漂亮的时间轴。 它提供了50多个预建模板,可帮助您轻松入门。...该插件可让您在时间轴使用各种字体,图标和图像,以使其看起来更有趣。 该插件是跨浏览器兼容的,并且在所有设备看起来都很棒。 它也有一个 专业版 提供更多功能。...5.时间轴快递 时间轴特快 使您轻松为WordPress网站创建精美的时间表。 它使您可以提供动画的垂直布局,该布局将使用户迅速了解您的故事。...由于使用了清晰的代码来设计插件,因此在所有设备看起来都很棒。...它还将基于标签或日期以升序自动创建动画滚动导航。 使用此插件,您可以免费创建任意多个时间轴。 它还提供了灵活性,可以为时间线分配图标并设置不同的颜色。 这使您的用户更具吸引力。

2.2K00

Android自定义View实现颜色选取器

实现解析 1 构成 指示点:类似于 SeekBar 的滑块,通过滑动指示点来选取颜色 颜色条:放置可选颜色 ?...1/9 留白 2/9 指示点在颜色条上方的部分 3/9 颜色条高度 2/9 指示点在颜色条下方的部分 1/9 留白 这样分之后就可以得出 圆的直径占有 9 份中的 7 份,颜色条占有 3...7 / 9 ,而且颜色条左右分别留出 3.5 / 9(指示点半径) 的空间,那么颜色条的宽度只剩 9 / 9 – ( 7 / 9) = 2/ 9 ,2 / 9 < 7 / 9,而且颜色条和指示点都是居中显示的...解决方法: 针对第一种情况,此时使均分为 9 份的基数为宽(短边)的 1 / 6(控件默认有个最小宽高,默认值的长边与短边之比就是 6 : 1)。 第二种情况下,使基数为高度的 1 / 6。...同时这样可以提高控件绘制效率,在大多数情况下颜色条的可选颜色是不会变化的,此时可以将在可选颜色发生变化后生成的位图直接绘制到控件,而不需要再一次绘制这个位图,指示点也如此,只需在选取颜色时(滑动指示点时

1.4K30

最新iOS设计规范五|3大界面要素:控件(Controls)

五、标签(Labels) 标签描述了屏幕的界面元素或提供了一条短消息。尽管人们无法编辑标签,但他们有时可以复制标签的内容。标签可以显示任意数量的静态文本,但最好保持简短 ? 保持标签清晰易读。...如果你的应用需要显示超过20个页面,请考虑使用其他的排列方式 - 例如网格 - 启用非顺序导航。 页面控件显示在屏幕底部的中心。页面控件应始终位于内容底部和屏幕底部之间的区域,并保持居中。...当执行无法量化的任务(例如加载或同步复杂数据)时,加载器会旋转。任务完成后它会消失。活动加载器是不是可交互元素。 ? 进度条优于加载器。...当滑块的值发生变化时,最小值和拇指之间的轨道部分会填充颜色。滑块的左右位置好可以展示图标,来说明最小值和最大值的含义。 ? 如有必要,可以自定义滑块的外观。...自定义开关的视觉样式,使它与你的设计更协调。根据设计风格,自定义开关在其关闭和打开时的背景颜色,可以使开关在APP中的体验更好。 仅在列表中使用开关。开关用在列表中,例如可以打开和关闭的设置列表。

8.5K30

快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

总的来说, CSS3语言使您的网站美丽而时尚。 3. Bootstrap已经成为用户界面开发人员最喜欢的前端框架之一,其优势在于其开源的可用性。...开发技术:HTML 5, CSS 3, JS, jQuery 网站特色: l 创意机构模板 l 粘性的导航条 l 谷歌地图 l 社交媒体图标 l 色彩斑斓的接口 l 字体图标 l 明亮的配色方案 Boxus...最重要的是,它提供了最新的JavaScript插件,使模板更加高效和强大。 你要知道,一个具有启发性的令人惊叹的免费HTML5网页模板可以大大减少耗时并提高生产力。 2. ...兼容所有设备,显示在所有屏幕尺寸。它完全建立在Bootstrap框架中,HTML5,CSS3和JQuery.你可以轻松的将这个模板与任何其他类型的生意相结合。 4. ...开发技术:HTML 5, CSS 3, Bootstrap 3, JS, jQuery 网页特色: l 视差效应 l W3C有效标记 l 平滑过渡效果 l 跨浏览器支持 l 100%响应式布局 l 100

10.8K51

最新iOS设计规范六|10大交互规范(User Interaction)

用户可以使用多种类型的控件来操纵其设备的声音,包括音量按钮,“铃声/静音”开关,耳机控件,“控制中心”音量滑块以及第三方附件中的声音控件。...音量 无论是使用设备的物理按键还是屏幕滑块,用户都希望能够改变音量大小来控制整个系统的声音,包括音乐和APP内音效。...在支持的iPhone型号,你可以通过多种方式在APP内添加触觉反馈: 标准的:默认情况下会使用系统触觉反馈,如开关、滑块和选择器。...触摸并按住所选内容使它看起来像上升并附着在用户的手指。拖动内容时,动画和视觉提示会确定可能的目的地。系统还会显示一个标志,指示何时无法删除,否则将导致复制内容而不是移动内容。 起始点和目的地 ?...当用户无法立即撤消拖放操作时,请考虑提供一种微妙和直观的退出方式。 十三、指针(Pointers) iPadOS 13.4引入了动态指针效果和行为,可增强在iPad使用定点设备的体验。

4K30

快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

总的来说, CSS3语言使您的网站美丽而时尚。 3. Bootstrap已经成为用户界面开发人员最喜欢的前端框架之一,其优势在于其开源的可用性。...Boxus - 软件公司和网页设计公司的创意网站模板 开发技术:HTML 5, CSS 3, JS, jQuery 网站特色: l 创意机构模板 l 粘性的导航条 l 谷歌地图 l 社交媒体图标 l...兼容所有设备,显示在所有屏幕尺寸。它完全建立在Bootstrap框架中,HTML5,CSS3和JQuery.你可以轻松的将这个模板与任何其他类型的生意相结合。 4. ...由于Bootstrap 4为开发人员和用户提供了更多的舒适性和灵活性,Vex模板在小屏幕可以发挥出色的效果。 2. ...免费的HTML5 CSS3 Bootstrap响应式网页模板 开发技术:HTML 5, CSS 3, Bootstrap 3, JS, jQuery 网页特色: l 视差效应 l W3C有效标记 l 平滑过渡效果

13K120

Unity通用渲染管线(URP)系列(八)——复杂的贴图(Masks, Details, and Normals)

但默认球体的极点总是会变形很多,这是无法避免的。 ? ? (电路球) 1.2 自发光 前面已经支持了自发光贴图,所以我们也使用起来。下面是一个在金色电路顶部添加浅蓝色照明图案的贴图。 ?...与其创建具有更好遮挡数据的另一个遮罩贴图,不如将遮挡强度滑块属性添加到我们的着色器中。 ? ? (遮挡滑块,降低至0.5) 将其添加到UnityPerMaterial缓冲区。 ?...(反照率细节缩放至0.2) 3.3 细节平滑度 为平滑度添加细节的方法和之前相同。首先,还要为其添加强度滑块属性。 ?...照明与表面法线交互,该法线在每个三角形平滑插值。如果照明也与其较小的特征相互作用,我们的表面将更加有可信度。可以通过添加对法线贴图的支持来做到这一点。...生成Mip贴图时,应将法向矢量与其他数据通道区别对待,而Unity的纹理导入器无法做到这一点。而且,在使Mip贴图淡化时,Unity会忽略Alpha通道,因此该通道中的数据将不会正确变淡。

4.1K40
领券