无障碍条在vue中的使用
发布日期:2022-03-09 00:49:10 浏览次数:55 分类:技术文章

本文共 10766 字,大约阅读时间需要 35 分钟。

2021年10月13号

无障碍条的使用 

列子网址:http://www.jstide.com/

官网和介绍:https://www.rrbay.com/

无障碍条代码网址:https://gitee.com/tywAmblyopia/ToolsUI

Git获取无障碍条代码(直接拉取):git clone https://gitee.com/tywAmblyopia/ToolsUI.git

在vue中使用(此处cms就是vue项目)

注意:只有conyou文件才是无障碍条 其余的无关

给cms项目添加无障碍条 1.拉取无障碍条代码 2.把拉取的conyou文件放到cms项目中的public文件中 3.在vue中点击图标(就是点击那个按钮才显示无障碍条)点击到时候直接跳转到conyou文件中的default.html页面(新的窗口)代码:window.open(‘跳到default.html的路径’)就完成了  此事你的default.html页面就会把vue项目嵌套到里面(放大 缩小 字体 颜色 显示器 全屏)都可以了。

遇见的问题

1.  就是跳转路由的路径不对 我的是:window.open(‘static(你们的是conyou)/default.html’) 这里我把conyou文件夹名字改成static 因为vue3.0版本静态页面只能放到static文件中还有static文件只能放public中不能乱 注意:路径不能加/ ./ ../ // (我的不能加)

2. 遇到的问题就是跳转到default.html页面有些图片没有加载出来 就是default.html文件中的id和图片不对应 改一下id名字就好了。

