javascript - JQuery: ブラウジング div プラグイン

Question

5x5 div のグリッドがあり、最初の div が class="selected" で選択されているとします。

プラグインの準備ができているので、キーボードの矢印を使用してそのグリッド内を上下左右に移動できますか?

Answer 1

この機能を提供するプラグインは見たことがありませんが、比較的単純で楽しい問題なので試してみました。

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 デモです。