类别归档：JavaScript

jQuery嵌套事件绑定时，如果逻辑处理不当，有时会出现事件重复绑定的问题，例如下面的例子。

点击“添加文本框”按钮时，会在div中新增一个textarea，同时使用bind方法为class为demo-textarea的元素绑定click事件

相关代码如下所示：

<script>
$(document).ready(function(){
  $("#add-btn").on("click",function(){
    $("#first-p").after('<p id="demo-p"><textarea class="demo-textarea">点击textarea弹出提示</textarea></p>');
    $("#demo-div").find(".demo-textarea").bind("click",function(){
      alert("Textarea Clicked!"); ...

使用jQuery Raty，可以很方便的在页面上嵌入一个评分组件，如下所示：

使用方法很简单，首先从https://github.com/wbotelhos/raty下载raty的源代码（依赖于jquery）

然后在页面中引入相应的js文件、css文件、图片资源，在需要添加评分组件的元素上（比如span标签）添加下面的jquery代码即可：

$('span').raty();

以上为jQuery Raty的缺省使用方法，此外，该组件还支持丰富的传入参数和回调函数，例如：

设置jQuery Raty的初始评分：

评分回调函数

如果需要根据后台动态设置初始评分，可以使用回调函数实现。例如使用div中的data-attribute属性：

IE浏览器select标签绑定click事件，修改自身属性时，点击select弹出下拉列表时会出现异常行为。

例如下面的select标签，绑定click事件，在使用IE浏览器访问时，点击select标签弹出下拉列表后会迅速隐去。使用chrome，firefox等浏览器时正常。

Option 1Option 2Option 3 (onclick) selected value is:

绑定change事件时可正常弹出

Option 1Option 2Option 3 (onchange) selected value ...

My97DatePicker是一款十分不错的日期时间控件。

将My97DatePicker整个目录包,放入项目的相应目录下

My97DatePicker目录下各文件的作用:

 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名

各目录及文件的用途:

• WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
• calendar.js 日期库主文件,无需引入
• 目录lang 存放语言文件,可以根据需要清理或添加语言文件
• 目录skin 存放皮肤的相关文件,可以根据需要清理或添加皮肤文件包

 可以根据自己的需要,删除不必要的皮肤和语言文件

该控件的使用方法相对比较简单，引用WdatePicker.js之后，通过WdatePicker（）即可弹出日期控件，效果如下所示。

<- 点我弹出日期控件

上例代码如下：

<input class="Wdate" onclick="WdatePicker()" type="text" /> <font color="red"><- 点我弹出日期控件</font>

此外，该控件还可以对事件进行绑定，下面的例子展示了onpicked事件的绑定过程

<- onpicked事件

上例代码如下：

<input class="Wdate" onclick="WdatePicker({onpicked:onpicked})" type="text" /> <font color="red"><- onpicked事件</font> ...

Highlightjs是一款优秀的代码高亮Js组件，可以很方便地对各种语言编写的代码添加语法高亮样式。

然而，Highlightjs默认是不包括显示代码行号（Line Number）这一特性的，不过可以通过简单的JS代码和CSS样式表实现对Highlightjs的行号显示功能。

参考博文链接：syntax-highlighting-with-highlightjs

Javascript代码：

//numbering for pre>code blocks
$(function(){
    $('pre code').each(function(){
        var lines = $(this).text().split('\n').length - 1;
        var $numbering = $('<ul/>').addClass('pre-numbering');
        $(this)
            .addClass('has-numbering')
            .parent()
            .append($numbering);
        for(i=1;i<=lines;i++){
            $numbering.append($('<li/>').text(i));
        }
    });
});

实际上很简单，首先找到代码块$('pre code')。然后取得内容并按照换行符split，我们可以得到代码块的行数。最后，我们构建一个包含从数字1到行数n的行号列表，然后把这个列表追加到</pre>和</code>的闭合标签之间。

此外通过添加适当的css样式将行号列表渲染到代码的左手边缘。使用时请结合页面样式对下面的css做出相应修改。

pre {
    position: relative;
    margin-bottom: ...