ARIA 实践指南（1）

编者按：本文作者：安佳，360 搜索事业部的前端开发工程师，W3C CSS 工作组成员。

ARIA

ARIA，Accessible Rich Internet Applications，可访问的富 Internet 应用程序。

ARIA 属于可访问性语义的范畴。从功能上来说，ARIA 的 roles、states 和 properties 类似于辅助技术的 CSS。对屏幕阅读器而言，ARIA 控制着它们的非视觉体验的渲染。

举个例子：这段 HTML 代码

<button>保存button>

屏幕阅读器会读成：

如果按钮是用标签模拟的，即：

<span>保存span>

此时，屏幕阅读器就不认识它了。若想告诉屏幕阅读器这个 HTML 元素也是一个“按钮”，则需要指定元素的 ARIA role。如下：

<span tabindex="0"

      role="button">保存span>

此时，屏幕阅读器也会读成：

我们注意到，HTML 代码里还有一个属性tabindex="0"，它表示该元素是可聚焦的，是可以通过键盘访问到的（更多内容请查阅 tabindex）。

与此相比，保存没写tabindex="0"却可以被键盘访问到，也可以被屏幕阅读器识别，这是因为 HTML 内置了这些功能。自带键盘可访问性的标签有、、以及表单元素。键盘可访问包括按 tab 键能让页面中的元素获得焦点、按 Return/Enter 键能激活该元素、表单元素在获得焦点时按方向键可以上下切换选项。

我们要做的

所以，在使用 ARIA 时，我们要做的就是：

• 确保可访问性语义，让屏幕阅读器能认识该元素，即给 HTML 标签指定合适的 ARIA 的 role、state 及相关的 properties。这部分是纯 HTML 的

• 确保键盘可访问性，为每个 ARIA role 定义预期的行为，即管理键盘焦点、提供键盘交互。这部分是 JS 和 HTML 的

作为《ARIA 实践指南》系列文章的第一篇，本文就先介绍两种最基本的控件：链接和按钮。

链接

role="link" 提供一个超链接，可以是其它页面、网页内锚点、文件、邮箱、电话等。

键盘交互：

• enter：链接跳转，并将焦点移到链接目标处

在日常开发中，一般不用其它 HTML 标签去模拟超链接，而是直接使用原生的，这是因为浏览器一般都会自带一些有价值的功能，比如在新窗口中打开目标、将目标URL复制到系统剪贴板等。

考虑到使用 ARIA 模拟链接的场景少之又少，此处就不展开介绍了。

按钮

role="button" 允许用户触发一个事件或者操作，比如提交表单、打开对话框、执行删除操作。如果激活按钮是打开对话框，那按照惯例，按钮的文案后面常跟着“...”，比如“另存为...”，文件的“浏览...”。

除了普通按钮之外，ARIA 还支持另外两种类型的按钮：

• 切换按钮：它有两种状态“开启-关闭”。若按钮设置了状态 aria-pressed，那么辅助技术会视此按钮为切换按钮。当切换按钮的状态发生变化时，建议按钮对应的 label 别变；如果 label 会发生变化，那就可以不写aria-pressed了

• 菜单按钮：如果按钮的 aria-haspopup 属性设置成了menu或者true，那么辅助技术会视此按钮为菜单按钮（会在后续章节里介绍）

ARIA 相关：

• role="button"

• 按钮的标签，默认取按钮上的文本。还可以通过这两种方式设置

  • aria-label="labelText"

  • aria-labelledby="IDREF"

• 按钮的功能描述，aria-describedby="IDREF"

• aria-disabled="true" 表示按钮禁用

• aria-pressed="true|false" 表示是切换按钮

如果按钮是

或模拟的，则还需要设置tabindex="0"；如果是用没有href属性的模拟的，也需要设置tabindex="0".

键盘交互：

• 当按钮获得焦点时，按space键或者enter键激活按钮

• 当按钮被激活之后，根据具体执行的操作类型来设置焦点。比如：

  • 如果关闭了对话框之后，功能被逻辑引到了另外一个元素上，比如“确认关闭”当前页面，那么焦点会逻辑移动到一个新上下文

  • 如果是打开了个对话框，则焦点将在对话框内部移动（“对话框”会在后续的文章里单独介绍）

  • 如果是关闭了个对话框，则焦点通常会返回打开此对话框的按钮上，比如“取消”按钮

  • 如果还在当前的上下文里，则焦点通常保留在按钮上（比如“重新计算”按钮）

  • 如果上下文会更改，比如“下一步”，则通常将焦点移动到该操作的起点

  • 如果使用快捷键激活按钮，则焦点通常保留在激活快捷键的上下文中

