博客园_豪情

JavaScriptDOM高级程序设计- generateDOM.js

2012-02-15T02:46:00Z

效果看演示，这是此书第三章的一个例子，与原书中示例不同的是，经过封装，结构更清晰，调用更方便，方法实现也因为封装而做了稍为的改动。

其中generateDOM里边几个方法介绍：

generateDOM = {
    generate: function(){},
    // 这是入口的核心方法，外部绑定到onclick事件处理
    // 在这中通过 walkTheDOMRecursive() 递归子节点，调用 processNode() 方法对节点元素进行转化
    processNode: function(){},
    // 如果存在诸如： <div class="" style=""></div> 中的 class,style等属性时，循环遍历属性，
    // 并通过 walkTheDOMRecursive() 进行递归，调用 processAttribute() 方法对节点属性进行转化
    processAttribute: function(){}
}

实例下载

本文链接

JavaScriptDOM高级程序设计-myLogger.js

2012-02-10T02:12:00Z

最近早上有空，不想des，想找本书看看，js王者归来伤透我心，悟透js就没信心了，还是回归国外大师们的作品比较保险，javascript dom 高级程序设计，这是李松峰与人民邮电的第一次合作，十分值得纪念。里边的内容可圈可点，虽然是2008年左右出的书，一点也不感觉过时，搞不懂好多人不知道什么原因忽略了这本书。还记得参加webrebuild时龙刚推荐过此书，想想已经快两年过去了。时光为流水，一去不复返，今，正风华正茂，逆流而上，方显英雄本色。莫蹉跎了年华，辜负了佳人，遗恨终生。

本文链接

webstorm比dreamweaver强大的地方

2012-02-10T01:10:00Z

比dw强大的地方有：
1. 对js的开发有长足的支持，那些自动提示，代码主题，调试之类的我就不说了，主要是对流行技术的支持，比如Node.js,less,sass,jq,ext,prototype等框架的支持。
2. 自身对插件的支持，主要体现在webstorm 2.0以后就已经包涵了zencoding了，而如果dw不是完整版的话，zencoding的安装难度可想而知。如果是完整版的话，就不得不忍受一坨无用的插件。
3. 团队开发的支持，主要体现在svn,git等版本管理工具，无须引入，直接可用。而且单文件还支持本地历史记录。
4. 插件的支持，主要体现在vim，可直接安装插件，还有其它的插件等待着你去挖掘。
dw比webstorm的优点，那就是dw的内存占用大概平常80M左右,而webstorm得300M左右，这是我发现唯一dw的长处。
如果说,dw是美工偶尔拖拖表格，写写css的小工具的话，那么webstorm是前端开发的必备利器，不只是对html,css的抒写比较强悍，而且对js，jq等其它js框架开发更是完美。
简单的说：dw就是一个编辑器，而webstorm是一个IDE。
另外一个，dw自从cs4之后，就已经无路可走，本来近几年的js开发如火如荼，看看这帮2B在dw cs5里边添加的那些隔靴搔痒的新功能，想想都笑，用户在不断的成长，市场在不断的变化，而这帮2B还在沉睡，残酷的市场如金的岁月会检验具有竞争力的产品。相比于dw的固步自封，webstorm正在走上坡路。这里不得不提一下另外一款:aptana ，本身在js方面有一定的靓点，可惜现在搞得跟dw一样，没有抓住现下流行的趋势，一直吃老本。看看aptana 3.0那些2B的功能，就能原谅dw现在还是这个样子。
当然一分为二的看的话：如果你只是想拖拖表格，搞搞css，dw cs4 是目前市场上比较适合的编辑器。他的html结构自动识别折叠，能很快找到不完整的div,ctrl + d，跳到定义的class位置等等，是其它编辑器所没有的，在加上zencoding的话，写写静态页面足矣！
如果你不只是想折腾css，而是想捣鼓捣鼓js,less,sass,node.js等等之类的新玩意，也想试试vim结合传统编辑器的威力，那webstorm绝对是你最佳的选择。如果你是phper，我推荐phpstorm，它包含所有webstorm的功能。
本人已经转向从dw cs4转向 webstorm了，所有的代码提交到google svn，下班前提交代码，回家后更新代码。如此，空手上下班，又何妨。

本文链接

前端开发利器webStorm 3.0配置使用

2012-01-16T06:52:00Z

合适的工具会事半功倍，当然也得把握分寸，要不就成了会得越多干的越多的“苦力者”。
编辑类软件层出不群，各有所长，各有所短。找到一个合适的还真是难。还好有webstorm的出现，最近又是3.0的新版本发布。为什么这么说呢，她与其它的编辑器有什么不同：
1. 任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上角是没有那个熟悉的米号的。

换句话说，所有的操作都直接存储，这样带来的坏处就是，没有以前的米号标识，万一键盘误操作也会被立即存储。

省去了ctrl + s之后，在结合Firefox的vim，基本不动鼠标就可以看到结果页面了。

2. 任何一个编辑器只要文件关闭了就没有历史记录了，但是webstorm有。就是说，只要webstorm不关闭，你的文件随时可以返回到之前的操作，webstorm关闭重启后这些历史记录就没有了。这样的坏处也是显然的，由此带来的内存消耗也必然比较大。
3. 任何一个编辑器，除了服务器svn之外，没有本地版本，但是webstorm提供一个本地文件修改历史记录。

4. 与时俱进的眼光。zencoding于2009年出现于it界，在这之后，鲜有工具直接集成到里边。webstorm 2.0之后就集成了。node.js,html5,git,cvs等就不一一列举了。

5. 提供的插件也是比较齐全，安装非常方便。这样带来了另外的问题，以前的eclipse是安装第三方的，webstorm貌似不能安装第三方的插件。

6. 可以导出当前设置：File -> Export setting 下面就是导入设置。

