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

后台系统设计(上篇:选择)

最佳用法 ·只有一个选项仅仅有两个相互排斥选项,考虑单个复选框切换开关等其他非互斥选择控件;若当前选项过多时,且在有限屏幕空间下,考虑使用下拉菜单列表框。...二、复选框 允许用户从非互斥选项,选择任意数量选项(零个、一个多个) 单个使用时,复选框提供了两个互斥(二元)操作选项。 外观 常规: ? ? 全选操作(未全选状态): ?...习惯用法是遵循互联网产品一些默认处理方式,例如,注册同意条款就是使用复选框。...·列表提供全选和多选操作,以便用户能够列表间移动大量选项。 ·实时显示当前被选中列表/ 「源」 列表数量比及 「目的」 列表数量。 ·若列表框内容大于视窗高度,列表框高度为:N列表+½列表。...最佳用法 ·较小空间下,对多个选项进行选择内容较为次要且不需要一直显示时,下拉菜单是不错选择。若选项较少,考虑使用单选框(当进行单项选择时)复选框(当进行多项选择时)。

9.6K21

单选按钮用户体验设计

现代软件单选按钮正是仿照这些物理按钮。 二、单选按钮最佳实践 1、使用单选按钮仅用来设置 使用单选按钮来更改设置,而不是作为操作按钮来执行命令。...4、通常给一个默认选项 UI设计十原则之一告诉我们用户应该能够取消重做他们行为。这意味着通过UI控制应该能够让用户会到初始状态。单选按钮情况下,这意味着单选按钮应该预先选择一个选项。...用户能够很快看到有几个选项以及每个选项是什么,而不用点击其他操作再去发现这些信息。 8、避免嵌套 避免嵌套单选按钮和其他单选按钮复选框。应该把所有选项置于同一层级避免用户困惑。...例子,选项是对立因此使用单选按钮是更好方案。 设置向导。你应该在向导页面上使用单选按钮使选项明确,即使一个复选框也是可以接受。一个有默认值单选设计恩狗给用户一个很好建议。...默认选项可能引导用户做出最好决定,并提升它们草错过程信心。 简单答案。当你有一个简单问题而用户只需回答是时候,使用复选框还是正确无误

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

从0开始编写一个开关组件

对于这篇文章,我只提供将一个标准复选框可视化转换为一个可视开关样式。没有ARIA,没有脚本,没有特殊特性。...一如果CSS文件不加载,按照我“从0开始编写自定义单选按钮复选框”一文方法,你也可以得到一个可以运行持续增强复选框。...如果你想以函数和样式来构建一个原生开关,那么你需要看看ARIA开关作用, 你会立即明白,一个开关会影响一个应用程序, 用纯文本向用户去解释这一点, 你会意识到, 如果不能正确做到这一点,就会带来一个A级...无论你开发悬停样式是什么,当用户页面上进行选项卡切换焦点以编程方式放置复选框上时,悬停样式都需要是清晰而明显。...我通过清除背景、亮化边框和文本来实现变灰显示方法。虽然一个禁用控件无法接收焦点,但我们可以悬停在该控件上,以便我们想要撤消这些样式。 ? 不确定状态 复选框有第三种状态(开关控件没有)。

2.4K20

文档和元素几何滚动

