search

bmybbs / PrototypeDevManagement

1 stars 1 forks source link

实验项目 - 键盘快捷方式 #43

Open IronBlood opened 10 years ago

IronBlood commented 10 years ago

以下来自 @Liu-Ameng 同学的代码：

<html>
    <head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF8"/>
    <title>Menu</title>
    <script language="javascript">
        var menu_select = 1;
        var menu_max = 10;
        var $=function(id){
            return document.getElementById(id);
        }
        function doKeydown(e){
            var e = e||event;
            var currKey=e.keyCode||e.which||e.charCode;
            //alert(currKey);
            if(currKey == 38 || currKey == 75){
                if(menu_select>1){
                    menu_select = menu_select - 1;
                }
            }else if(currKey == 40 || currKey == 74){
                if(menu_select<10){
                    menu_select = menu_select + 1;
                }
            }   
            for(var i = 1;i<=menu_max;++i){
                if(i == menu_select){
                    $("m"+i).style.backgroundColor="#eeeeee";
                }else{
                    $("m"+i).style.backgroundColor="#aaaaaa";
                }
            }
        }
        document.onkeydown = doKeydown;
        </script>
    </head>
    <body>
        <div id="m1" style=" width:100px; height:20px; border:solid 1px black;">m1;</div>
        <div id="m2" style=" width:100px; height:20px; border:solid 1px black;">m2;</div>
        <div id="m3" style=" width:100px; height:20px; border:solid 1px black;">m3;</div>
        <div id="m4" style=" width:100px; height:20px; border:solid 1px black;">m4;</div>
        <div id="m5" style=" width:100px; height:20px; border:solid 1px black;">m5;</div>
        <div id="m6" style=" width:100px; height:20px; border:solid 1px black;">m6;</div>
        <div id="m7" style=" width:100px; height:20px; border:solid 1px black;">m7;</div>
        <div id="m8" style=" width:100px; height:20px; border:solid 1px black;">m8;</div>
        <div id="m9" style=" width:100px; height:20px; border:solid 1px black;">m9;</div>
        <div id="m10" style=" width:100px; height:20px; border:solid 1px black;">m10;</div> 
    </body>
</html>

目测基本的上下移动是可以执行的。增加一些场景：

  1. 一般文章的 div 容器比较高，多篇文章垂直排列的时候经常需要滚动屏幕。要求：假定初始化『活动的』div为首个div，位于页面的最上方。当向下拖动滚动条使得该div完全跑出页面的时候，下一个div被激活（也就是以前活动的变为非活动状态，而当前变为活动状态。以下激活含义相同）。
  2. 当鼠标滑过某个div的时候，该div被激活。
  3. 当仅有键盘操作的时候，向下激活某个div，其处于屏幕可见区域以外的位置，则应当触发屏幕滚动的效果，使其出现在屏幕可见区域内。
Liu-Ameng commented 10 years ago

完成了场景1和2，暂时放弃场景3.

<html>
    <head>
        <meta  http-equiv="Content-Type" content="text/html; charset=UTF8"/>
        <title>Menu</title>

        <script language="javascript">
            var menu_select = 1;
            var menu_max = 20;
            var menu_height = 20;
            var $=function(id){
                return document.getElementById(id);
            }
            Function.prototype.bind = function(){
                var __method = this;
                var arg = arguments;
                return function(){
                    __method.apply(window, arg);
                }
            }
            function drawMenus(){
                for(var i = 1;i<=menu_max;++i){
                    if(i == menu_select){
                        $("m"+i).style.backgroundColor="#eeeeee";
                    }else{
                        $("m"+i).style.backgroundColor="#aaaaaa";
                    }
                }
            }
            function doKeydown(e){
                var h = document.body.clientHeight;
                var e = e||event;
                var currKey=e.keyCode||e.which||e.charCode;
                if(currKey == 38 || currKey == 75){
                    if(menu_select > 1){
                        menu_select = menu_select - 1;
                         }
                }else if(currKey == 40 || currKey == 74){
                    if(menu_select < menu_max){
                        menu_select = menu_select + 1;
                    }
                }
                drawMenus();
            }
            function initEvent(){
                for(var i = 1; i <= menu_max; ++i){
                    $("m"+i).onmouseover = doMouseOverMenu.bind(i);
                }
                drawMenus();
            }
            function doMouseOverMenu(index){
                //alert(div);
                menu_select = index;
                drawMenus();
            }
            window.onload=initEvent;
            document.onkeydown = doKeydown;     
            window.onscroll = function(){
                var h = document.body.clientHeight;
                while($("m"+menu_select).getBoundingClientRect().top < 0){
                    menu_select++;
                }
                while($("m"+menu_select).getBoundingClientRect().top + menu_height >= h){
                    menu_select--;
                }
                drawMenus();
            }

        </script>

        <style type="text/css">
            .menu{
                width:100px;
                height:20px;
                border:solid 1px black;
                /*background-color:#aaaaaa;*/
            }
        </style>
    </head>
    <body scoll=no>
        <div id="m1" class="menu">m1;</div>
        <div id="m2" class="menu">m2;</div>
            <div id="m3" class="menu">m3;</div>
            <div id="m4" class="menu">m4;</div>
            <div id="m5" class="menu">m5;</div>
            <div id="m6" class="menu">m6;</div>
            <div id="m7" class="menu">m7;</div>
            <div id="m8" class="menu">m8;</div>
            <div id="m9" class="menu">m9;</div>
        <div id="m10" class="menu">m10;</div>
        <div id="m11" class="menu">m11;</div>
        <div id="m12" class="menu">m12;</div>
            <div id="m13" class="menu">m13;</div>
            <div id="m14" class="menu">m14;</div>
            <div id="m15" class="menu">m15;</div>
            <div id="m16" class="menu">m16;</div>
            <div id="m17" class="menu">m17;</div>
            <div id="m18" class="menu">m18;</div>
            <div id="m19" class="menu">m19;</div>
            <div id="m20" class="menu">m20;</div>
    </body>
</html>