其它的使用：

1. 主题，参照这里。（所需的文件下载第4条中setting.rar即可，里边包括文章中提到的颜色配置文件）

2. 添加VIM插件：

File -> Settings -> Plugins -> Browse repositories -> 搜索vim，对它单击右键Download and install，然后重启IDE就可以了。
重启之后，控制台会输出： “8:50:07 IdeaVim: Vim keymap was successfully enabled” 说明vim插件安装成功。另外在aptana2.0里边安装vim插件，真是头痛，所有的文件都支持vim模式，在.html居然不支持，郁闷。

这样会出现另外一个问题，我如果想用ctrl+c,ctrl+v等一些默认的快捷键，该如何呢？安装VIM之后修改Defualt ，在Main menu -> Edit -> Copy 单击右键 Remove ctrl + Insert 只会剩下一个ctrl + c。这样配置后，可以使用部分默认的快捷键，90%的VIM快捷键。这之后还有个问题需要注意，在webstorm重启之后，又被全局默认为vim快捷键，需要在File -> Setting -> Keymap -> Keymaps 中选择Default copy，要不然，还是全局的VIM快捷键。

3. 除了webstorm之外，此公司还提供另外一个针对phper的开发工具,phpStorm，主页上说明，phpstorm包括所有webstorm的功能。但是习惯于大括号去方法名在同一行显示，所以还得配置：

File -> Settings -> code style -> PHP -> Wrapping and Braces -> Braces placement ->

In method declaration : End of line.

4. zencoding由于其提供的快捷键，确实 zencoding快捷键修改：

File -> Setting -> Live Templates

这里边如果你修改一个没有什么特别的，但是如果要添加一个需要在下面需要类型：No applicable contexts yet. Define ，单击Define选择要添加的类型。

如何合理的修改，参考这里。

如果你对我修改后的文件设置感兴趣请点这里下载。 (其中就是从我的webstorm导出的setting.jar文件，包括主题，快捷键，zencoding.css等)

一次性导入：

导入：File -> Import settings...

下载后单独模块配置目录：win7 -> C:\Users\jikey(用户名)\.WebIde10\config

也可以一次性导出settings : File -> Export sttings...

5. 在开发js时发现，需要ctrl + return 才能选候选项，又需要配置：

File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion:

'Smart' 改为 Always

6. 注意的地方是：Webstorm的调试是不支持中文路径中文文件名。

以下是webstorm的快捷键说明：

1. ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R)，目的是打开当前工程下任意目录的文件。
2. ctrl + j: 输出模板
3. ctrl + b: 跳到变量申明处
4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 可以显示当前文件的结构
7. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
8. alt + left/right:标签切换
9. ctrl + r: 替换
10. ctrl + shift + up: 行移动
11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
12. ctrl + d: 行复制
13. ctrl + shift + ]/[: 选中块代码<table>....</table>
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息(想象一下，如果在jquery的方法上查看详细信息，就直接可以看到实现代码了)，如果是php，那当时还是function的详细信息

17. ctrl + '-/+': 可以折叠项目中的任何代码块，包括htm中的任意nodetype=3的元素，function,或对象直接量等等。它不是选中折叠，而是自动识别折叠。

18. ctrl + '.': 折叠选中的代码的代码。

19. shift + esc: 当前激活的任意小窗口最小化，也可以是alt + '数字键'，数字在小窗口标题栏上有显示。

20. alt + '7': 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下，要比aptana的给力一些，但还是不能完全显示prototype下面的方法名。

21. 如果是*.html页面，则在文件名下的导航栏某DOM结构上右键，可以全选当前DOM结构。

22. 项目中添加对jQuery的支持。

File -> settings -> Javascript Libraries -> Add

在files中添加路径，在documentations urls中添加文档支持。这里边需要注意一下的是，要添加原始未压缩的代码，*.min.js版的方法是不会被提示。

添加完成后，右边菜单中还有一 download 按钮，单击之后，他会自动选择最新版的js库进行搜索，然后在弹出的列表中，再单击选择一个后，点击Download and Install之后，才会被下载。这块体验不是太好，没有checkbox,也没有radio，只是选中后整行变暗。

如果添加多个版本的jQuery，就可以直观的看到各个版本之间新方法的差别了。

* 在这项的子菜单中 Usage Scope 右边 Project 第二栏Library下单击，选择新添加的jQuery，使其对整个项目进行覆盖。

也可以在当前页面右键Use JavaScript Library 中选择最顶的刚添加的jQuery支持。

当然，并不是添加的越多越好，添加的多之后，在代码提示后会有数毫秒的延迟，需要谨慎选择最新版。

以下是jquery1.1在ws中效果，还有底下显示vim启动运行的提示，左侧显示数字标题栏名称。

以下vim常用快捷键：

一. 移动：
    h,j,k,l: 左，下，上，右。
    w: 下一个词的词首。W:下一个单词(不含标点)。
    e:下一个词的词尾。E:不含标点。
    b:上一个词的词首。B:不含标点。
    <>: v 模式选中后进行缩进。
二. 跳转：
    %: 可以匹配{},"",(),[]之间跳转。
    H、M、L：直接跳转到当前屏幕的顶部、中部、底部。
    #H：跳转到当前屏的第#行。
    #L：跳转到当前屏的倒数第#行。
    zt: 当前编辑行置为屏顶。
    zz: 当前编辑行置为屏中。
    zb: 当前编辑行置为屏底。
    G：直接跳转到文件的底部。
    gg: 跳转到文件首。
    gd: 跳转到光标所在函数和变量的定义。
    ():跳转到当前的行首、行尾。
    {}：向上、向下跳转到最近的空行。
    [{：跳转到目前区块开头。
    ]}：跳转到目前区块结尾。
    0: 跳转到行首。
    $: 跳转到行尾。
    2$: 跳转到下一行的行尾。
    #：跳转到该行的第#个位置。
    #G: 15G,跳转到15行。
    :#：跳转到#行。
三. 选择：
    1.v: 开启可视模式。 V: 开启逐行可视模式。
    2.^V: 矩形选择。
    3.v3w: 选择三个字符。
    4.ab：包括括号和()内的区域。
    5.aB：包括括号和{}内的区域。
    6.ib：括号()内的区域。
    7.iB：括号{}内的区域。
    8.aw：标记一个单词。
四. 编辑：
    1. 新增：
        i: 光标前插入。
        I: 在当前行首插入。
        a: 光标后插入。
        A: 当前行尾插入。
        O: 在当前行之前插入新行。
        o: 在当前行之后插入新行。
    2. 修改 c(change) 为主：
        r: 替换光标所在处的字符。
        R：替换光标所到之处的字符。
        cw: 更改光标所在处的字到字尾处。
        c#w: c3w 修改3个字符。
        C：修改到行尾。
        ci'：修改配对标点符号中的文本内容。
        di'：删除配对标点符号中的文本内容。
        yi'：复制配对标点符号中的文本内容。
        vi'：选中配对标点符号中的文本内容。
        s：替换当前一个光标所处字符。
        #S：删除 # 行，并以新文本代替。
    3. 删除 d(delete) 为主：
        D：删除到行尾。
        X: 每按一次，删除光标所在位置的前面一个字符。
        x: 每按一次，删除光标所在位置的后面一个字符。
        #x: 删除光标所在位置后面6个字符。
        d^: 删至行首。
        d$: 删至行尾。
        dd:(剪切)删除光标所在行。
        dw: 删除一个单词/光标之后的单词剩余部分。
        d4w: 删除4个word。
        #dd: 从光标所在行开始删除#行。
        daB: 删除{}及其内的内容。
        diB: 删除{}中的内容。
        n1,n2 d：将n1,n2行之间的内容删除。
    4. 查找：
        /：输入关键字，发现不是要找的，直接在按n，向后查找直到找到为止。
        ?：输入关键字，发现不是要找的，直接在按n，向前查找直到找到为止。
        *: 在当前页向后查找同一字。
        #: 在当前页向前查找同一字。
    5. 复制 y(yank)为主：
        yw: 将光标所在之处到字尾的字符复制到缓冲区中。
        #yw: 复制#个字到缓冲区。
        Y：相当于yy, 复制整行。
        #yy:表示复制从光标所在的该行往下数#行文字。
        p: 粘贴。所有与y相关的操作必用p来结合粘贴。
        ]p：粘贴到合适的缩进处。
        n1,n2 co n3：复制第n1行到第n2行之间的内容到第n3行后面。
    6. 大小写转换：
        gUU: 将当前行的字母改为大写。
        guu: 将当前行的字母改为小写。
        gUw: 将当前光标下的单词改为大写。
        guw: 将当前光标下的单词改为小写。
        a. 整篇大写:
        ggguG
        gg: 光标到文件第一个字符。
        gu: 把选择范围全部小写。
        G: 到文件结束。
        b. 整篇小写：gggUG
    7.  其它：
        J：当前行和下一行合并成一行。
    8.  移动：
        n1,n2 m n3：将n1行到n2行之间的内容移至n3行下。

