减小字体
增大字体- ·上一篇文章：Ext.js 本地化
- ·下一篇文章：Ext.js 调试代码
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → Extjs → 文章内容
Ext.js 可访问性
由 star333 创建，youj 最后一次修改 2016-12-28 什么是可访问性？一般来说，可访问性意味着可用性，内容可访问意味着内容可用。在软件术语中，应用程序可访问意味着应用程序可用于所有人。 这里所指的是残疾人，视障者一次或使用屏幕阅读器的人，使用计算机或那些喜欢用键盘而不是使用鼠标的所有导航。可访问的应用程序称为ARIA（可访问富互联网应用程序）。Ext JS中的辅助功能:Ext JS旨在牢记这一点，它应该与所有键盘导航工作。它已内置标签索引和聚焦能力，它始终是默认开启，所以我们不需要添加任何属性来启用此功能。此功能允许所有键盘启用的组件在标签页插入时与用户交互。 像我们可以使用tab移动到下一个组件，而不是鼠标移动该组件。 同样，我们可以移动+标签向后移动，然后输入键盘进行点击等。焦点样式和选项卡:当使用击键进行制表时，Focus将内置在Extjs中。下面的示例显示了当焦点随着制表符改变时如何改变样式。<!DOCTYPE html><html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet" /> <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Button', { renderTo: Ext.getElementById('button1'), text: 'Button1', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 1 is clicked'); } } }); Ext.create('Ext.Button', { renderTo: Ext.getElementById('button2'), text: 'Button2', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 2 is clicked'); } } }); Ext.create('Ext.Button', { renderTo: Ext.getElementById('button3'), text: 'Button3', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 3 is clicked'); } } }); }); </script> </head> <body> <p>Please click the button to see event listener:</p> <span id="button3"/> <span id="button2"/> <span id="button1"/> </body></html>要查看效果使用标签从下一个按钮和Shift +选项卡向后移动使用输入并看到焦点按钮的相关警报将弹出ARIA主题:ExtJS为视障人士提供主题咏叹调。这里的例子显示的咏叹调话题更容易为视障者。下面的示例显示了Aria主题:<!DOCTYPE html><html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css" rel="stylesheet" /> <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script> <script type="text/javascript"> Ext.require([ 'Ext.grid.*', 'Ext.data.*' ]); // Creation of data model Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] }); Ext.onReady(function(){ // Store data var myData = [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; // Creation of first grid store var firstGridStore = Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: myData }); // Creation of first grid var firstGrid = Ext.create('Ext.grid.Panel', { store : firstGridStore, columns : [{ header: "Student Name", dataIndex: 'name', id : 'name', flex: 1, sortable: true },{ header: "Age", dataIndex: 'age', flex: .5, sortable: true },{ header: "Marks", dataIndex: 'marks', flex: .5, sortable: true }], stripeRows : true, title : 'First Grid', margins : '0 2 0 0' }); // Creation of a panel to show both the grids. var displayPanel = Ext.create('Ext.Panel', { width : 600, height : 200, layout : { type: 'hbox', align: 'stretch', padding: 5 }, renderTo : 'panel', defaults : { flex : 1 }, items : [ firstGrid ] }); }); </script> </head> <body> <div id = "panel" > </div> </body></html>这将产生以下结果，您可以使用选项卡和鼠标上下键移动焦点在网格上，为视障人士准备。这是ExtJS内置主题和聚焦的方式，使任何人都可以轻松访问。
Ext.js 可访问性