单选框和复选框共用一个状态标识,它们click和change事件都会被触发,相比一下change事件更加有用。 表单元素收到键盘焦点时也会触发focus事件。...失去焦点触发blur事件 事件处理程序代码关键字this将会触发该事件文档元素一个引用,或者通过this.form.x得到该表单以x命名元素 事件总结 提交触发事件 当用户单击按钮(或者回车时候...this问题 this是触发该事件文档元素一个引用。即触发该事件对象 form元素元素拥有一个form引用了其父级form。通过this.form会得到form对象引用。...开关按钮 复选框单选元素为开关按钮称之为有两种视觉状态按钮。即选中未选中。通过对其单击,用户可以改变其开关状态。...单选复选框都定义了checked属性,指定了元素当前是否选中。defaultChecked属性也为布尔值,为htmlchecked值,指定了元素第一次加载页面时是否选中。

5.2K00

Java 进阶篇】深入了解HTML表单标签

标签用于提供文本框标签,for属性与id属性关联,以确保点击标签时可以聚焦到相应输入框。 单选按钮复选框 单选按钮复选框用于选择一个多个选项。...单选按钮使用标签type="radio",而复选框使用标签type="checkbox"。...我们创建了性别选择(单选按钮)和爱好选择(复选框表单元素。...name属性用于将单选按钮复选框分组,确保用户只能选择一个单选按钮多个复选框选项。 下拉列表 下拉列表允许用户从预定义选项中选择一个。它使用和标签创建。...以下是一些常用表单属性: action:指定表单数据提交到服务器端脚本URL。 method:指定数据提交HTTP方法,通常为"GET""POST"。

18910

Vue表单输入绑定

文章目录 1、简介 2、单行文本输入框 3、多行文本输入框 4、复选框 5、单选按钮 6、选择框 7、值绑定 7.1 复选框 7.2 单选按钮 7.3 选择框选项 8、实例:用户注册 1、简介   ...由于表单控件有不同类型,如文本输入框、复选框单选按钮、选择框等,v-model指令不同表单控件上应用时也会有所差异。 2、单行文本输入框 <!...我们应该总是JavaScript脚本声明初始值,或者组件data选项声明初始值。 文本框输入数据,可以看到输入框下方内容也会同时发生改变。   ...7.1 复选框   使用复选框时,元素上可以使用两个特殊属性true-value和false-value来指定选中状态下和未选中状态下v-model绑定是什么。 <!...提交“按钮上,我们绑定click事件时使用了.prevent修饰符,这是因为本实例是click事件响应函数完成用户注册数据发送,并不希望表单默认提交行为发生,因此使用.prevent修饰符来阻止表单默认提交行为

7.3K70

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

三态复选框一种常见使用场景是软件安装时,一个单独三态复选框用来代表和控制整个安装选项组状态。并且,该组每个选项都可以单独使用双态复选框开启关闭。...以下方法可被用于让脚本能够菜单项目间移动焦点,如 Keyboard Navigation Inside Components: 菜单容器 `tabindex 设置为 -1 0 并将 aria-activedescendant... Menu or Menu bar 中介绍了菜单元素所需附加角色,状态和属性。 单选按钮单选按钮组,是一个可选中按钮组合,被称为单选按钮,且该组合,只有一个按钮处于选中状态。...某些浏览器,如果没有选中任何一个单选按钮,使用 Shift+ Tab 将焦点移动到单选按钮组,焦点将会被放置最后一个单选按钮,而不是第一个单选按钮。...button-按钮 ---- 按钮 是一个组件,能够让用户触发一个操作事件,例如提交一个表单、打开一个对话框、取消操作、执行删除操作。告知用户一个按钮会打开对话框惯用方法是将“...”

8.2K30

实践:使用JenkinsActive参数,让参数动起来~

Jenkins构建时,可能需要使用参数类型有复选框单选按钮,多选值等输入情景。...我已经安装好,因此“已安装”标签列出。 使用Groovy脚本,生成动态参数选项值列表。参数可以动态更新,呈现为组合框,复选框单选按钮丰富HTMLUI窗口小部件。...这里`return` 语句是什么意思呢? 选项参数值其实是一个Array数组, 所以这里最终运行函数返回要对应上。 当作业已定义参数值发生更改时,可以动态更新。...场景: 根据用户选择构建工具不同,自动填充对应构建命令。 调试GitLab接口 进入GitLab官方文档,找到API资源文档。...,并使用API获取; 封装一个统一HTTP请求函数; import groovy.json.JsonSlurper import java.util.ArrayList import jenkins.

1.3K10

Java Swing用户界面组件:复选框+ 滑块+组合框+边界+单选按钮

本节,将介绍如何编写程序实现复选框单选按钮、选项列表以及滑块。 复选框 如果想要接收输入只是“是”“非”,就可以使用复选框组件。复选框自动地带有标识标签。...只要用户点击某个复选框,程序就会刷新屏幕以便应用新字体属性。 复选框需要一个紧邻它标签来说明其用途。构造器中指定标签文本。...这里允许用户多个选择中选择字体大小—小、、大和超大—但是,每次只能选择一个选项。 Swing实现单选按钮组非常简单。为单选按钮组构造一个ButtonGroup类型对象。...例子,定义了一个动作监听器用来把字体大小设置为新值: 对比这个监听器和复选框监听器。每个单选按钮都对应一个不同监听器对象。每个监听器对象都非常明确它需要做什么—把字体尺寸设置为一个特定值。...复选框例子,使用是一种不同方法。两个复选框共享一个动作监听器。这个监听器调用一个方法来检查两个复选框的当前状态。 对于单选按钮来说,能够使用同一种方法吗?

6.6K10

CheckBox和RadioButton使用大全

本期先来学习Button两个子控件,无论是单选还是复选,实际开发中都是使用较多控件,相信通过本期学习即可轻松掌握。...一、CheckBox CheckBox(复选框)是Android复选框,主要有两种状态:选中和未选中。...二、RadioButton RadioButton(单选按钮Android开发应用非常广泛,比如一些选择项时候,会用到单选按钮。它是一种单个圆形单选框双状态按钮,可以选择不选择。...RadioButton没有被选中时,用户能够按下点击来选中它。但是,与复选框相反,用户一旦选中就不能够取消选中。当用户选中时候会触发一个OnCheckedChange事件。...为了监听单选按钮选中事件,Java代码为其添加选择事件监听器,具体代码如下: public class MainActivity extends AppCompatActivity {

3.8K100

《手把手教你》系列技巧篇(三十三)-java+ selenium自动化测试-单选和多选按钮操作-上篇(详解教程)

1.简介   实际自动化测试过程,我们同样也避免不了会遇到单选和多选测试,特别是调查问卷或者是答题系统中会经常碰到。...因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们以后工作遇到可以有所帮助。 2.什么是单选框、复选框?   ...单选按钮一般叫raido button,就像我们电子版单选答题过程一样,单选只能点击一次,如果点击其他单选,之前单选被选中状态就会变成未选中。单选按钮点击,一样是使用click方法。...多选按钮,就是复选框,一般叫checkbox,就像我们电子版多选答题过程一样,可以选择多个选项,多选按钮点击,同样是使用click方法。...、复选框会有默认选中状况,那么有必要我操做单选框或者复选框时候,先判断选项框是否为选中状态。

1.9K20

java-GUI编程之AWT组件

AWT中常用组件 基本组件 组件名 功能 Button Button Canvas 用于绘图画布 Checkbox 复选框组件(也可当做单选框组件使用) CheckboxGroup 用于将多个Checkbox...组件组合成一组, 一组 Checkbox 组件将只有一个可以 被选中 , 即全部变成单选框组件 Choice 下拉选择框 Frame 窗口 , GUI 程序里通过该类创建窗口 Label 标签类,...,BorderLayout.SOUTH); //创建一个Panel容器,装载下拉选择框,单选框和复选框 Panel checkPanel = new Panel();...frame.pack(); frame.setVisible(true); } } Dialog对话框,可以根据需求,自定义内容 案例: ​ 点击按钮,弹出一个模式对话框,...getFile() 获取被打开保存文件文件名 案例2: ​ 使用 Frame、Button和FileDialog完成下图效果: 演示代码2: import java.awt.*; import

3K10

软件测试|超好用超简单Python GUI库——tkinter(十二)

前言上一篇文章我们介绍了tkinter单选实现,单选各选项之间关系是互斥,选择了A选项,就不能选B选项;复选框就不一样,各个选项之间是并列,我选了A还可以选B和C选项,我们大学选课以及我们啊购物时选购商品就是类似的情况...variable和复选框按钮关联变量,该变量值会随着用户选择行为来改变(选不选),即在 onvalue 和 offvalue 设置值之间切换,这些操作由系统自动完成2....indicatoron默认为 True,表示是否绘制用来选择选项小方块,当设置为 False 时,会改变原有按钮样式,与单选按钮相同selectcolor选择框颜色(即小方块颜色),默认由系统指定...invoke()调用 Checkbutton command 选项指定函数方法,并返回函数返回值2....,复选框是我们常用功能,设计GUI时经常会用到,希望能够帮助大家,后续我们将介绍tkinterScale控件。

84330

Xcelsius(水晶易表)系列7——多选择器交互用法

)、单选按钮(第一篇案例同样也有使用)、组合框。...集合以上图表三个选择器和数据表,我大体思路是这样: 通过标签式选择菜单传递产品类型参数、通过单选按钮传递年份参数、通过复选框传递地区参数。...复选框下拉菜单依次分别单击北京、天津、河北……新疆,则U11单元格会依次输出1、2、3……31。...【请注意内部决定引用与相对引用用法区别,D9要使用相对引用,这样才能向右填充函数,其他参数作为查询参照,需要使用绝对引用】。...水晶仪表盘搭建: 进入水晶易表,分别插入标签式菜单、组合框、单选按钮。(部件选择器插入)。 ? 标签式菜单、组合框、单选按钮参数设置如下: ? ? ?

2.6K60

使用 Chrome 开发者工具分析内存问题

在这里,您可以看到按 JS 堆(与概览窗格 HEAP 图相同)、文档、DOM 节点、侦听器和 GPU 内存细分内存使用情况。 禁用复选框会将其隐藏在图表。...节点数以离散步骤增加。 您可以假设节点数每次增加都是对grow() 调用。 JS 堆图(蓝色图)并不那么简单。 根据最佳实践,第一次下降实际上是强制垃圾收集(通过按下收集垃圾按钮实现)。...这里关键是 JS 堆结束时比开始时高(这里“开始”是强制垃圾收集之后点)。 现实世界,如果您看到这种增加 JS 堆大小节点大小模式,则可能意味着内存泄漏。...展开对象并单击其值以“对象”窗格查看有关它更多详细信息。 例如,在下面的屏幕截图中,通过查看新分配对象详细信息,您将能够看到它已分配给 Window 范围内 x 变量。...在任务管理器,频繁上升和下降 Memory JavaScript Memory 值表示频繁垃圾收集。 时间轴记录,频繁上升和下降 JS 堆节点计数图表示频繁垃圾回收。

3.1K60

HTML 表单 (form) 作用解释

表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本处理工作。 下面对表单三个部分分别进行说明。...它可以是一个URL地址(提交给程式),一个电子邮件地址; method=get | post:指明提交表单 HTTP 方法,可能值有 POST GET,在数据传输过程中分别对应了 HTTP 协议...二、表单域 表单域包含了文本框、多行文本框、密码框、隐藏域、复选框单选框和下拉选择框等,用于采集用户输入选择数据,下面分别讲述这些表单域代码格式。 1...."> 属性解释如下: type=”radio”:定义单选框; name:定义单选名称,要保证数据准确采集,单选框都是以组为单位使用同一组单选项都必须用同一个名称; value:定义单选值..."> 属性解释如下: type=”button”:定义一般按钮; name:定义一般按钮名称; value:定义一般按钮显示文字; onClick:可以是其它事件,通过制定脚本函数来定义按钮行为;

4.9K71

HTML、CSS、JavaScript学习总结

“> Type 属性: submit: 提交按钮 reset: 重置按钮 button: 普通按钮 文本框、按钮单选按钮复选框等都是输入元素。...另外在JavaScript对于对象属性和方法引用,有两种情况: – 该对象为静态对象,表示引用该对象属性方法时不需要为它创建实例; – 引用该对象属性和方法时必须为它创建一个实例,叫做动态对象...您可以使用此属性查看复选框状态设置复选框是否被选中 value 设置获取复选框值 是为了原样显示字符串换行”\n”格式 修改每个复选框名称都为mybox,使这4个复选框构成一个数组...单选按钮 事件 onBlur 单选按钮失去焦点 onFocus 单选按钮获得焦点 onClick 单选按钮被选定取消选定 属性 checked 单选按钮是否被选中,选中为true,未选中为false...您可以使用此属性查看单选按钮状态设置单选按钮是否被选中 value 设置获取单选按钮值 下拉列表框 –请选择开户帐号城市

3K20

前端如何提高用户体验:增强可点击区域大小

举个例子,WCAG准则2.3.2规定:网页不包含任何闪光超过3次/秒内容。 用户应该能够使用台式机/笔记本电脑上键盘以及移动设备平板电脑上触摸屏来操作输入。...正确方法a 标签本身上添加padding。...复选框单选按钮 当存在复选框单选按钮元素时,我希望可以单击它关联标签来激活/禁用它。 ? 从用户体验角度来看,这是难以访问和糟糕。...这样,问题得以解决,整个复选框单选按钮都是可单击,如下图所 ? 侧边栏 对于带有类别的页面,有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说,可点击区域仅在文本上,如下图所示: ?...章节标题 某些情况下,需要在章节标题远端添加“查看更多”按钮箭头。 在下面的示例,我将箭头放置假圆以便可以正确地使箭头居中。

4.7K20
领券