chardinjs在Ruby on Rails中无法工作。

3
你好,我尝试在我的项目中使用 chardin js 网站,但是它似乎无法正常工作。我正在使用rails 3.2.14和ruby 1.9.3,chardin js版本为0.1.3,请帮助我解决问题。这里我附上了fiddle链接。
编辑: 在我的项目中尝试相同的事情(在视图中),但是当我点击"See it on action"时,图片没有出现。
Homes.coffee
$('body').chardinJs()

$('a[data-toggle="chardinjs"]').on 'click', (e) ->
    e.preventDefault()
    if $('.jumbotron img').is(':visible')
        ($('body').data('chardinJs')).toggle()
    else
        $('.jumbotron img').animate height: 250, 600, ->
            ($('body').data('chardinJs')).toggle()

$('body').on 'chardinJs:stop', ->
    $('a.btn.primary').off('click').text('See more on Github')
        .attr('href', 'https://github.com/heelhook/chardin.js')
    $('a#opentour').css display: 'block'

将CSS与Fiddle中的相同

homes/show.html.erb

  <body>
  <div class="container">
  <div class="jumbotron">
  <h1 data-intro="Project title" data-position="right">Chardin.js</h1>
  <p class="lead">
  Simple overlay instructions for your apps.
  </p>
  <img src="http://s11.postimg.org/5j9wr7n8z/chardin.png" data-intro="An awesome 18th-     century painter, who found beauty in everyday, common things." data-position="right" />
  <a id="asdfg" href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" data-position="left">See it in action</a>
  <a href="" id="opentour" class="hide" data-toggle="chardinjs">Or open it again</a>
  <div class="credits">
  <p data-intro="Author of this plugin, aka Pablo Fernandez" data-position="right">
    Baked with
    <b>&lt;3</b>
    by
    <a href="https://github.com/heelhook">@heelhook</a>.
  </p>
  </div>
  </div>
  <div class="links">
  <p id="links" data-intro="Links to Github, Twitter, etc." data-position="top">
  </p>
  </div>
  </div>
  </body>

application.js

//= require jquery
//= require jquery_ujs
//= require chardinjs.min
//= require_tree .

你的代码片段缺少chardin.js库,这会让事情变得困难。 - apneadiving
我已经修复了。将chardinjs.js作为外部资源添加。 - Ajay Barot
http://jsfiddle.net/ABPrime/5ah1wsyz/1/ - Ajay Barot
2个回答

1
我觉得你的问题可能与你的要点相同:你认为GitHub是CDN,但实际上并不是。
对于JavaScript,请使用https://cdn.rawgit.com/heelhook/chardin.js/master/chardinjs.js 对于CSS,请使用https://cdn.rawgit.com/heelhook/chardin.js/master/chardinjs.css

是的,你说得对。现在请看一下我的问题,我需要什么。 - Ajay Barot
更改此链接:.attr('href','https://github.com/heelhook/chardin.js'),例如尝试google.com。 - apneadiving
谢谢回复。我尝试了google.com,但图片仍然无法显示。 - Ajay Barot
我在点击事件的data-toggle后面放置了console.log,但是控制台没有输出信息。 - Ajay Barot
好的...找到一种在你的fiddle中说明它的方法,因为:https://www.evernote.com/shard/s244/sh/2cbf0a1c-e872-4b69-b013-23c8833cf97d/985ca1c2058b287fda87aba35a90a43c - apneadiving

1
实际上,我错误地将两个文件(chardinjs.js和chardinjs.min.js)都放在了assets/javascript中。在application.js文件中,使用require_tree加载所有树形JS文件,这是一个问题,还更改了homes.coffee文件中的document.ready

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接