例子1：普通按钮

用

模拟一个打印按钮

<div tabindex="0"

     role="button"

     id="btnPrint">打印页面div>

在 HTML 里设置了tabindex="0"，指定了 ARIA 的 role="button"，确保屏幕阅读器能识别该元素。

键盘交互，需要支持按space键和enter键能触发打印对话框。由于打印对话框是浏览器自带的，所以此时，我们就不用手动管理对话框打开之后键盘焦点的移动行为了。

JS 代码如下：

let btnPrint = document.getElementById('btnPrint')

// 鼠标访问：click

btnPrint.addEventListener('click', () => {

    window.print()

})

// 键盘访问：keydown

btnPrint.addEventListener('keydown', (e) => {

    switch(e.keyCode){

        case 32: // space

            e.preventDefault() // 默认会滚动页面

            break;

        case 13: // enter

            e.preventDefault()

            window.print() // enter 键的激活时机是在 keydown

            break;

    }

})

// 键盘访问：keyup

btnPrint.addEventListener('keyup', (e) => {

    // space 键，

    if(e.keyCode === 32){

        e.preventDefault()

        window.print() // space 键的激活时机是在 keyup

    }

})

此时，按space键或者enter键，均可打开打印对话框。且焦点会默认定位在对话框里的某个可聚焦元素上，具体定位到哪个元素是由对话框自己管理的。在打印对话框里，焦点默认定位在了“Save”按钮上（:focus时有蓝色的box-shadow）。

例子2：切换按钮

用模拟一个静音按钮，HTML 和 CSS 代码如下：

<style>

    #btnMute {

        display: inline-block;

        padding: .3em .8em .4em 2em;

        border: 1px solid;

        background-repeat: no-repeat;

        background-position: .8em center;

        background-size: auto 1em;

    }

    #btnMute[aria-pressed="false"] {

        background-image: url(https://s4.ssl.qhres.com/static/ceaad449f261254b.svg);

    }

    #btnMute[aria-pressed="true"] {

        background-image: url(https://s1.ssl.qhres.com/static/f991a555e87bdbdd.svg);

    }

style>




<span tabindex="0"

      role="button"

      aria-pressed="false"

      id="btnMute">静音span>

以上代码，在 HTML 里给元素设置了三个属性

• tabindex="0" 元素可聚焦，也让屏幕阅读器能捕获到它

• role="button" 告诉屏幕阅读器，它是一个按钮

• aria-pressed="false" 告诉屏幕阅读器，它是一个切换按钮。初始状态，未开启

当aria-pressed="false"时，UI 和 屏幕阅读器的阅读文案分别是：

当aria-pressed="true"时，分别是：

接下来，就是编写 JS，以让按钮支持space键和enter键。代码如下：

let btnMute = document.getElementById('btnMute')

// 鼠标访问：click

btnMute.addEventListener('click', toggleMutePressed)

// 键盘访问：keydown

btnMute.addEventListener('keydown', (e) => {

    switch(e.keyCode){

        case 32:

            e.preventDefault()

            break;

        case 13:

            e.preventDefault()

            toggleMutePressed()

            break;

    }

})

// 键盘访问：keyup

btnMute.addEventListener('keyup', (e) => {

    if(e.keyCode === 32){

        e.preventDefault()

        toggleMutePressed()

    }

})

function toggleMutePressed(){

    let isPressed = btnMute.getAttribute('aria-pressed') === 'true'

    btnMute.setAttribute('aria-pressed', isPressed ? 'false' : 'true')

}

此时，当按space键或者enter键时，静音按钮会在“开启-关闭”这两种状态间来回切换。

小结

本文介绍了：

1. 站在开发的角度，在使用 ARIA 时，需要关注的两件事：

• 可访问性语义：给元素指定合适的 ARIA 的 role、state 和相关 properties（纯 HTML）

• 键盘可访问性：管理键盘焦点、提供键盘交互（JS 和 HTML）

链接

• 键盘交互：响应enter键

按钮：通过两个例子（普通按钮、切换按钮）介绍了以下特性

• 角色 role="button"

• 状态 aria-pressed="false"和aria-disabled="true"

• 属性 aria-label="text"和aria-labelledby="IDREF"、aria-describedby="IDREF"

• ARIA 相关

• 焦点管理：tabindex="0"、按钮被激活后的焦点设置（取决于具体的操作）

