借鉴自强大的 google button
.
mvc 分解:
总体架构:
Model and control :
不涉及 ui 渲染,用来表示按钮的实质,按钮具备以下数据属性:
content : 按钮显示值
value : 按钮的内在存储值
tooltip : 按钮的鼠标掠过(得到焦点)提示
described-by
: wai-aria 可用性需要,按钮的具体描述
disabled : 按钮是否禁用
按钮的 control 层会触发一些事件,常用的就是 click (同时需要考虑键盘的可访问性,enter,space 也会触发click),并根据用户交互通知 view 层渲染 UI。
View :
专注于 UI 渲染,根据 control 层以及 model 层的状态来渲染对应的 UI。
最顶层抽象为 buttonrender
,为一个盒子 mixin 而成,不代表具体渲染器,只用于描述 ui 属性,以及指定 role 为 button
。
最简单的就是 nativerender
,仅仅使用内置 button 渲染,那么用户交互状态产生的 UI 变化由系统控制,并且可访问性方面也不需多做。
或者可以自己使用 div 渲染自己的 button ( cssrender
),省事的话是单层 div
通过css3控制在除ie<9下的按钮圆角,还需要根据control层同步自己渲染的ui。
1. focus/blur :渲染/取消 focus 样式。
2.mousedown/up : 渲染/取消 active 样式,并更新 aria-pressed
增强可访问性。
3.mouseenter/leave : 渲染/取消 hover 样式。
4.disabled : 渲染/取消 disabled 样式,去除 tabindex(键盘导航不可达),更新 aria-disabled
也可以使用双层 div 在所有浏览器下模拟圆角 ( customrender
)
customrender 和 cssrender 的不同之处主要在于,初始渲染时生成双层 div 即可:
.outer { border-width: 1px 0;}
.inner {
margin: 0 -1px;
border-width: 0 1px;
}
<div class='outer'>
<div class='inner'>
</div>
</div>
另一点就是需要通过 aria-labelledby
指定按钮的真正内容所在节点(最内层),其他都是纯粹装饰!
demo :
customed button for kissy
refer :
button role 在可访问性中的位置
- 大小: 61 KB
- 大小: 18.4 KB
分享到:
相关推荐
基于MVC模式的旅游管理与推广系统设计和实现4800字.docx基于MVC模式的旅游管理与推广系统设计和实现4800字.docx基于MVC模式的旅游管理与推广系统设计和实现4800字.docx基于MVC模式的旅游管理与推广系统设计和实现...
基于MVC框架下房产营销管理系统的设计与实现.docx基于MVC框架下房产营销管理系统的设计与实现.docx基于MVC框架下房产营销管理系统的设计与实现.docx基于MVC框架下房产营销管理系统的设计与实现.docx基于MVC框架下...
JavaWeb课设基于MVC设计模式实现的图书馆系统源码+设计报告.zipJavaWeb课设基于MVC设计模式实现的图书馆系统源码+设计报告.zipJavaWeb课设基于MVC设计模式实现的图书馆系统源码+设计报告.zipJavaWeb课设基于MVC设计...
精通struts基于mvc的java web设计与开发 孙卫琴
精通Struts:基于MVC的JavaWeb设计与开发(孙卫琴)
"基于MVC模式的网上书店设计与实开题报告" 本文主要介绍基于MVC模式的网上书店设计与实开题报告,旨在设计和实现一个基于MVC模式的网上书店管理系统。该系统分为七大模块:信息管理模块、用户管理模块、图书管理...
精通struts.基于MVC的.java.web设计与开发.pdf 高清下载
基于MVC实现的门禁管理系统+毕业设计+课程设计+源码 基于MVC实现的门禁管理系统+毕业设计+课程设计+源码 基于MVC实现的门禁管理系统+毕业设计+课程设计+源码 基于MVC实现的门禁管理系统+毕业设计+课程设计+源码 ...
和售后服务等,采用MVC模式开发购物网,可以方便地实现系统的职能分工。 Model层实现系统中的业务逻辑,View层用于与用户的交互,Controller层是 Model与View之间沟通的桥梁,它可以分派用户的请求并选择恰当的视图...
基于MVC的超市管理系统的设计及实现
博客(BLOG)是目前互联网上流行的信息发布交流工具。本文采用 MVC模式设计实现了 一个典型的博客系统,对系统的体系结构进行了详细的阐述,并给出了相应的实现模型,该 系统具有高效、稳定、易维护等特点。
基于MVC模式的校园BBS系统的设计与实现.pdf
精通struts.基于MVC的.java.web设计与开发.pdf 精通struts.基于MVC的.java.web设计与开发.pdf
基于MVC的JavaWeb设计与开发源码
孙卫琴《精通Struts基于MVC的Java_Web设计与开发》电子版[1].part3.rar 学习STRUTS的不要错过啊。
本文就该系统进行分析和...该系统主要利用了JSP强大的网络数据库访问技术,与SQL SERVER 的强大的数据库功能来实现主要功能。系统设计并实现了学生选报课程,教师给接受学生所报课程并给学生打分、管理员后台管理的功能。
精通Struts基于MVC的Java Web设计与开发
《精通struts基于mvc的java web设计与开发(高清版)》第二卷,共五卷,把五卷都下下来放在同一文件夹下然后解压就可以。
基于MVC模式,数据库用的是ACCESS。有添加删除功能等操作。