Добавление клавиш навигации для просмотра - PullRequest
Новая
       0

Добавление клавиш навигации для просмотра

0 голосов
/ 15 февраля 2019

В моем приложении AngularJS у меня есть представление, которое отображает различные изображения в div.Я хочу добавить Навигацию для просмотра, чтобы Навигация к другим изображениям осуществлялась с помощью клавиш клавиатуры.Может кто-нибудь подсказать, как этого добиться? 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS App</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/bootstrap.css">    
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript" src="app/myAppModel.js"></script>
    <script type="text/javascript" src="app/myAppHomeCtrl.js"></script>
    <script type="text/javascript" src="lib/xml2json.js"></script>
</head>
<body style="background: #800000">

    <div class="container" ng-controller="myCtrl">
        <input class="form-control" id="inputdefault" type="text" style="width:25%; height:40px; display:inline" ng-model="searchKey" placeholder="Type to search">
        <button type="button" class="btn btn-danger" style="height:40px; margin:20px; margin-left:5px; display:inline" ng-click="loadSearch()">Search</button>

        <div ng-show="true" ng-app="myApp" ng-cloak class="w3-card-2 w3-margin" style="text-align:center; color:yellow; display: grid; grid-template-columns: auto auto auto auto auto; grid-gap:20px; width:730px; border-radius: 8px;">
            <div ng-repeat="x in myData" class="grid-item"><img style="border-radius: 8px;" src="{{x.logo}}" width="150" height="150">{{x.number+'. '+x.name}}</div>
        </div>
    </div>

</body>
</html>

1 Ответ

0 голосов
/ 15 февраля 2019

Это было бы полезно: 

var len = myData.length;
var imageIndex = 0;

$(document).keydown(function(e) {

    if(imageIndex <0) {
       imageIndex = 0;
    }
    else if(len <=  imageIndex){
       imageIndex = len;
    }

    switch(e.which) {
        case 37: // left
        case 40: // down
        var currentImage = myData[imageIndex-1];
        $("img").attr(src, currentImage.number+'. '+currentImage.name);
        break;

        case 39: // right
        var currentImage = myData[imageIndex+1];
        $("img").attr(src, currentImage.number+'. '+currentImage.name);
        break;

        default: return; // exit this handler for other keys
        imageIndex++;
    }

    e.preventDefault(); // prevent the default action (scroll / move caret)
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...