• 键盘交互：响应enter键和space键

主要参考

https://www.w3.org/TR/wai-aria-practices-1.1

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

你可能感兴趣的:(ARIA 实践指南（1）)

• DeepSeek爆火背后：AI如何助力GIS发展 GIS前端嘉欣 前端GISwebgis
  2025年的春节，一款名为DeepSeek的AI工具以“推理能力超群”“性价比碾压巨头”的标签火遍全网：日活用户突破3000万，微信搜索接入其长思考模式，三大电信运营商全面部署其开源框架。这场由低成本+高性能+开源驱动的技术革命，不仅让AI开发门槛大幅降低，更预示着一个全新的产业趋势——AI与GIS的深度融合，正在重塑城市、环境和商业的底层逻辑。012025年，AI+GIS深度融合的四大趋势1.城
• GUI编程（window系统→Linux系统） 诚信爱国敬业友善 心得linuxpythongui
  最近有个项目需要将windows系统的程序往Linux系统上面移植，由于之前程序没有考虑过多平台兼容的问题，导致部分功能不可用以下是对近期遇到的问题的总结，以及相应的解决方案和经验分享。1.Python模块安装与管理在Linux系统中，安装和管理Python模块时可能会遇到权限问题或依赖冲突。安装模块：使用pip安装模块时，建议使用--user选项，避免需要管理员权限：bash复制pipinsta
• 网络安全常见十大漏洞总结（原理、危害、防御） 程序媛西米 网络安全数据库oracle网络web安全计算机网络安全安全
  一、弱口令【文末福利】产生原因与个人习惯和安全意识相关，为了避免忘记密码，使用一个非常容易记住的密码，或者是直接采用系统的默认密码等。危害通过弱口令，攻击者可以进入后台修改资料，进入金融系统盗取钱财，进入OA系统可以获取企业内部资料，进入监控系统可以进行实时监控等等。防御设置密码通常遵循以下原则：（1）不使用空口令或系统缺省的口令，为典型的弱口令；（2）口令长度不小于8个字符；（3）口令不应该为连
• 华为昇腾服务器部署DeepSeek模型实战 gzroy 人工智能语言模型
  在华为的昇腾服务器上部署了DeepSeekR1的模型进行验证测试，记录一下相关的过程。服务器是配置了8块910B3的显卡，每块显卡有64GB显存，根据DeepSeekR1各个模型的参数计算，如果部署R1的Qwen14B版本，需要1张显卡，如果是32B版本，需要2张，Llama70B的模型需要4张显卡。如果是R1全参数版本，则需要32张显卡，也就是4台满配的昇腾服务器。这里先选择32B的模型进行部署
• Mysql学习笔记-Mysql基础进阶 少年无为 MysqlMysql数据库多表查询数据库备份Mysql查询
  #知识点1.DQL:查询语句1.排序查询2.聚合函数3.分组查询4.分页查询2.约束3.多表之间的关系4.范式5.数据库的备份和还原#DQL:查询语句1.排序查询*语法：orderby子句*orderby排序字段1排序方式1，排序字段2排序方式2...*排序方式：*ASC：升序，默认的。*DESC：降序。*注意：*如果有多个排序条件，则当前边的条件值一样时，才会判断第二条件。2.聚合函数：将一列数
• 银行排队问题之单队列多窗口服务[天梯赛 -- 栈和队列] 苏慕TRYACE 算法数据结构c++
  文章目录题目描述思路AC代码题目描述输入样例9020115161210105103301831253123输出样例参考文章思路队列模拟存储结构：使用结构体，存储每一个客户的到达时间和处理时间==（最大为60，大于60的，按60处理）==；用两个数组分别存储每一个窗口的办理人数和该窗口结束上一次处理的时间点具体流程：由于题目给定的顾客顺序是按照时间先后，因此我们顺序处理即可1.依次遍历每一个窗口，用
• ADC（模数转换器）与DAC（数模转换器）详解：从基础到应用示例 楼台的春风 嵌入式开发STM32嵌入式c语言mcu自动驾驶嵌入式硬件stm32物联网
  ADC（模数转换器）与DAC（数模转换器）详解：从基础到应用示例目录ADC（模数转换器）与DAC（数模转换器）详解：从基础到应用示例引言一、ADC（模数转换器）1.ADC的基本概念2.ADC的工作原理3.ADC的主要类型4.ADC的技术指标5.ADC的应用场景6.ADC在嵌入式系统中的使用案例二、DAC（数模转换器）1.DAC的基本概念2.DAC的工作原理3.DAC的主要类型4.DAC的技术指标5
