- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在用表格显示搜索结果。每个结果都有一个按钮供用户单击以显示其全部详细信息。这很好用。
我还希望能够使用键盘的向上和向下箭头导航搜索结果。
现在,用户必须单击 Select
按钮或选择按钮,然后按 空格键
。
我想我可以捕获 keyup 和 down 事件,然后找到我需要选择的上一个或下一个,然后设置它,但这听起来工作量很大。我想知道是否有更好的方法来做到这一点?
javascript
var myModel = new function() {
var self = this;
self.selectedResult = ko.observable(new MyObj());
self.searchResults = ko.observableArray();
self.navUpDown = function (item, evt) {
if (evt.keyCode == 38) { // up
var id = item.ID();
// find previous one and set selectedResult
}
if (evt.keyCode == 40) { // down
var id = item.ID();
// find next one and set selectedResult
}
};
};
html
<table class="table">
<thead>
<tr>
<th> </th>
<th>table header 1</th>
<th>table header 2</th>
</tr>
</thead>
<tbody data-bind="foreach: searchResults">
<tr data-bind="css: { 'btn-info': $parent.selectedResult() == $data }, event: { keyup: $parent.navUpDown } ">
<td>
<button class="btn btn-small" data-bind="click: $parent.selectResult">Select</button>
</td>
<td data-bind="text: data1"></td>
<td data-bind="text: data2"></td>
</tr>
</tbody>
</table>
最佳答案
我认为这就是您要找的。
var myModel = new function () {
var self = this;
self.selectResult = function (item) {
self.selectedResult(item);
};
self.selectedResult = ko.observable();
self.searchResults = ko.observableArray([{
data1: "1",
data2: "2"
}, {
data1: "2",
data2: "2"
}, {
data1: "3",
data2: "2"
}]);
self.selectPrevious = function () {
var index = self.searchResults().indexOf(self.selectedResult()) - 1;
if (index < 0) index = 0;
self.selectedResult(self.searchResults()[index]);
};
self.selectNext = function () {
var index = self.searchResults().indexOf(self.selectedResult()) + 1;
if (index >= self.searchResults().length) index = self.searchResults().length - 1;
self.selectedResult(self.searchResults()[index]);
};
};
ko.applyBindings(myModel);
$(window).keyup(function (evt) {
if (evt.keyCode == 38) {
myModel.selectPrevious();
} else if (evt.keyCode == 40) {
myModel.selectNext();
}
});
希望对你有帮助。
关于javascript - 如何绑定(bind)向上和向下箭头键以启用在表格行中导航?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16970751/
如果我有如下列, 1 2 2 1 3 4 5 我如何找到从已知值向上的特定数字的第一次出现,比如 4。我知道 4 在列中的位置,我希望第一次出现 1 的行号从 4 向上(行号 4在这种情况下)。 我的
我这里有一个 fiddle http://jsfiddle.net/BB3JK/47/我改编自上一个问题( How can I move selected option in multiselect
大家好,我的应用程序遇到问题。我的复选框中的复选框,一旦我选中该复选框并向下/向上滚动,该复选框就消失了,我不知道这是怎么发生的。谁能帮我这个?谢谢您的帮助 :)这是我的代码: public clas
我想使用 jQuery scrollTo 函数或其他一些类似的函数来实现以下功能,以达到相同的结果。 我的页面上基本上会有一个 DIV 部分,其中包含大约 10 个类别 URL 链接。 例如: div
我有这个标记 Sample 1 Sample 2 Sample 3 Sample 4
我得到了一个包含项目的列表。他们都有一个“排序”列。排序列是int类型,并且是唯一的。 场景: sort 1; sort 2; sort 3; 如果用户在列表中向上移动一个项目(例如排序 3)(例如到
在我的网页上,我在一个可滚动的 DIV 中放置了一个表格。 当我向下滚动时,我想突出显示表格中最可见的中间行。 我该怎么做? 我发现以下脚本接近我的期望 --> www.rgagnon.com/jsd
我已经训练了完全相同的模型(使用完全相同的训练数据集)两次,但结果非常不同,而且我对它们的损失曲线的行为感到困惑。 第一个实验的损失曲线(红色曲线)在第一个时期结束时突然上升,然后缓慢稳定下降。 但是
我希望主导航的子菜单在鼠标悬停时向下滑动并在鼠标移开时向上滑动。 以下是我正在处理的页面:http://jaspreetkaur.com/marg-moll/ 以下是我尝试创建效果的 jQuery 代
我有一个 UIPageViewController,其中每个 VC 的中心都有一个数字。 我希望当我从一个 View 滑动到另一个 View 时,数字将从 0 开始并向上计数,直到达到正确的数字(或者
我一直在谷歌搜索,但找不到正确的脚本。也许有人可以指出我正确的方向? 我需要显示用户自访问某个页面以来在网站上处于事件状态的时间。我正忙于测试站点,例如用户有 1 小时来完成测试,因此我需要显示用户忙
向上/向下箭头滚动在 jquery scrollify 插件中不起作用。我想使用页面向上/向下按钮和向上/向下箭头按钮单击进行滚动。页面向上/向下箭头工作正常,正如我所期望的。向上/向下按钮单击不随着
我想在按下左右箭头时使用数组创建一个上下计数动画。 我有 3 个数组,每个箭头将链接到一个 ID。 var KEY = { LEFT: 37, RIGHT: 39 } $(function(
我对那个 JS 有点问题.. - 有一个 divs 并且这是在随机变化的行中自动变化的... 我需要将向上移动的 div 的颜色更改为绿色.. div 正在向下移动以更改为红色.. 我尝试这样做,但我
我希望能够使用我的键盘键在 ul 列表中滚动。经过几次尝试后,我成功了。 不幸的是,我遇到了一个很长的列表的问题。我希望能够通过提供 css 规则 overflow:auto; 来滚动浏览它们; 键盘
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
在我的应用程序中,我允许用户通过使用 ProcessCmdKey 按住右箭头键来滚动电影。现在我想让用户能够在需要时提高滚动速度。理想情况下,用户应该能够按住右箭头键,然后当他决定提高速度时,他应该在
我已经在 listview 上设置了 smoothScrollToPosition 并且效果很好!但是...我宁愿将位置放在 listview 的顶部,而不是仅仅放在屏幕上(如果需要向下滚动,则主要放
我想构建一个脚本来向上/向下滚动到页面的部分标记。我的源代码如下所示: HTML: UP DOWN First Second Third Fourth CSS: section{
我正在使用 Google 搜索结果实现创建一个自定义 ComboBox 控件,但我在使用箭头键时遇到了一些问题。 问题详情 请观看此视频,因为我演示了向上和向下箭头键的问题,并查看输出面板。 http
我是一名优秀的程序员,十分优秀!