JQuery标尺不起作用

Question

我正在努力让JQuery标尺（http://ruler.hilliuse.com/）（https://github.com/hilliuse/Ruler）正常工作，但它没有发生。

    $('body').ruler({
    vRuleSize: 18,
    hRuleSize: 18,
    showCrosshair : true,
    showMousePos: true
}); 

$('#ruler_box').ruler({
    vRuleSize: 18,
    hRuleSize: 18,
    showCrosshair : true,
    showMousePos: true
});

请参阅http://jsfiddle.net/A3xGm/

小提琴

Answer 1

该插件取决于Modernizr。

检查一下jsfiddle - 当您将modernizr添加为外部资源时，它会起作用。

// Just because jsfiddle links need to be accompanied by code
$(function() {
  $('body').ruler();    
});

Here's a link to the latest version of modernizr

Answer 2

您可以尝试jquery-ui.ruler。是一个简单的jqueryUI插件，具有nive功能：

• 多个单位（px，mm，cm，in）
• 三种类型的蜱（主要，次要， 微）
• 鼠标跟踪
• 支持sub-divs

Answer 3

jQuery标尺将与modernizr一起使用。所以包括modernizer.js。

这是modernize.js文件的链接 http://modernizr.com/downloads/modernizr-latest.js

 // Just because jsfiddle links need to be accompanied by code
 $(function() {
     $('body').ruler();    
 });

jsfiddle