这样几番配置认识：

1. 在javascript方面比aptana更接近于当前的流行开发趋势。

2. 在html,css上比dreamweaver更大胆，更有洞察力。

3. 在php上比zendstudio更带有一点英雄主义色彩。

4. 在java上，此公司提供另外一款工具：IntelliJ IDEA

可以看出纯英文的界面，多如牛毛的快捷键，不推荐新手使用。太方便就会容易培养惰性，而惰性是开发人员的大敌。

最后感谢火爷，是火爷教会我使用webstorm。火爷一直是走在技术前沿的pyer.

欢迎转载，但是必须保留本文的署名豪情（包含链接）。

本文链接

我的vim颜色主题

2011-12-29T06:19:00Z

download desert.vim

本文链接

JQ插件jkscroll应用到页面中的效果

2011-12-28T03:52:00Z

IE下运行后，刷新。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>豪情信息管理系统--滚动条</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" href="http://files.cnblogs.com/jikey/ui.jkscroll.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://files.cnblogs.com/jikey/jquery.jkscroll.js"></script> <BGSOUND CEP="0" /> <BGSOUND CEP="1" /> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/21px arial;background:#fff;} a{color:#000;text-decoration:none;} a:hover{color:#c00;text-decoration:underline;} .el_wrap{width:100%;padding-top:5px;} .jk-scrolldemo{width:700px;padding:1px;margin:20px auto;border:1px solid #ccc;background:#fff;} .cont{height:800px;} .el_header{background:#79c2f5;height:80px;line-height:80px;} .sys_logo{color:#fff;font-size:22px;font-family:微软雅黑;padding-left:20px;} .el_sidebar{position:relative;float:left;width:300px;background:#fff;border:1px solid #a7b7d1;} .el_sidecont{width:100%;height:550px;overflow:hidden;} .el_main{margin-left:310px;height:550px;border:1px solid #ccc;background:#fff;} .el_menu{zoom:1;} .el_menu li h1{line-height:30px;background:url(http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/claro/layout/images/accordion.png) repeat-x #f0f0f0;border-bottom:1px solid #ccc;} .el_menu li h1 a{display:block;height:30px;line-height:30px;padding-left:1em;font-size:14px;zoom:1;} .el_menu li ul{} .el_menu li ul li{width:100%;border:1px solid #d0e7c5;background:#F0FBEB;margin-bottom:5px;} .el_menu li ul li a{display:block;height:25px;line-height:25px;margin-top:5px;padding-left:3em;background:url(http://www.edojs.com/scripts/edo/res/images/icons/node.png) no-repeat 18px;} .el_submenu{padding:5px;zoom:1;} .el_submenu a{display:block;height:25px;line-height:25px;margin-top:5px;padding-left:3em;background:url(http://www.edojs.com/scripts/edo/res/images/icons/node.png) no-repeat 18px #F0FBEB;border:1px solid #d0e7c5;} .el_submenu a:hover{background:url(http://www.edojs.com/scripts/edo/res/images/icons/node.png) no-repeat 18px #fbfbda;text-decoration:none;zoom:1;} .el_main_cont{padding:10px;line-height:15px;overflow:hidden;} .el_main_cont h2{margin:20px 0;} .el_main_cont h3{margin:30px 0 10px;} .ele_text_res{color:#666;} </style> </head> <body> <div > <div >电子信息管理系统</div> </div> <div > <div > <div > <ul > <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> <li> <h1><a href="#">菜单一</a></h1> <ul> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a></li> </ul> </li> </ul> </div> </div> <div > <div > <h2>春江花月夜</h2> <p>春江潮水连海平，海上明月共潮生。</p> 　　<p>滟滟随波千万里，何处春江无月明。</p> 　　<p>江流宛转绕芳甸，月照花林皆似霰。</p> 　　<p>空里流霜不觉飞，汀上白沙看不见。</p> 　　<p>江天一色无纤尘，皎皎空中孤月轮。</p> 　　<p>江畔何人初见月？江月何年初照人？</p> 　　<p>人生代代无穷已，江月年年望相似。</p> 　　<p>不知江月待何人，但见长江送流水。</p> 　　<p>白云一片去悠悠，青枫浦上不胜愁。</p> 　　<p>谁家今夜扁舟子？何处相思明月楼？</p> 　　<p>可怜楼上月徘徊，应照离人妆镜台。</p> 　　<p>玉户帘中卷不去，捣衣砧上拂还来。</p> 　　<p>此时相望不相闻，愿逐月华流照君。</p> 　　<p>鸿雁长飞光不度，鱼龙潜跃水成文。</p> 　　<p>昨夜闲潭梦落花，可怜春半不还家。</p> 　　<p>江水流春去欲尽，江潭落月复西斜。</p> 　　<p>斜月沉沉藏海雾，碣石潇湘无限路。</p> 　　<p>不知乘月几人归，落月摇情满江树。</p> <h3>译文：</h3> <div > 　　 <p>春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好像与潮水一起涌出来。</p> 　　　　<p>月光照耀着春江，随着波浪闪耀千万里，所有地方的春江都有明亮的月光。</p> 　　　　<p>江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠在闪烁。</p> 　　　　<p>月色如霜，所以霜飞无从觉察。洲上的白沙和月色融合在一起，看不分明。</p> 　　　　<p>江水、天空成一色，没有一点微小灰尘，明亮的天空中只有一轮孤月高悬空中。</p> 　　　　<p>江边上什么人最初看见月亮，江上的月亮哪一年最初照耀着人？</p> 　　　　<p>人生一代代地无穷无尽，只有江上的月亮一年年地总是相像。</p> 　　　　<p>不知江上的月亮等待着什么人，只见长江不断地一直运输着流水。</p> 　　　　<p>游子像一片白云缓缓地离去，只剩下思妇站在离别的青枫浦不胜忧愁。</p> 　　　　<p>哪家的游子今晚坐着小船在漂流？什么地方有人在明月照耀的楼上相思？</p> 　　　　<p>可怜楼上不停移动的月光，应该照耀着离人的梳妆台。</p> 　　　　<p>月光照进思妇的门帘，卷不走，照在她的捣衣砧上，拂不掉。</p> 　　　　<p>这时互相望着月亮可是互相听不到声音，我希望随着月光流去照耀着您。</p> 　　　　<p>鸿雁不停地飞翔，而不能飞出无边的月光；月照江面，鱼龙在水中跳跃，激起阵阵波纹。</p> 　　　　<p>（此二句写月光之清澈无边，也暗含鱼雁不能传信之意。）</p> 　　　　<p>昨天晚上随意谈着梦中落下的花，可惜的是春天过了一半还不能回家。</p> 　　　　<p>江水带着春光将要流尽，水潭上的月亮又要西落。</p> 　　　　<p>斜月慢慢下沉，藏在海雾里，碣石与潇湘的离人距离无限遥远。</p> 　　　　<p>不知有几人能趁着月光回家，唯有那西落的月亮摇荡着离情，洒满了江边的树林。</p> 　　</div> </div> </div> </div> <script type="text/javascript"> $(function(){ //滚动条调用 $('.el_sidecont').jkScrollBar({ pattern:'jkscroll-simple' }); $('.el_main').jkScrollBar({ pattern:'jkscroll-blue', iframe: '#el_frame' }); }); </script> <BGSOUND CEP="2" /> </body> </html>

