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 : 在新标签页中打开当前页面上某个链接

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

一直都觉得javascript可以玩得很cool。所以终于尝试了使用js来写了一个小游戏，界面上其实也没什么特色~~普普通通吧，paperen将这个游戏取名为（untouchable）不可触及，游戏规则其实很简单，不要让那个按钮与那些飞来飞去的小球发生碰撞，看你能熬到多少秒。

 untouchable游戏地址  http://paperen.com/demo/collision/

前几天paperen跟一位也是从事php行业的朋友聊天，之后他向paperen展示了他做的一个物质系统，那数据确实蛮多的，远程过去看他玩了会，paperen就看中了那个搜索提示功能，咦！当输入中文的时候也可以有提示哇~~从而又想起前前几天一位从事java的朋友问paperen一个中文索引的问题，咦！当时不就是想到一个如何对姓名排序的问题，就像paperen部索爱W550C的电话簿中输入L会找到李，梁的姓，当时看到那个搜索提示觉得很神奇(虽然google的时候也经常是有了……但是你总不能给google发个邮件问问你首页那个搜索提示是咋整的捏吧)，paperen一直是以为用数据库来做这个功能，但是那位朋友说了一个神奇的功能“中文转拼音”。wow~~这次赚了，所以就有了这个“姑妈”啦。

中文转拼音的源代码去google一下就大把，这里随便放个链接，猛点here

good！总而言之，是一堆比较长的代码，看不懂就当养养眼吧。下面放出demo地址-猛点here，压缩包地址-猛点here

越来越觉得在网站开发中，前端的效果最不能忽视，包括用户体验与交互效果，当然还有CSS等等，刚看完了一本叫《Don't make me think》的书，说的是关于WEB用户体验等方面的东西，我们如何选择首页的说明文字，如何让浏览者不会在你的网站中迷失，如何让浏览者迅速了解你的网站，原来都是很有学问的~~总之也不简单，慢慢领会吧。

paperen也很久没发东西了，趁着有空，做了个图片展览的东西，还勉强过得去吧。

新年就这样过去了，其实paperen都觉得新年好像越来越没意思，都是与亲戚们到处吃饭，自己还是喜欢吃家里的饭，而且到外面吃paperen我一定吃不饱的……最近几天聚会也很多，加上前天服务器维护所以导致今天才能写写文章。?

话说N久之前paperen我就想在网页中使用圆角形来做，看过一些css书中也有相关介绍，某些做法也是很麻烦的，对html结构很不好，而如果大家有对css3有了解的话也知道css3中已经有支持圆角形的css了，只不过不是每个浏览器都能解析，特别是ie，也就是说你还是得安安分分想其他办法去应付ie浏览器中的圆角形效果，而这里也稍微说说自己曾经与现在制造圆角形的方法。?

因为对于css3的圆角形的css代码普遍不被支持，所以paperen一般还是使用图片来制造圆角形的效果。?

paperen最近在设计某人的砂场销售系统页面的时候，突然在对css的命名有了点想法，比如对某个元素你可以使用id或者class来对它的css进行编写。前者的区别与后者的区别是明显的，同一个页面中id号是唯一的，也就是说不能有两个或以上的id名字在同一个页面出现，而class则相反，你可以在一个页面中使用同一个class对不同元素进行美化，而且可以套用多个class。类似下面这样写。?

