假设我有一个 5x5 div 的网格 第一个是用 class="selected"
选择的有没有准备好任何插件,所以我可以使用我的键盘箭头在该网格中向左/向右向上导航?
最佳答案
我还没有看到任何提供此功能的插件,但这是一个相对简单且有趣的问题,所以我试了一下。
对于 HTML,像这样构建你的网格:
<div class="container">
<div class="boxrow">
<div class="box selected"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="boxrow">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="boxrow">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
对于样式,这里有一些简单的方法可以帮助您入门:
.box {
height: 5px;
width:5px;
border: 1px solid #c0c0c0;
margin: 1px;
float: left;
}
.selected {
background-color: blue;
}
.boxrow {
clear: both;
}
最后,这是 Javascript。如果你想扩展功能,你可以把它变成一个插件。
$(document).keydown(function(event) {
var selected = $('.selected');
var row = selected.parent('.boxrow');
var index = row.children('.box').index(selected);
switch (event.keyCode) {
case 37: // left
if (selected.prev('.box').length != 0)
selected.removeClass('selected').prev('.box').addClass('selected');
break;
case 38: // up
var prevRow = row.prev('.boxrow');
if (prevRow.length != 0) {
selected.removeClass('selected');
prevRow.children('.box').eq(index).addClass('selected');
}
break;
case 39: // right
if (selected.next('.box').length != 0)
selected.removeClass('selected').next('.box').addClass('selected');
break;
case 40: // down
var nextRow = row.next('.boxrow');
if (nextRow.length != 0) {
selected.removeClass('selected');
nextRow.children('.box').eq(index).addClass('selected');
}
break;
}
});
玩得开心,希望你觉得这很有用。
这是一个 jsfiddle demo .
关于javascript - JQuery: 任何浏览 div 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10747290/