网站信息无障碍适老化工具,目前只有放大功能模块

提供直接进入适老化服务的网站快捷通道,目前功能只有大字块功能。

步骤一:引用js

<!--适老模式 -->
<script type="text/javascript" src="/canyou/js/jquery.min.js"></script>
<script type="text/javascript" src="/canyou/js/wza_elder.js"></script>

步骤二:引用css,长辈适老化样式,需要根据原网站的样式定制修改.

 <!--适老模式样式定制 -->
<link rel="stylesheet" href="/canyou/css/elder.css" type="text/css" />

步骤三:在原网站模板页面添加a标签,如下

<a id="wzaElder" class="wzaElder" style="display: inline-block;background: #ff9027;color: #fff !important;" href="javascript:void(0);">开始适老模式</a>

wza_elder.js 代码参考如下:

$(document).ready(function (a) {
    if (sessionStorage.getItem("elder") && sessionStorage.getItem("elder") == "开始适老模式") {
        $("#wzaElder").text("关闭适老模式")
        $("body").addClass("elderClass")
    } else {
        $("#wzaElder").text("开始适老模式")
        $("body").removeClass("elderClass")
    }
    $("#wzaElder").click(function () {
        if ($(this).text() == "开始适老模式") {
            $(this).text("关闭适老模式")
            sessionStorage.setItem("elder", "开始适老模式");
            $("body").addClass("elderClass")
        } else {
            $(this).text("开始适老模式")
            sessionStorage.setItem("elder", "关闭适老模式");
            $("body").removeClass("elderClass")
        }
    });
});

演示参考 : http://www.qqqao.com/index6.html


标签:信息无障碍 无障碍工具条 长辈模式 适老化