这里是改好的(害怕你们不会改 可以直接复制到default.html中):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>信息无障碍公共服务平台 - 无障碍工具条 - 无障碍改造咨询</title><meta name="keywords" content="信息无障碍,无障碍改造咨询,网站无障碍,无障碍工具条,无障碍辅助工具,无障碍检测,诊断及差距分析,指南及评测标准,无障碍设计,APP无障碍,盲人上网,盲人工程师,信息无障碍产品联盟,湖北太阳湾科技有限公司"><meta name="description" content="湖北太阳湾科技有限公司是中国最早专注于信息无障碍的专业机构。为推动中国信息无障碍环境建设进程,公司组建了一支由精通IT和信息无障碍专业知识、同时是障碍群体组成的信息无障碍专家团队,提供专业信息无障碍测试、咨询、优化服务,以实现信息无障碍在执行层面的可行性。qq:308463776"><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/soundmanager2.js" type="text/javascript"></script><script src="js/blue/CY-2.0.js" type="text/javascript"></script><link href="css/blue/CY-Tools.css" rel="stylesheet" type="text/css"></head><body><div id="rrbay_toolbar_div"><table align="center" cellpadding="0" cellspacing="0" class="cy_toolbar_bg_table"><tr><td><table align="center" cellpadding="0" cellspacing="0" width="100%" class="rrbay_top"><tr class="rrbay_top_trtwo"><td></td><td align="center" valign="middle" id="T01_index" width="46px" tabindex="1" title="页面初始化功能,按shift+0初始化页面"><img src="images/blue/icon/home.png"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="45px" valign="middle" id="T02_help" tabindex="2" title="无障碍帮助说明,按shift+?打开帮助页面"><img src="images/blue/icon/help.png"></td><td align="center" width="45px" valign="middle" id="T03_close" tabindex="3" title="退出无障碍系统功能,按shift+esc退出无障碍系统"><img src="images/blue/icon/exit.png"></td><td class="rrbay_toolbar_line2"></td><td class="rrbay_toolbar_line3"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="45px" valign="middle" id="T040_back" tabindex="4" title="页面后退功能,按alt+←后退页面"><img src="images/blue/icon/dis_back.png"></td><td align="center" width="45px" valign="middle" id="T005_go" tabindex="5" title="页面前进功能,按alt+→前进页面"><img src="images/blue/icon/dis_forward.png"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="46px" valign="middle" id="T006_refresh" tabindex="6" title="刷新页面功能,按shift+1刷新页面"><img src="images/blue/icon/reflash.png"></td><td class="rrbay_toolbar_line2"></td><td class="rrbay_toolbar_line3"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="46px" valign="middle" id="T070_ruler" tabindex="7" title="十字辅助线功能,按shift+2打开或关闭辅助线"><img src="images/blue/icon/cursor.png"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="60px" id="T08_text" tabindex="8" title="纯文本,视图模式切换,按shift+3切换纯文本或视图模式"><img src="images/blue/icon/text.png"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="45px" valign="middle" id="T09_bigword" tabindex="9" title="放大页面字体,按alt +1页面放大"><img src="images/blue/icon/bigword.png"></td><td align="center" width="45px" valign="middle" id="T10_smallword" tabindex="10" title="缩小页面字体,按alt+2页面缩小"><img src="images/blue/icon/smallword.png"></td><td class="rrbay_toolbar_line2"></td><td class="rrbay_toolbar_line3"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="60px" valign="middle" id="T11_color" tabindex="11" title="页面配色功能,按shift+~选择一种页面风格"><img src="images/blue/icon/color.png"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="45px" valign="middle" id="T12_zoomAdd" tabindex="12" title="页面放大功能,按shift+4页面放大"><img src="images/blue/icon/enlarge.png"></td><td align="center" width="45px" valign="middle" id="T13_zoomSub" tabindex="13" title="页面缩小功能,按shift+5页面缩小"><img src="images/blue/icon/small.png"></td><td class="rrbay_toolbar_line2"></td><td class="rrbay_toolbar_line3"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="45px" valign="middle" id="T014_playSpeech" tabindex="14" title="声音开关功能,按shift+6打开或者关闭声音"><img src="images/blue/icon/dis_sound.png"></td><td width="16px" align="center" valign="middle" id="T14_sound" tabindex="15" title="声音选项功能"><img src="images/blue/icon/soundClick.png"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="45px" valign="middle" id="T015_pointerRead" tabindex="16" title="指读功能,按shift+7打开指读功能"><img src="images/blue/icon/point.png"></td><td align="center" width="45px" valign="middle" id="T016_continueRead" tabindex="17" title="连读功能,按shift+8打开连读或暂停功能"><img src="images/blue/icon/continuous.png"></td><td class="rrbay_toolbar_line2"></td><td class="rrbay_toolbar_line3"></td><td class="rrbay_toolbar_line2"></td><td align="center" width="60px" valign="middle" id="T17_displayScreen" tabindex="18" title="显示屏放大器功能,按shift+9打开或关闭显示屏放大器"><img src="images/blue/icon/screen.png"></td><td class="rrbay_toolbar_line1"></td><td align="center" width="46px" valign="middle" id="T18_fullScreen" tabindex="19" title="按下F11键可全屏浏览,再次按下可还原全屏状态"><img src="images/blue/icon/full_screen.png"></td><td></td></tr><tr class="rrbay_top_trthree"><td></td><td>首页</td><td></td><td>帮助</td><td>退出</td><td></td><td></td><td></td><td>后退</td><td>前进</td><td></td><td>刷新</td><td></td><td></td><td></td><td>光标</td><td></td><td>纯文本</td><td></td><td>大字</td><td>小字</td><td></td><td></td><td></td><td>配色</td><td></td><td colspan="2" id="cy_zoom_number">页面100%</td><td></td><td></td><td></td><td colspan="2">语音</td><td></td><td>指读</td><td>连读</td><td></td><td></td><td></td><td>显示屏</td><td></td><td>全屏</td><td></td></tr></table></td></tr></table></div><div id="cy_mousefollow_y" style="display:none;position:absolute;left:0;top:0;z-index:12000;width:100%;height:6px;font-size:6px"></div><div id="cy_mousefollow_x" style="display:none;position:absolute;left:0;top:0;z-index:12001;width:6px;height:100%;font-size:6px"></div><div id="cy_color_show_area"><table id="cy_color_table" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="cy_selected_color_icon" align="center" valign="middle" width="40px;" id="#000000_#ffffff"></td><td width="130" height="37" align="center" valign="middle" title="#ffffff" bgcolor="#ffffff" class="cy_color_table_td"><span title="#000000" style="color:#000">白底黑字蓝</span><a href="#" title="#0000ff" style="color:#00f">链接</a></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr><tr><td class="cy_selected_color_icon" align="center" valign="middle" width="40px;" id="#ffff00_#0000ff"></td><td width="130" height="37" align="center" valign="middle" title="#0000ff" bgcolor="#0000ff" class="cy_color_table_td"><span title="#ffff00" style="color:#ff0">蓝底黄字白</span><a href="#" title="#ffffff" style="color:#fff">链接</a></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr><tr><td class="cy_selected_color_icon" align="center" valign="middle" width="40px;" id="#000000_#fefecc"></td><td width="130" height="37" align="center" valign="middle" title="#fefecc" bgcolor="#fefecc" class="cy_color_table_td"><span title="#000000" style="color:#000">黄底黑字蓝</span><a href="#" title="#0000ff" style="color:#00f">链接</a></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr><tr><td class="cy_selected_color_icon" align="center" valign="middle" width="40px;" id="#ffff00_#000000"></td><td width="130" height="37" align="center" valign="middle" title="#000000" bgcolor="#000000" class="cy_color_table_td"><span title="#ffff00" style="color:#ff0">黑底黄字白</span><a href="#" title="#ffffff" style="color:#fff">链接</a></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr><tr><td class="cy_selected_color_icon" align="center" valign="middle" width="40px;" id="#other_#other"><img class="colorSelected" src="images/blue/icon/choose.png" border="0"></td><td width="130" height="37" align="center" valign="middle" title="#other" bgcolor="#other" class="cy_color_table_td"><span title="#other" style="color:#fff">页面原始配色</span></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr></tbody></table></div><div id="cy_sound_show_area"><table id="cy_sound_table" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center" valign="middle" id="cy_volumeAdd" class="cy_sound_table_td"><span>提高音量</span></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr><tr><td align="center" valign="middle" id="cy_volumeSub" class="cy_sound_table_td"><span>降低音量</span></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr><tr><td align="center" valign="middle" id="cy_speedAdd" class="cy_sound_table_td"><span>加快语速</span></td></tr><tr class="rrbay_start_line"><td height="2px"></td></tr><tr><td align="center" valign="middle" id="cy_speedSub" class="cy_sound_table_td"><span>减缓语速</span></td></tr></tbody></table></div><div id="cy_showscreen_marquee_hidden" style="display:none"></div><div id="cy_showscreen_div"><table id="cy_showscreen_table" cellpadding="0" cellspacing="0" border="0"><tr><td id="cy_showscreen_marquee" class="cy_showscreen_middle" align="center" valign="middle" width="99%"></td><td id="cy_showscreen_right" valign="top" width="100px"><table cellpadding="0" cellspacing="0" width="100%" border="0" id="cy_showscreen_feature_table" height="100"><tr><td colspan="4" align="right" valign="top"><img src="images/blue/screen/closed.png" id="cy_showscreen_close"></td></tr><tr class="cy_showscreen_feature_table_secondtr"><td width="10px">&nbsp;</td><td valign="bottom" align="right" height="50"><img id="screen_zh" src="images/blue/screen/icon/zh.png" width="49" height="42"></td><td valign="bottom" align="left"><img id="screen_tw" src="images/blue/screen/icon/tw.png" width="49" height="42"></td><td width="10px">&nbsp;</td></tr><tr class="cy_showscreen_feature_table_secondtr"><td width="10px">&nbsp;</td><td valign="top" height="50" align="right" colspan="2"><img id="screen_py" src="images/blue/screen/icon/py.png" width="98" height="39"></td><td width="10px">&nbsp;</td></tr></table></td></tr></table></div><div id="loading"><p>正在加载中...</p></div><iframe id="frameDisplay" name="frameDisplay" frameborder="0" src="#" scrolling="auto" οnlοad="bS.Frame.LoadComplete()"></iframe><a id="cy_history" style="display:none"></a></body></html><script src="js/wza-config.js" type="text/javascript"></script>

完结

转载地址:https://blog.csdn.net/m0_56938501/article/details/120749095 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:在ensp里用centos7做DHCP服务器
下一篇:css+js+html 实现翻书效果

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年04月06日 10时06分16秒