涉及 前端 标签的文章 所有标签


一个模仿vi操作的jquery插件
6年前
  • 38
  • 2

一个模仿vi操作的jquery插件

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 : 在新标签页中打开当前页面上某个链接
阅读更多
一个用户引导的js插件(基于jquery)
7年前
  • 1
  • 0

一个用户引导的js插件(基于jquery)

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

阅读更多
bootstrap-confirm 基于modal
6年前
  • 2
  • 1

bootstrap-confirm 基于modal

在web设计时有些操作需要给予操作者进一步提醒,我们常常会使用window.confirm();来弹出一个警告框

但是我们没法对它进行美化,它在日渐提高的审美水平下越发越觉得难看。当我们使用了bootstrap后你会发现里面有一个modal,而它实在太好看了(至少paperen是这么认为的) http://twitter.github.com/bootstrap/javascript.html#modals

我们使用这个modal来实现类似window.confirm的功能,但是这倒是需要写多点代码 例如下述代码:

阅读更多
不要忽略了前端的性能
8年前
  • 0
  • 1

不要忽略了前端的性能

将《高性能网站建设指南》读完了,感觉很好,这本书值得大家一读。让paperen对前端性能优化有了更多了解。steve souders 将所有法则都描述得很彻底,很简洁。书中一些观点更是让paperen深刻“只有10%-20%的最终用户响应时间花在了下载HTML文档上,其余的80%-90%时间花在了下载页面中的所有组件上”,“如果将后端响应时间缩短一半,整体响应时间只能减少5%-10%,如果关注前端性能,同样是将其响应时间减少一半,则整体响应时间可以减少40%-45%”,总结得真的很到位,更重要的是你在阅读过程中会通过例子自己体会到作者这些观点。

光看封面都挺有意思的,留意那只狗的比例。

20110327151826

阅读更多