• 嵌入式学习DAY28 --- 线程、同步和互斥问题、如何实现同步和互斥？ 楼台的春风 嵌入式学习多线程c语言嵌入式linuxubuntu
  嵌入式入门学习笔记，遇到的问题以及心得体会！DAY28概述：一、线程二、同步和互斥问题三、如何实现同步四、如何实现互斥笔记：一、线程1、什么是线程：（1）线程是轻量级的进程（2）线程存在于进程内，不能独立存在（3）线程参与CPU调度，进程是系统资源分配最小单位，线程是系统调度的最小单位（4）在单核CPU中，多线程并发属于伪并发，但是不牵扯虚拟地址空间的切换，所以开销比进程间切换要小很多（5）在多核
• 内外网隔离文件传输解决方案｜系统与钉钉集成+等保合规，安全提升70% CSTechAI 钉钉安全中间件安全架构
  内外网隔离文件传输解决方案｜系统与钉钉集成+等保合规，安全提升70%##一、背景与痛点在内外网隔离的企业网络环境中，员工与外部协作伙伴（如钉钉用户）的文件传输面临以下挑战：1.**安全性风险**：内外网直连可能导致病毒传播、数据泄露。2.**操作繁琐**：传统方式需频繁切换网络环境，降低工作效率。3.**审计缺失**：缺乏文件传输的完整日志记录，难以追溯责任。**系统**通过智能中转架构，在保障网
• 标准制修订信息管理系统：推动企业标准化管理的数字化转型 CSSoftTechAI 运维零售
  在数字化转型的浪潮中，标准化管理作为企业高质量发展的基石，正面临着前所未有的机遇与挑战。我们基于多年行业实践经验，推出标准制修订信息管理系统，助力企业实现标准化工作的全生命周期管理与全价值链共享，推动标准化管理从“传统分散”向“智能协同”转型。##行业痛点：标准化管理的挑战1.标准体系不完善：缺乏动态化管理能力，难以适应快速变化的业务需求。2.管理分散，信息孤岛：标准化工作分散在不同部门，无法实现
• 【Unity 监狱内部环境资产包】Jails Interior 提供了完整的监狱内部结构，包括牢房、走廊、审讯室、看守室等，并配备了大量高质量的家具、铁栏、门窗和其他装饰，快速搭建沉浸式的监狱场景 Unity游戏资源学习屋 Unity插件
  JailsInterior是一款专为Unity设计的监狱内部环境资产包，适用于犯罪题材、恐怖游戏、警察模拟、逃脱解谜等类型的游戏。该插件提供了完整的监狱内部结构，包括牢房、走廊、审讯室、看守室等，并配备了大量高质量的家具、铁栏、门窗和其他装饰，帮助开发者快速搭建沉浸式的监狱场景。详细介绍1.逼真的监狱内部环境提供完整的监狱场景，包括牢房、走廊、审讯室、警卫室等，能够用于各类犯罪、逃脱、警察题材的游
• Jmeter 性能-稳定性测试TPS计算 软件测试媛 软件测试技术分享自动化测试jmeter软件测试功能测试
  1、普通计算公式TPS=总请求数/总时间1按照需求得到基础数据，比如在去年第xxx周，某平台有5万的浏览量那么总请求数我们可以估算为5万（1次浏览都至少对应1个请求）总请求数=50000请求数总时间：由于不知道每个请求的具体时间，按照普通方法，可以按照一天的时间进行计算总时间=1天=1*24小时=24*36001秒套入公式可得：TPS=50000/24*3600秒=0.58tps1结论：按照普通计
• Python从0到100（三十九）：数据提取之正则（文末免费送书） 是Dream呀 pythonmysql开发语言
  前言：零基础学Python：Python从0到100最新最全教程。想做这件事情很久了，这次我更新了自己所写过的所有博客，汇集成了Python从0到100，共一百节课，帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识，成为学习学习和学业的先行者！欢迎大家订阅专栏：零基础学Python：Python从0到100最新
• 基于JavaSpringboot+Vue实现前后端分离房屋租赁系统 网顺技术团队 成品程序项目vue.js前端javascript课程设计springbootmybatis
  基于JavaSpringboot+Vue实现前后端分离房屋租赁系统作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基于JavaSpringboot+