本文链接

Vim快捷键分类

2011-12-28T02:11:00Z

一. 移动：
    h,j,k,l: 左，下，上，右。
    w: 下一个词的词首。
    e:下一个词的词尾。
    b:上一个词的词首。
    <>: v 模式选中后进行缩进。
二. 跳转：
    %: 可以匹配{},"",(),[]之间跳转。
    H、M、L：直接跳转到当前屏幕的顶部、中部、底部。
    #H：跳转到当前屏的第#行。
    #L：跳转到当前屏的倒数第#行。
    zt: 当前编辑行置为屏顶。
    zz: 当前编辑行置为屏中。
    zb: 当前编辑行置为屏底。
    G：直接跳转到文件的底部。
    gg: 跳转到文件首。
    ():跳转到当前的行首、行尾。
    {}：向上、向下跳转到最近的空行。
    [{：跳转到目前区块开头。
    ]}：跳转到目前区块结尾。
    0: 跳转到行首。
    $: 跳转到行尾。
    2$: 跳转到下一行的行尾。
    #：跳转到该行的第#个位置。
    #G: 15G,跳转到15行。
    :#：跳转到#行。
    f'n'：跳转到下一个"n"字母后。
    ctrl+b: 向后翻一页。
    ctrl+f：向前翻一页。
    ctrl+u: 向后翻半页。
    ctrl+d: 向前翻半页。
    ctry+e: 下滚一行。

