通过键盘的上下左右,实现对光标的移动,当点击回车时,进入所选的对应页面。左边是菜单栏,右边是具体数据。
左边的菜单栏布局
右边的具体数据局部
1、先查找到菜单栏所以元素
function dh_method(){
alert("菜单栏加载");
var my_dz=0;//右移动时改变值,从而将左边的光标取消,右边的光标设置(my_dz=1时)
var baseIndex = 10;//初始值
var li_sum=$("#div_dh ul").find("li").size();
$("#div_dh").find("li").each(function(li) {
$(this).find("a")
.attr("tabindex", li * 10 + baseIndex).attr("my_li",li )
.addClass("cGridInputs");
//alert("当前位置:"+li+"列");
});//li==结束位置
if(my_dz==0){
$(".cGridInputs[tabindex=" + 10 + "]").focus() ;
}
$("#div_dh").find("li").each(function(li) {
$(this).find("a")
.attr("tabindex", li * 10 + baseIndex).attr("my_li",li )
.addClass("cGridInputs");
//alert("当前位置:"+li+"列");
});//li==结束位置
if(my_dz==0){
$(".cGridInputs[tabindex=" + 10 + "]").focus() ;
}
2、菜单栏的键盘控制
$("#div_dh .cGridInputs").keydown( function(evt) {
var tabIndex = parseInt($(this).attr("tabindex"));
var my_lis = parseInt($(this).attr("my_li"));
switch (evt.which) {
case 40: //下---------------------
if( my_lis==9){//最后一个
return;
}
my_lis++;
tabIndex = my_lis*10+ baseIndex;
break;
case 38: //上---------------------
if( my_lis==0){//第一个
return;
}
my_lis--;
tabIndex = my_lis*10+ baseIndex;
break;
case 39: //右---------------------
// $(".cGridInput[tabindex=" + 10 + "]").blur();
my_dz=1;
break;
case 13:
/* alert("确定进入所选菜单--坐标:"+my_lis);
var url= $("ul li:eq("+my_lis+")").find("a").attr("href");
alert("菜单链接: "+url);
window.location.href=url;*/
break;
};
if(my_dz==0){
$(".cGridInputs[tabindex=" + tabIndex + "]").focus() ;
var distance = my_lis*(40+0)+50+'px';
$('.lanrenzhijia .hover').stop().animate({top:distance},150);
}
if(my_dz==1){
$(".cGridInputs[tabindex=" + tabIndex + "]").blur();
zt_method(); // 当点击右时,从左边将移动到右边,调用右边移动的函数
return;
}
});
};
var tabIndex = parseInt($(this).attr("tabindex"));
var my_lis = parseInt($(this).attr("my_li"));
switch (evt.which) {
case 40: //下---------------------
if( my_lis==9){//最后一个
return;
}
my_lis++;
tabIndex = my_lis*10+ baseIndex;
break;
case 38: //上---------------------
if( my_lis==0){//第一个
return;
}
my_lis--;
tabIndex = my_lis*10+ baseIndex;
break;
case 39: //右---------------------
// $(".cGridInput[tabindex=" + 10 + "]").blur();
my_dz=1;
break;
case 13:
/* alert("确定进入所选菜单--坐标:"+my_lis);
var url= $("ul li:eq("+my_lis+")").find("a").attr("href");
alert("菜单链接: "+url);
window.location.href=url;*/
break;
};
if(my_dz==0){
$(".cGridInputs[tabindex=" + tabIndex + "]").focus() ;
var distance = my_lis*(40+0)+50+'px';
$('.lanrenzhijia .hover').stop().animate({top:distance},150);
}
if(my_dz==1){
$(".cGridInputs[tabindex=" + tabIndex + "]").blur();
zt_method(); // 当点击右时,从左边将移动到右边,调用右边移动的函数
return;
}
});
};
3、右边页面的查找与控制
function zt_method(){
alert("主体加载");
var baseIndex = 10;//初始值
var my_list;
var my_li;
var arrays = [];
var my_dz=0;
var rows=$("#list ").size();//总行数
$("#list ").each(function(list) {
arrays.push({"list":list,"li": $(this).find("li").size()});
// alert("list-第: "+list+"行;"+"li-总:"+$(this).find("li").size()+"张");
$(this).find("li").each(function(li) {
$(this).find("img")
.attr("tabindex", list * 10 + li + baseIndex).attr("my_list", list ).attr("my_li",li )
.addClass("cGridInput");
// alert("当前位置:"+list+"行"+li+"列");
});//li==结束位置
});//子div==结束位置
if(my_dz==0){
$(".cGridInput[tabindex=" + 10 + "]").focus();
$(".div_right #list:eq(0) li:eq(0)").addClass("mybg");
localStorage.clear();
}
$("#list .cGridInput").keydown( function(evt) {
var tabIndex = parseInt($(this).attr("tabindex"));
var my_lists = parseInt($(this).attr("my_list"));
var my_lis = parseInt($(this).attr("my_li"));
var column = 0;//列总数
switch (evt.which) {
case 38: //上---------------------
if ( my_lists == 0){
return;
}
my_lists -= 1;
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
if (my_lis > column-1) {
my_lis = column-1;
}
tabIndex = my_lists * 10 +my_lis + baseIndex;
break;
case 40: //下---------------------
if (my_lists == rows-1) { //已经是最后一行
return;
}
my_lists += 1;
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
if (my_lis > column-1) {
my_lis = column-1;
}
tabIndex = my_lists * 10 +my_lis + baseIndex;
break;
case 37: //左移---------------------
if (my_lists == 0 && my_lis == 0) { //第一行第一个,跳转到菜单------------------------
//跳到菜单---------------
my_dz=1;
//return;
}
if(my_lis == 0){
my_lists--;
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
my_lis=column-1;
tabIndex=tabIndex-10+my_lis;
}else{
tabIndex--;
my_lis--;
}
break;
case 39: //右---------------------
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
if (my_lists == rows-1 && my_lis == column-1) { //最后行最后一个,跳转到第一个
my_lists =0 ;
my_lis= 0;
break;
}
if(my_lis == column-1){
my_lists++;
my_lis=0;
tabIndex=tabIndex+10-(column-1);
}
else{
tabIndex++;
my_lis++;
}
break;
case 13:
alert("确定进入观看--坐标:"+my_lists+" , "+my_lis);
var url= $("#div_index #list:eq("+my_lists+") li:eq("+my_lis+")").find("a").attr("href");
alert("电影超链接: "+url);
window.location.href=url;
break;
};
//改变选择的颜色--------------------------------
if(my_dz==0){
alert(my_lists+"行,列"+my_lis+"=="+tabIndex+"光标");
$(".div_right #list li").removeClass("mybg");
$(".div_right #list:eq("+my_lists+") li:eq("+my_lis+")").addClass("mybg");
$(".cGridInput[tabindex=" + tabIndex + "]").focus();
}
if(my_dz==1){
$(".cGridInput[tabindex=" + tabIndex + "]").blur();
$(".div_right #list li").removeClass("mybg");
dh_method();
return;
}
});//按键==结束位置
};
alert("主体加载");
var baseIndex = 10;//初始值
var my_list;
var my_li;
var arrays = [];
var my_dz=0;
var rows=$("#list ").size();//总行数
$("#list ").each(function(list) {
arrays.push({"list":list,"li": $(this).find("li").size()});
// alert("list-第: "+list+"行;"+"li-总:"+$(this).find("li").size()+"张");
$(this).find("li").each(function(li) {
$(this).find("img")
.attr("tabindex", list * 10 + li + baseIndex).attr("my_list", list ).attr("my_li",li )
.addClass("cGridInput");
// alert("当前位置:"+list+"行"+li+"列");
});//li==结束位置
});//子div==结束位置
if(my_dz==0){
$(".cGridInput[tabindex=" + 10 + "]").focus();
$(".div_right #list:eq(0) li:eq(0)").addClass("mybg");
localStorage.clear();
}
$("#list .cGridInput").keydown( function(evt) {
var tabIndex = parseInt($(this).attr("tabindex"));
var my_lists = parseInt($(this).attr("my_list"));
var my_lis = parseInt($(this).attr("my_li"));
var column = 0;//列总数
switch (evt.which) {
case 38: //上---------------------
if ( my_lists == 0){
return;
}
my_lists -= 1;
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
if (my_lis > column-1) {
my_lis = column-1;
}
tabIndex = my_lists * 10 +my_lis + baseIndex;
break;
case 40: //下---------------------
if (my_lists == rows-1) { //已经是最后一行
return;
}
my_lists += 1;
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
if (my_lis > column-1) {
my_lis = column-1;
}
tabIndex = my_lists * 10 +my_lis + baseIndex;
break;
case 37: //左移---------------------
if (my_lists == 0 && my_lis == 0) { //第一行第一个,跳转到菜单------------------------
//跳到菜单---------------
my_dz=1;
//return;
}
if(my_lis == 0){
my_lists--;
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
my_lis=column-1;
tabIndex=tabIndex-10+my_lis;
}else{
tabIndex--;
my_lis--;
}
break;
case 39: //右---------------------
$.each(arrays,function(index,value) {
if(my_lists == value.list){
column = value.li;
return;
}
});
if (my_lists == rows-1 && my_lis == column-1) { //最后行最后一个,跳转到第一个
my_lists =0 ;
my_lis= 0;
break;
}
if(my_lis == column-1){
my_lists++;
my_lis=0;
tabIndex=tabIndex+10-(column-1);
}
else{
tabIndex++;
my_lis++;
}
break;
case 13:
alert("确定进入观看--坐标:"+my_lists+" , "+my_lis);
var url= $("#div_index #list:eq("+my_lists+") li:eq("+my_lis+")").find("a").attr("href");
alert("电影超链接: "+url);
window.location.href=url;
break;
};
//改变选择的颜色--------------------------------
if(my_dz==0){
alert(my_lists+"行,列"+my_lis+"=="+tabIndex+"光标");
$(".div_right #list li").removeClass("mybg");
$(".div_right #list:eq("+my_lists+") li:eq("+my_lis+")").addClass("mybg");
$(".cGridInput[tabindex=" + tabIndex + "]").focus();
}
if(my_dz==1){
$(".cGridInput[tabindex=" + tabIndex + "]").blur();
$(".div_right #list li").removeClass("mybg");
dh_method();
return;
}
});//按键==结束位置
};
4、实现效果图
5、个人总结与优化
这是一个页面的实现,框架与框架的嵌套布局,将分别写菜单的js与具体数据的js,关键在于跨页面的框架js之间的调用,正在完善一些问题。本人处学者,有问题就多交流