不能得到动画jQuery键盘突出显示所选的键
Can't get mottie jQuery keyboard to highlight chosen key
链接到motie: https://github.com/Mottie/Keyboard
我使用motie键盘与"导航"answers"移动"扩展。它工作得很好,除了"当前键"没有被突出显示。我可以在键盘上导航,点击回车键就会显示出来,但我不能直观地看到哪个键被选中了。
根据文档和工作示例,将我的代码片段设置为"style"应该可以做到这一点,但它不会改变任何东西。
我的HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Mobile Demo</title>
<!-- demo -->
<link href="css/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<script src="js/jquery.keyboard.extension-navigation.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!--
<script src="../js/jquery.keyboard.extension-typing.js"></script>
<script src="../js/jquery.keyboard.extension-autocomplete.js"></script>
-->
<script src="js/jquery.keyboard.extension-mobile.js"></script>
<style>
html head + body .ui-btn.ui-btn-c:hover,
html head + body .ui-btn.ui-btn-c.ui-btn-hover,
html head + body .ui-btn.ui-btn-c:active,
html head + body .ui-btn.ui-btn-c.ui-btn-active {
background-color: #f7931e;
border-color: #a37a00;
color: #fff;
text-shadow: 0 1px 0 #ffcc33;
}
.ui-keyboard-button.ui-state-active.ui-state-hover {
border: 1px solid #fff !important;
-moz-box-shadow: 1px 1em 1px #ffba2b inset !important;
-webkit-box-shadow: 1px 1em 1px #ffba2b inset !important;
box-shadow: 1px 1em 1px #ffba2b inset !important;
}
/* Class added to indicate the virtual keyboard has navigation focus */
.hasFocus {
border-color: #59b4d4 !important;
}
</style>
<!-- initialize keyboard (required) -->
</head>
<body id="mobile">
<div id="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<label for="keyboard"></label>
<input id="keyboard" name="keyboard" type="text">
</div> <!-- End wrapper -->
<script>
$(function() {
$('#keyboard')
.keyboard({
})
/* initial setup for mobile extension */
.addMobile({
// keyboard wrapper theme
container : { theme:'b' },
// theme added to all regular buttons
buttonMarkup : { theme:'b', shadow:'true', corners:'true' },
// theme added to all buttons when they are being hovered
buttonHover : { theme:'a' },
// theme added to action buttons (e.g. tab, shift, accept, cancel);
// parameters here will override the settings in the buttonMarkup
buttonAction : { theme:'c' },
// theme added to button when it is active (e.g. shift is down)
// All extra parameters will be ignored
buttonActive : { theme:'c' }
});
$('#keyboard')
.keyboard({
})
.addNavigation({
position : [0,0], // set start position [row-number, key-index]
toggleMode : true, // true = navigate the virtual keyboard, false = navigate in input/textarea
focusClass : 'hasFocus' // css class added to the keyboard when toggle mode is on
});
});
</script>
</body>
</html>
有使用经验的人能注意到哪里不对吗?谢谢!
修复成功!把这个放到样式中:
<style>
html head + body .ui-navbutton.ui-navbutton-c:hover,
html head + body .ui-navbutton.ui-navbutton-c.ui-navbutton-hover,
html head + body .ui-navbutton.ui-navbutton-c:active,
html head + body .ui-navbutton.ui-navbutton-c.ui-navbutton-active {
border-color: #a37a00;
color: #fff !important;
}
html head+body button.ui-keyboard-button.ui-state-hover {
border: 1px solid #830000 !important;
background-color: #999999 !important;
}
/* Class added to indicate the virtual keyboard has navigation focus */
.hasFocus {
border-color: #59b4d4 !important;
}
.navbutton {
line-height: 30px;
margin: 2px;
padding: 5px;
border: #333 1px solid;
}
</style>
相关文章:
- JS页面在后台加载时显示动画
- 先下载页面,然后显示/动画内容
- 如何在使用$http缓存时重新触发ng-if/ng显示动画
- 在单击位置显示动画
- Jquery幻灯片显示动画行为怪异(事件触发,队列中堆积)
- 在 requestAnimationFrame 中使用 clearRect 不会显示动画
- 每次使用 jQuery 单击按钮时显示动画
- 按顺序显示动画 SVG 元素
- 显示动画图像的最佳方式(HTML/CSS/JS)
- 标签中的 JavaScript 代码在显示动画完成后运行
- 当 ajax 请求速度时不显示动画.js
- 通过页面滚动显示动画
- 在隐藏/显示动画时展开/收缩容器
- 显示动画不设置动画
- 在表行上设置显示动画
- 如果选择JQuery幻灯片,则不显示动画
- 制作不透明度隐藏/显示动画
- jQuery UI removeClass没有显示动画
- JavaScript隐藏/显示动画
- jquery不会在第一个项目上显示动画