三. 选择：
    1.V: 选择一行。
    2.^V: 矩形选择。
    3.v3w: 选择三个字符。
四. 编辑：
    1. 新增：
        i: 光标前插入。
        I: 在当前行首插入。
        a: 光标后插入。
        A: 当前行尾插入。
        O: 在当前行之前插入新行。
        o: 在当前行之后插入新行。
    2. 修改 c(change) 为主：
        r: 替换光标所在处的字符。
        R：替换光标所到之处的字符。
        cw: 更改光标所在处的字到字尾处。
        c#w: c3w 修改3个字符。
        C：修改到行尾。
        ci'：修改配对标点符号中的文本内容。
        di'：删除配对标点符号中的文本内容。
        yi'：复制配对标点符号中的文本内容。
        vi'：选中配对标点符号中的文本内容。
        s：替换当前一个光标所处字符。
        #S：删除 # 行，并以新文本代替。
    3. 删除 d(delete) 为主：
        D：删除到行尾。
        X: 每按一次，删除光标所在位置的前面一个字符。
        x: 每按一次，删除光标所在位置的后面一个字符。
        #x: 删除光标所在位置后面6个字符。
        d^: 删至行首。
        d$: 删至行尾。
        dd:(剪切)删除光标所在行。
        dw: 删除一个单词/光标之后的单词剩余部分。
        d4w: 删除4个word。
        #dd: 从光标所在行开始删除#行。
        daB: 删除{}及其内的内容。
        diB: 删除{}中的内容。
        n1,n2 d：将n1,n2行之间的内容删除。
    4. 查找：
        /：输入关键字，发现不是要找的，直接在按n，向后查找直到找到为止。
        ?：输入关键字，发现不是要找的，直接在按n，向前查找直到找到为止。
        *: 在当前页向后查找同一字。
        #: 在当前页向前查找同一字。
    5. 复制 y(yank)为主：
        yw: 将光标所在之处到字尾的字符复制到缓冲区中。
        #yw: 复制#个字到缓冲区。
        Y：相当于yy, 复制整行。
        #yy:表示复制从光标所在的该行往下数#行文字。
        p: 粘贴。所有与y相关的操作必用p来结合粘贴。
        n1,n2 co n3：复制第n1行到第n2行之间的内容到第n3行后面。
    6. 大小写转换：
        gUU: 将当前行的字母改为大写。
        guu: 将当前行的字母改为小写。
        gUw: 将当前光标下的单词改为大写。
        guw: 将当前光标下的单词改为小写。
        a. 整篇大写:
        ggguG
        gg: 光标到文件第一个字符。
        gu: 把选择范围全部小写。
        G: 到文件结束。
        b. 整篇小写：gggUG
    7. 其它：
        J：当前行和下一行合并成一行。
    8. 移动：
        n1,n2 m n3：将n1行到n2行之间的内容移至n3行下。

五.退出：
     1. w filename: 保存正在编辑的文件filename
     2. wq filename: 保存后退出正在编辑的文件filename
     3. q：退出不保存。

六.窗口操作：
     1. ctrl+w p: 在两个分割窗口之间来回切换。
     2. ctrl+w j: 跳到下面的分割窗
     3. ctrl+w h: 跳到左边的分割窗。
     4. ctrl+w k: 跳到上面的分割窗。
     5. ctrl+w l: 跳到右边的分割窗。

本文链接

windows7下gvim多标签打开新文件

2011-12-28T01:25:00Z

From:http://www.setlt.net/archives/1463

原文：

具体方法如下：

1.在运行里面输入 redegit ,地球人都知道，这是打开windows的注册表。

