github上的地址为 https://github.com/paperen/js-vim

实例地址为 http://paperen.com/demo/js-vim/

通过javascript在网页中重现vi的操作方式(基于jquery)

如何使用

1. 引入 core.js

   <script type="text/javascript" src="vim/core.js"></script>

2. 在想要实现vi操作的页面中加入

   <script>
   $(document).ready(function(){
    $(this).vim();
   });
   </script>
   

现有支持的命令

• r : 重新载入当前页面
• j : 向下滚动
• k : 向上滚动
• d : 向下滚动半页
• u : 向上滚动半页
• gg : 滚动到页面顶部
• G : 滚动到页面底部
• H : 后退
• L : 前进
• f : 打开当前页面上某个链接
• F : 在新标签页中打开当前页面上某个链接

有时候我们上线的网站可以要对第一次使用的用户进行一个引导，当然我们必须要建立帮助中心，也要附带一些图文说明指引用户进一步操作，而有时候也会使用一些更让人舒服的指引方法，使用一个偏暗遮罩将页面的元素挡住，然后将设定好的操作步骤一步一步加亮强调，从而引导用户去操作并附带一些说明文字与图片，这种方式不会影响太多用户体验，很简洁地引导了用户如何使用应用。