#useid{font-size:12px;}
.useclass{border:1px #CCCCCC solid;}
.bigfont{font-size:14px;}
</style>
<div id="useid">记住ID号唯一</div>
<div class="useclass">而使用class则不同</div>
<div class="useclass bigfont">而使用class则不同</div>

这些是写css的基本准则了，可能大家对多个class一起套用的方法用得不多吧，paperen我也是在学做WordPress的模板时发现可以这样用的（可能是以前看书不够仔细吧……）?

那么如果要写写paperen右边的边栏的css应该怎样写呢？?

为博客换了些装备与添加上一些功能，灵感来自于昨天paperen我看的那些博客，都是基于WordPress开发的了，当然paperen我也不会错过扒人家的东西来看看这个好机会（其实同大家偷瓜偷菜不一个样），配合opera浏览器的开发者工具去挖就真是很方便了（大家如果用过就明白了）?

?

话说paperen看中了那个滑回顶部的小功能，找了它的js文件，弄过来就亲自测试起来了，现在paperen的博客都添加上这个功能了（至于赞与踩那个功能paperen我可没抄别人的东西啊）?

先来看最终效果图吧

?

例子 http://paperen.com/demo/pop-box/

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

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

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

弄过网页布局的同学都应该知道一件事情——在火狐、chrome、opera这些浏览器弄得好好的页面到了IE6中却让你无语。是的，那也就是浏览器的css兼容性问题，在IE6下有些事情就出了一些令人意想不到的bug~~所以在写css的时候推荐使用多个浏览器同时调试，才能保证兼容性问题一个接一个地被解决。

而这篇文章就是总结一下一些paperen经常遇到的css兼容性问题以及解决方法。直接切入主题吧。

看到标题你都明白这次又是说啥了，还是JS图片展览的效果，but，这次同时附上 psytopic.com 里面的那个gallery（准确点来说是盗窃回来的），paperen弄来他们的js，css，同时搜索了关于lightory这个信息，准确点来说是个开发者（根据css文件开头的备注找到了这个线索），paperen当然也不确定是不是这个lightory（t.sina.com.cn/lightory），但可以肯定而且令我惊讶的是微博这位又是一个90后的杰出开发者（又让paperen觉得中国的IT未来一片光明，我们需要的只是创新而已），访问了 他的blog 与摆摆书架（http://bookfor.us/）paperen喜欢这样的UI，摆摆书架的玩法大家也可以了解下，挺有意思的。

多余的东西就到此为止了，说得有点多了……好吧，一开始就来个DEMO给大家看看（psytopic.com的那个）。

一直一直以来就想整理出一个js控件，每次paperen要弄js日历控件就得上网找，当然jquery-ui的可以但是又觉得貌似需要的引擎有点多本身就需要jquery的框架又要引入ui的js文件还有图片与css，重要的是它那个改起来不会……而一些不兼容浏览器的控件也有（干脆就不用了不兼容不能拉出来见人的）。而今天终于有机会让paperen我扒了discuz的下来（在ie，火狐，opera下测试没问题，其他的就不知道了），并最终整合到只有一个js文件就能调用，当然也需要一些css文件的支持，不然会不好看。

DEMO地址 http://paperen.com/demo/js-calendar/

哇塞！看到这个题目或许就让人糊涂……连paperen自己都看不懂是什么意思，“更正孤儿”其实这是一个关于css布局的问题，例如你想做一个效果是，左边是一张小图片右边是一堆文字，就是半图半字的布局，那么这篇或许正是你需要的。?

在paperen琢磨自己新设计的皮肤时，也抽点空先尝试一下设计图中一些布局中的css技巧，而也正是有使用这个布局的地方，而在sohtanaka的博客那也找到了一篇关于这个css技巧的文章，而文章名字就是Correcting Orphans，paperen所以在这里也用了这个名字，所谓站在巨人肩膀上嘛~~?

解决方法1：sohtanaka说的?

paperen以前弄的那个图片转换太失败了，有看代码的会发现是更换了img的src值来改变图片，而html代码中也只有一张图片（<IMG src="i.jpg" ?="" />），而这样的缺点就是要等待图片完全下载完才能切换出来，明显的表现是在网速不理想下点击切换按钮时不能马上转换图片而是要等待一定时间。所以paperen我觉得还是要在html中先所有图片都放出来然后用css隐藏一部分图片来制造这种效果是最理想的，其实这个方法也不是我想出来的，你随便找个有js滑动图片的网站看源代码都是将所有图片事先放出来的，因为这样会先下载图片，即使你只能看到一张图片。

http://paperen.com/demo/imageslider/

1.HTML结构

这个今天刚记起所以就放出来分享一下，是很前一段时间paperen为了帮小王所以扒下来的，还没看它的js代码，其实paperen不是很经常偷别人的东西啦，就是偶尔有时候为了帮忙或者实在觉得效果不错就下手咯……那也是理所当然的事情嘛，大家说是吧？?

不多说demo地址在这里 http://paperen.com/demo/picrun/

自己看看吧，喜欢的话拿去吧（查看源代码，拿css文件与js文件就行啦，paperen我已经将css文件做缩减了，不过js文件还没整理好，大家将就吧……有谁整理好的也可以发我一个）

前些日子看到某个网站的前端效果比较不错所以去挖了他的js下来看，发现用了ajax的load事件去实现一些很不错的功能，例如下面iplaysoft网站中这部分的功能。?

?

你也可以先看看我做的一个小DEMO http://paperen.com/demo/ajax-load/

Paperen对于js了解的确实不多，以前一向就是写一些简单的功能，例如检验输入非空还有地址返回的功能还有用js控制一下样式之类的，之后直接接触JQuery，用JQuery集成的效果只需要一两行的代码，但是如果不用JQuery的框架去写js代码的话可能没有一百多行都写不出来，感觉用JQuery是方便多了，但是Paperen有空的时候也还是要去认真学习一下JavaScript的，还有prototype这个框架。?

前言就说一下自己对于js的体会吧，前些时间趁自己有空用jquery做了一个切换图片的小玩意，简单到不能再简单的东西。?

http://paperen.com/demo/js-change-pic/