2.依次打开HKEY_CLASSES_ROOT/*/shell，有点点击shell,新建项，输入项的名字，这是要在右键里显示的，建议输入Edit with Gvim.

3.右键点击刚建的 Edit With Gvim 项，再新建项，名字为 command , 修改其值为 C:\Program Files\Vim\vim73\gvim.exe "%1"

修改为：

d:\Program Files\vim73\gvim.exe -p --remote-tab-silent "%1"

本文链接

Jq-滚动条插件写法(二)

2011-12-05T08:16:00Z

接着上次的未完的部分。

接下是对滚轮的支持。

滚轮大概可以分为这么两类：

1. Firefox

Firefox 需要添加 'DOMMouseScroll' 事件支持，并取值是使用detail 为正负30。

2. IE,Opera,Safari,Chrome

而这四类，则直接在 window.onmousewheel = document.onmousewheel = $(dom).onmousewheel = fn

取值是：正负120，

虽然这两个取值是不一样的，但含义是一样的，正为向上，负为向下。

所以：

mousewheel: function(fun){
    return this.each(function(){
        var that = this;
            that.delta = 0; //滚动方向

        if($.browser.msie || $.browser.safari){ //IE Safari
            that.onmousewheel = function(){
                that.delta = event.wheelDelta; // IE,Opera,Safari,Chrome 使用wheelDelta 只取 +-120
                event.returnValue = false;
                fun && fun.call(that); //
            }
        } else { //Firefox
            that.addEventListener('DOMMouseScroll', function(e){
                that.delta = e.detail > 0 ? -1 : 1; // Firefox 使用 detail 只取 +-3
                e.preventDefault();
                fun && fun.call(that);
            }, false);
        }
    });

}

然后根据，上面总结的特性，添加代码：

$(that).mousewheel(function(){
    if(this.delta > 0){ //如果大于零，则向上，反之向下。
        currentTop -= 15;
    } else {
        currentTop += 15;
    }
    setScrollTop();
});

然后，添加对上下按钮的支持：

//向上按钮绑定事件
jKBarTop.bind('mousedown', function(e){
    that.setBarTop('up');

    $(document).mouseup(function(){
        $(document).unbind();
        clearTimeout(scrollTopTimer);
        scrollTopSpeed = 0;
    });
});

//向下按钮绑定事件
jKBarBot.bind('mousedown', function(e){
    that.setBarTop('bot');

    $(document).mouseup(function(){
        $(document).unbind();
        clearTimeout(scrollTopTimer);
        scrollTopSpeed = 0;
    });
});

//按钮设置高度方法
that.setBarTop = function(scrollDir){
    if(scrollDir == 'up'){
        currentTop -= 15;
    } else {
        currentTop += 15;
    }
    setScrollTop();

    scrollTopSpeed += 2;
    var t = 500 - scrollTopSpeed * 50;
    t <=0 && (t = 0);

    scrollTopTimer = setTimeout(function(){
        that.setBarTop(scrollDir);
    }, t);
}

基本代码块就这么多，然后是添加风格修改，

由于css属性选择器覆盖的特性，父类可以覆盖子类的权重。所以提供其它两种风格：

/* 简单 */
.jkscroll-wrap .jkscroll-simple{width:12px;background:#f2f2f2;border-left:1px solid #dadada;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-top,.jkscroll-wrap .jkscroll-simple .jkscroll-bar-bot{display:none;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-mid{top:0;right:-2px;background:#c0c0c0;border:none 0;}
.jkscroll-wrap .jkscroll-simple .hover{background:#909090;}
/* blue */
.jkscroll-wrap .jkscroll-gray{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y right 0 #edf7fa;}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-top,.jkscroll-wrap .jkscroll-gray .jkscroll-bar-bot{background:url(http://app.soche8.com/show/jscoll/s_bg.gif);}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-mid{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y -45px 0;border:1px solid #BCBCBC;}

由此，在调用时直接可以对样式进行操作，添加 .jkscroll-simple, .jkscroll-gray 两个样式，即可更换风格。

在调用时，提供三种风格的支持：

$('.jkscroll-wrap').jikeyScrollerBar({
    pattern: 'jkscroll-simple' //简版
    //pattern: 'jkscroll-gray' //灰色
    //pattern: 'jkscroll-blue' //蓝色
});

由于想更自动化一点，外部的包装层也使用jquery提供的方向进行动态的添加：

var jkScrollWrap = this.wrapInner('<div class="jkscroll-cont"></div>'),
jkScrollCont = jkScrollWrap.append('<div class="jkscroll-bar"><div class="jkscroll-bar-top"></div><div class="jkscroll-bar-mid"></div><div class="jkscroll-bar-bot"></div></div>');

这样的话，只要对内容高度进行限定，外边的滚动条，从DOM结构到js控制都是通过插件来实现，这样增加了插件的灵活性。

那最终的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>豪情-滚动条</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css">
*{margin:0;padding:0;}
body{font:12px/2 arial;background:#333;}
.jk-scrolldemo{width:700px;padding:1px;margin:20px auto;border:1px solid #ccc;background:#fff;}
.jkscroll-wrap{position:relative;padding:0;height:200px;overflow:hidden;}
.jkscroll-cont{position:relative;padding-right:15px;top:0px;z-index:9999;}
.jkscroll-cont-hover{background:#FFFBE1;}
.jkscroll-text{padding:5px;}
.jkscroll-text p{margin-bottom:10px;}
.jkscroll-bar{position:absolute;top:0px;right:0px;width:15px;height:100%;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y right 0 #edf7fa;z-index:10000;}
.jkscroll-bar-top,.jkscroll-bar-bot{position:absolute;height:15px;left:0px;width:100%;cursor:pointer;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) no-repeat 0 0 #bbdef6;}
.jkscroll-bar-top{top:0px;}
.jkscroll-bar-bot{bottom:0px;background-position:0 -15px;}
.jkscroll-bar-mid{position:absolute;top:15px;width:13px;height:100px;border:1px solid #A3C3D5;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -45px 0 #e0f1fc;}
.jkscroll-wrap .hover{background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -58px 0 #dceffc;}
/* 简单 */
.jkscroll-wrap .jkscroll-simple{width:12px;background:#f2f2f2;border-left:1px solid #dadada;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-top,.jkscroll-wrap .jkscroll-simple .jkscroll-bar-bot{display:none;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-mid{top:0;right:-2px;background:#c0c0c0;border:none 0;}
.jkscroll-wrap .jkscroll-simple .hover{background:#909090;}
/* blue */
.jkscroll-wrap .jkscroll-gray{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y right 0 #edf7fa;}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-top,.jkscroll-wrap .jkscroll-gray .jkscroll-bar-bot{background:url(http://app.soche8.com/show/jscoll/s_bg.gif);}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-mid{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y -45px 0;border:1px solid #BCBCBC;}
</style>
</head>
<body>
<div >
<div >
<div >
<p>“部长将带队50人的司局级干部调研组，深入每个省区对保障房开工率进行现场检查。”一位接近住建部的人士向记者透露，针对保障性安居工程开工“掺水”和质量问题，住建部将对地方的保障安居工程建设进行摸底调研。</p>
<p>上述人士介绍，检查方式分两步，先是市级部门自查，统计信息上报省建设厅，各省的建设厅派督察组对地方抽样检查，核实情况；再有以住建部部长姜伟新为代表的部司级领导组成的50人的督察组还将深入地方调研，确保数据的准确性。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
</div>

</div>
</div>
</body>
</html>

本文链接

Jq-滚动条插件写法(一)

2011-12-02T03:44:00Z

最近这水平越来越退步，想写个js组件，但一直担搁，退而求次之，搞个jq插件还是可以滴。没想到，想半天不得其法，没办法，只能参考一个吧。以下看客不要太认真全是抄来的。

原始地址：

http://app.soche8.com/show/jscoll/

jscoll 的优点就不一一列举了，说一下缺点：

1. 众多灵活的参数配置，在灵活的背后牺牲了傻瓜操作可控性，让一些不懂css的程序员，不懂jq的美工，咬牙切齿，遂有重写一个的想法。

2. jscoll的js代码虽然没有加密混淆，但是2字母式的变量名，让我望其却步，可维护可扩展性，无从谈起。

3. css全是内联style式的，这种虽然必杀效果的同时，也杀了页面可维护性，而且利用css属性选择器的特性，jq的配置参数没必要这么烦琐。

一、jq插件的写法：

1. 第一种是直接挂在$这个工厂函数上的。

jQuery.extend: 对jQuery对象本身扩展，不需要实例jq对象就可以使用。

$.extend({
    add: function(a, b){
        return a + b;
    }
});

//这是多个扩展的写法，如果是一个的话，则是：

$.add = function(a, b){
return a - b;
};

//调用时：

alert($.add(3, 4));

2. 第二种是需要应用在jq对象上的，所以是另外一种写法：

$.fn.extend({
    color: function(val){
        if(val == undefined){
            return $(this).css('color');
        } else {
            return $(this).css('color', val);
        }
    }
});

//要是只扩展一个的话：

$.fn.color = function(){

//do something

}

//调用时：

$('#text').color('#f00')

默认的滚动条，样式过于单一，又不是动态修改，故而废之，重新来一个：

在写插件之前，必先写html结构样式，大概解释一下：

reset

*{margin:0;padding:0;}
body{font:12px/2 arial;background:#333;}

例子准备包在最外层容器，以及里边内容的容器，.jkscool-wrap 是写relative 的原因是为了右边滚动条的定位，而.jkscoll-cont写relative的目的是为了内容的滚动。

.jk-scrolldemo{width:700px;padding:1px;margin:20px auto;border:1px solid #ccc;background:#fff;}
.jkscroll-wrap{position:relative;padding:0;height:200px;overflow:hidden;}
.jkscroll-cont{position:relative;padding-right:15px;top:0px;z-index:9999;}

里边要滚动内容的样式，没有什么特别之处：

.jkscroll-text{padding:5px;}
.jkscroll-text p{margin-bottom:10px;}

滚动条的样式，这里边比较讲究，首先来说，.jkscroll-bar 的position:absolute，这个是有来历的，由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，不写top,left两值。如果写这两个值又是怎么会事呢？如果写上这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点。

还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。

当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。

当然该是上个栗子的时候了：

搞懂上面这些，下面的css一切尽在掌握中，基本没有什么可点可圈之处。实在懒得图片都用原来的，只不过多了几个颜色值，如果那一天这个站点灰飞烟灭，那只会显示几个颜色块。

.jkscroll-bar{position:absolute;top:0px;right:0px;width:15px;height:100%;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y right 0 #edf7fa;z-index:10000;}
.jkscroll-bar-top,.jkscroll-bar-bot{position:absolute;height:15px;left:0px;width:100%;cursor:pointer;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) no-repeat 0 0 #bbdef6;}
.jkscroll-bar-top{top:0px;}
.jkscroll-bar-bot{bottom:0px;background-position:0 -15px;}
.jkscroll-bar-mid{position:absolute;top:15px;width:13px;height:100px;border:1px solid #A3C3D5;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -45px 0 #e0f1fc;}
.jkscroll-bar-mid-hover{background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -58px 0 #dceffc;}

当然中间还有一点css sprite的东西，不用多介绍了吧。

下面是结构：

<div class="jk-scrolldemo">
    <div class="jkscroll-wrap">
        <div class="jkscroll-cont">
            <div class="jkscroll-text">
                <p>“部长将带队50人的司局级干部调研组，深入每个省区对保障房开工率进行现场检查。”一位接近住建部的人士向记者透露，针对保障性安居工程开工“掺水”和质量问题，住建部将对地方的保障安居工程建设进行摸底调研。</p>
                <p>上述人士介绍，检查方式分两步，先是市级部门自查，统计信息上报省建设厅，各省的建设厅派督察组对地方抽样检查，核实情况；再有以住建部部长姜伟新为代表的部司级领导组成的50人的督察组还将深入地方调研，确保数据的准确性。</p>
                <p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
                <p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
                <p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
                <p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
                <p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
                <p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
                <p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
                <p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
                <p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
            </div>
        </div>
        
        <div class="jkscroll-bar">
            <div class="jkscroll-bar-top"></div>
            <div class="jkscroll-bar-mid"></div>
            <div class="jkscroll-bar-bot"></div>
        </div>
        
    </div>
</div>

这里边有说明的是，“注意这块”，部分是将来append进来的，但是在界面布局初期，为了最终的效果调试是要写上的。

最终静态页面的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>豪情-滚动条</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/2 arial;background:#333;}
.jk-scrolldemo{width:700px;padding:1px;margin:20px auto;border:1px solid #ccc;background:#fff;}
.jkscroll-wrap{position:relative;padding:0;height:200px;overflow:hidden;}
.jkscroll-cont{position:relative;padding-right:15px;top:0px;z-index:9999;}
.jkscroll-text{padding:5px;}
.jkscroll-text p{margin-bottom:10px;}
.jkscroll-bar{position:absolute;top:0px;right:0px;width:15px;height:100%;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y right 0 #edf7fa;z-index:10000;}
.jkscroll-bar-top,.jkscroll-bar-bot{position:absolute;height:15px;left:0px;width:100%;cursor:pointer;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) no-repeat 0 0 #bbdef6;}
.jkscroll-bar-top{top:0px;}
.jkscroll-bar-bot{bottom:0px;background-position:0 -15px;}
.jkscroll-bar-mid{position:absolute;top:15px;width:13px;height:100px;border:1px solid #A3C3D5;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -45px 0 #e0f1fc;}
.jkscroll-bar-mid-hover{background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -58px 0 #dceffc;}
</style>
</head>
<body>
<div >
<div >
<div >
<div >
<p>“部长将带队50人的司局级干部调研组，深入每个省区对保障房开工率进行现场检查。”一位接近住建部的人士向记者透露，针对保障性安居工程开工“掺水”和质量问题，住建部将对地方的保障安居工程建设进行摸底调研。</p>
<p>上述人士介绍，检查方式分两步，先是市级部门自查，统计信息上报省建设厅，各省的建设厅派督察组对地方抽样检查，核实情况；再有以住建部部长姜伟新为代表的部司级领导组成的50人的督察组还将深入地方调研，确保数据的准确性。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
</div>
</div>

<div >
<div ></div>
<div ></div>
<div ></div>
</div>

</div>
</div>
</body>
</html>

说了半天，下面才是本文的重点：

二、开始写：

上半部分是创建一个匿名函数，目的就是为了我们继续无耻的使用'$'符号，下半部分是本插件的调用。这里边的 this 指的是要调用的那个DOM元素，这里是：$('.jkscroll-wrap') ，所以这就是前面准备的“注意这里”，删除空格后添加到 $('.jkscroll-wrap')的后半部分。当然原来的肯定要删除。

(function($){
    $.fn.jikeyScrollerBar = function(options){
        //添加滚动条DOM结构
        var jkScrollCont = this.append('<div class="jkscroll-bar"><div class="jkscroll-bar-top"></div><div class="jkscroll-bar-mid"></div><div class="jkscroll-bar-bot"></div></div>');

    };
})(jQuery);

//插件调用
$('.jkscroll-wrap').jikeyScrollerBar();

这里又有一个问题，jq操作增加DOM的几个方法：

append: 插入到里边内容的后边。那要是前边呢，则是：prepend.

如：

//原始：<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");

//结果：
//<p><b>Hello</b>I would like to say: </p>

那要是在自身的前边后边插入呢：

//往后插：
//原始：<p>I would like to say: </p>
$("p").after("<b>Hello</b>");

//结果：
//<p>I would like to say: </p><b>Hello</b>

//往前插：
//原始：<p>I would like to say: </p>
$("p").before("<b>Hello</b>");

//结果：
//<b>Hello</b><p>I would like to say: </p>

好多人感觉写js,jq小东西无从下手，其实说白了一文不值，写插件过程就是：1. 先创建可编辑DOM元素 -> 2. 用jq找到要操作DOM元素 -> 3. 对DOM元素进行初始化处理(就是刚打开页面的时候极端值的设置) -> 4. 与用户发生交互时的事件定制 -> 5. 完善其它遗漏 -> 6. 完成发布。

大概就这样，用jq写插件众多好处是：jq选择器是他的强项，兼容性问题基本不用考虑，调用方便。

坏处是：由于受到jq本身性能等问题的影响，如果没有js基础，驾驭不好jq，就会造成连环式的恶劣后果。所以，插件也是不好写的。

刚才弄了半天就是完成第1步，创建可编辑的DOM元素，

下来完成第2步，用jq寻找要操作的DOM元素，根据this.append返回的对象，得到以下所要用到的需要操作的jq对象。

var jkBar = jkScrollCont.find('.jkscroll-bar');
    jKBarTop = jkScrollCont.find('.jkscroll-bar-top'), //顶部按钮
    jKBarMid = jkScrollCont.find('.jkscroll-bar-mid'), //中间滚动条
    jKBarBot = jkScrollCont.find('.jkscroll-bar-bot'), //底部按钮
    jKCont = jkScrollCont.find('.jkscroll-cont'); //内容区域

第3步：进行初始化处理，由于滚动的内容跟滚动条要形成一定的关系，所以滚动条的高度也要动态的设置，至于为什么这样写，没看懂抄的。jKBarMid.hover();是为滚动条添加a:hover效果，没有什么特别的意义。

第4步：交互事件的定制，这里边主要是jq事件 bind,live,delegate几个区别，有兴趣看看，delegate http://article.yeeyan.org/view/213582/179910。

//滚动条绑定滚动事件
jkBar.delegate('div', 'mousedown', function(e){ //为什么要采取 delegate http://article.yeeyan.org/view/213582/179910
    var pageY = e.pageY, //鼠标的位置
        jkBarTop = parseInt($(this).css('top')); //中间滚动条当前的高度

    $(document).mousemove(function(e2){
        currentTop = jkBarTop + e2.pageY - pageY;
        setMidTop();

        //拖动时取消选择文本
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    });

    $(document).mouseup(function(){
        $(document).unbind();
    });

    return false;
});

//设置高度
function setMidTop(){

    currentTop < jkBarBtnWidth && (currentTop = jkBarBtnWidth); //防止拖出向上按钮
    currentTop > wrapH - jkBarBtnWidth - jkBarH && (currentTop = wrapH - jkBarBtnWidth - jkBarH); //防止拖出向下按钮
    jKBarMid.css({top: currentTop}); //设置滚动条离顶的距离

    var jkContTop = ((currentTop - jkBarBtnWidth) * contH)/(wrapH - 2 * jkBarBtnWidth);

    jKCont.css({top: -jkContTop}); //设置内容离顶的距离
};

到此的效果是：

本文链接