2012-12-04 2 views
8

Ich habe eine onkeydown Funktion gemacht, die li Elemente Blöcke horizontal läuft es läuft perfekt, aber ich brauche, wenn der erste und letzte li Blöcke im Fokus der linken und rechten Tasten sollte deaktiviert werden.disable keyCode für das erste und letzte Element

könnte jemand einen passenden weg vorschlagen? Danke im Voraus !!!

$(document).ready(function() { 
    var winht = $(window).height(); 
    var contUl = $('.content ul').children('li').size(); 
    var widLi = $('.content ul li').width(); 
    var contUlAndLI = contUl * widLi; 
    var leftIndex = $('.content ul').css('left','0'); 
    $('.content ul').width(contUlAndLI); 
    $('#frame').height(winht); 

$("body").keydown(function(e) { 

    if(e.keyCode == 37) { // left 
    $(".content ul").animate({ 
     left: "-=980" 
    }); 
    } 
    else if(e.keyCode == 39) { // right 
    $(".content ul").animate({ 
     left: "+=980" 
    }); 
    } 

}); 

if(leftIndex == 0){ 

    $("body").keydown(function(e) { 

     if(e.keyCode == 39){ // right 
      //event.preventDefault(); 
      return false; 
      } 

     }); 
    } 

}); 

die Arbeits Referenz jsfiddle

Antwort

1

ich tat es durch einen Zähler, dessen Wert mit jedem der Benutzer drückt nach links oder rechts überprüft. Der Zähler ist einfach die Anzahl der li Elemente innerhalb des ul Tags.

var ulCount = $('.content li').length - 1; 
var i = 0; 

Dann laufen nur die Animation, wenn wir innerhalb der Werte des Zählers sind:

if(e.keyCode == 37) { // left 
    if (i < ulCount) { 
     i++; 
     $(".content ul").animate({ 
      left: "-=980" 
     }); 
    } 
} 
else if(e.keyCode == 39) { // right 
    if (i > 0) { 
     i--; 
     $(".content ul").animate({ 
      left: "+=980" 
     }); 
    } 
} 

ich die jsFiddle auch aktualisiert.

+0

der Schiebebereich ist 980 fix könnte es dynamisch sein? ich meine Fensterbreite Größe? – matthewb

+1

@matthewb: Sicher, siehe aktualisiert [jsFiddle] (http://jsfiddle.net/R9cmH/14/). – Antti29