• Jmeter如何计算TPS qq_492448446 Jmeterjava
  1.在jmeter中计算出接口请求的个数1175+1172+1172+174+200+416+384+1174=58672.计算接口平均响应时间计算每个接口的请求次数乘以平均响应时间，所有接口相加，然后除以所有接口的数量总和，得到接口的平均响应时间(1175*1819+1172*1207+1172*772+174*1233+200*1213+416*592+384*595+1174*1669)/(
• DeepSeek预测25考研分数线 GIS前端嘉欣 考研前端GISwebgis
  25考研分数马上要出了。目前，多所大学已经陆续给出了分数查分时间，综合往年情况来看，每年的查分时间一般集中在2月底。等待出成绩的日子，学子们的心情是万分焦急，小编用最近爆火的“活人感”十足的DeepSeek帮大家预测一下25考研的分数线。一起来看看吧~影响国家线的关键因素1）报考人数2023年考研报名人数为474万（首次下降），2024年回升至438万（官方未公布，网传数据存疑）。若2025年报考
• 接入DeepSeek后，智慧园区安全调度系统的全面提升 Guheyunyi 安全数据分析python智慧城市人工智能信息可视化
  随着人工智能技术的快速发展，智慧园区的安全管理正逐步向智能化、自动化方向迈进。DeepSeek作为先进的人工智能解决方案，为智慧园区安全调度系统注入了强大的技术动力。通过接入DeepSeek，智慧园区安全调度系统在多个方面实现了显著提升，进一步增强了园区的安全性、管理效率和用户体验。1.智能化监控：从被动到主动传统的监控系统主要依赖人工查看视频画面，容易出现漏检或误判。接入DeepSeek后，智慧
• docker部署kafka（单节点） + Springboot集成kafka wsdhla dockerkafkaspringbootzookeeper
  环境：操作系统：win10Docker：DockerDesktop4.21.1(114176)、DockerEnginev24.0.2SpringBoot：2.7.15步骤1：创建网络：dockernetworkcreate--subnet=172.18.0.0/16net-kafka步骤2：安装zk镜像dockerpullzookeeper:latestdockerrun-d--restarta
• mysql实时同步到es 数据库
  测试了多个方案同步，最终选择oceanu产品，底层基于Flinkcdc1、实时性能够保证，binlog量很大时也不产生延迟2、配置SQL即可完成，操作上简单下面示例mysql的100张分表实时同步到es，优化备注等文本字段的like查询创建SQL作业CREATETABLEfrom_mysql(idint,cidintNOTNULL,gidbigintNOTNULL,contentvarchar,c
• Python学习心得两大编程思想 lifegoesonwjl python开发语言pycharm前端c语言
  一、两大编程思想：1.面向过程：功能上的封装典型代表：C语言2.面向对象：属性和行为上的封装典型代表：Python、Java二、面向过程与面向对象的异同点：1.区别：面向过程：事物比较简单，可用线性的思维去解决面向对象：事务比较复杂，使用简单的线性思维无法解决2.共同点：（1）面向过程和面向对象都是解决实际问题的一种思维方式；（2）二者相辅相成，并不是对立的；（3）解决复杂问题，通过面向对象方式便
• HarmonyOS Next智能家居控制系统的模型转换与数据处理实战 harmonyos
  本文旨在深入探讨基于华为鸿蒙HarmonyOSNext系统（截止目前API12）构建智能家居控制系统中模型转换与数据处理技术的实战应用，基于实际开发经验进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。一、智能家居系统需求与技术选型（一）功能需求分析设备状态监测需求智能家居控制系统需要实时监测各种智能设
• HarmonyOS Next数据处理与模型训练优化 harmonyos
  本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）中数据处理与模型训练优化相关技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。一、数据处理对模型训练的重要性（一）关键作用强调在HarmonyOSNext的模型训练世界里，数据就如同建筑的基石，而数据处
• 「2024 年度技术精华盘点」IvorySQL & PostgreSQL 技术干货全解析！ 数据库
  2024年，IvorySQL公众号持续输出高质量技术内容，涵盖PostgreSQL核心技术解析和IvorySQL创新实践两大方向。无论您是数据库领域的初学者，还是经验丰富的开发者，这些干货文章都能为您带来新的启发与实用价值。现在，让我们一起回顾这些精彩内容，探索数据库技术的无限可能！PostgreSQL技术干货PostgreSQL16中的新增功能：双向逻辑复制想要在多主数据库间实现无缝同步？Pos
• 信息获取、扫描与服务识别、漏洞验证、嗅探攻击、代理与隧道、metasploit渗透攻击等 Utopia.️ web安全安全网络
  1.信息获取信息获取是渗透测试和安全评估的第一步，主要目的是收集目标系统的各种信息。这些信息可以帮助确定攻击面和潜在的安全漏洞。技术和工具：域名信息：使用whois查询域名注册信息。DNS查询：使用nslookup或dig获取DNS记录，包括A记录、MX记录等。网络扫描：使用nmap或Masscan扫描目标网络，收集IP地址和开放端口信息。公开信息：通过搜索引擎、社交媒体、公司网站等公开资源获取目
• c和c++的区别是 Utopia.️ c++
  digitalRead处理的是数字信号，只能返回HIGH或LOW。analogRead处理的是模拟信号，将模拟电压值转换为10位数字值（0到1023），可以用来测量电压的实际值或模拟信号的强度。c和c++的区别是C和C++是两种编程语言，它们有许多共同点，但也有重要的区别。以下是它们的主要区别：1.语言类型C:是一种过程式编程语言。程序的执行依赖于函数和过程，代码是按顺序执行的。C++:是一种面向
• 【Linux】删除Conda虚拟环境 不是伍壹 Linuxlinuxconda运维
  1、查看当前系统的conda虚拟环境condainfo--envscondaenvlist2、创建虚拟的环境condacreate-n（你的环境名字）python=（你需要的版本号，如（3.7,3.8,3.10））3、查看安装了哪些包condalist4、删除虚拟环境condaremove-nname--all5、删除虚拟环境中的包condaremove--name$（需要删除的环境名字）$（需要
• Nginx配置反向代理不成功的原因(Docker安装版) 程序员迪迦 项目实战nginxdockerlinux
  问题背景在linux服务器中使用docker下载了Nginx，然后根据网上的教程来配置反向代理的时候发现80端口无法访问server块的配置server{listen80;server_name127.0.0.1;#access_log/var/log/nginx/host.access.logmain;location/{proxy_passhttp://127.0.0.1:8080;#inde
• cocos creator从零开发简单框架(12)-代码生成单色Sprite cocos
  在写Panel前，先写个方法生成单色Sprite，这样当碰到需要单色Sprite的时候不需要在编辑器拖拽和代码动态加载资源。编辑framework/scripts/AppUtil.ts，添加newSpriteNode方法。//生成默认白色100x100大小Sprite(单色)节点publicstaticnewSpriteNode(name:string='newSpriteNode'):cc.No
• cocos creator从零开发简单框架(14)-Panel遮罩 cocos
  遮罩相关属性编辑framework/scripts/view/PanelMgr.ts，增加遮罩相关成员变量及初始化方法。//所有面板privatestatic_panels:Map=newMap()privatestatic_maskName='_mask'privatestatic_maskPrefab:cc.Nodepublicstaticinit(){this._panels.clear()
• cocos creator从零开发2048(06)-格子移动逻辑和键盘控制移动 cocos
  编辑scripts/Game.ts，添加_moving属性标识当前是否移动中。privategridsReversed:Grid[][]=[]private_moving=false添加move方法移动格子。privatemove(grids:Grid[]){letlastIdx=grids.length-1letlastNum=grids[lastIdx].numfor(leti=grids.l
• 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
  前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
• 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
  下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
• web缓存基础：术语、http报头和缓存策略 dalan_123 Web
  对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
• crontab 问题 周凡杨 linuxcrontabunix
    一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
• 让tomcat支持2级域名共享session g21121 session
  tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
• web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
    ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
• linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
  #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
• 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
  如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
• Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
  来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
• 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
      创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
• 多线程基础知识 bijian1013 java多线程threadjava多线程
  一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
• fastjson简单使用实例 bijian1013 fastjson
  一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
• 【RPC框架Burlap】Spring集成Burlap bit1129 spring
  Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
• 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
  1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
• linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
  linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
• java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
  public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
• linux 系统相关命令 candiio linux
  系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
• [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
       一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
• 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
  几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
• java乱码问题 dashuaifu java乱码问题js中文乱码
  swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
• cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
  cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
• [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
  2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
• Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
  转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
• 手势滑动销毁Activity gundumw100 android
  老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
• JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
  效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
• Kafka Rest : Confluent kane_xie kafkaRESTconfluent
  最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
• Calender不是单例 men4661273 单例Calender
           在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
• 线程内存和主内存之间联系 qifeifei java thread
  1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
• schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
  原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
• erlang 部署 wudixiaotie erlang
  1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.