Simple Javascript Joyride plugin in rails

问题:

I'm afraid my plugin isn't working properly because of a misunderstanding of rails. I'm adding zurbs joyride plugin to an index page.

I have the following in vendor/assets/javascripts/joyride -

joyride-2.0.3.js
jquery.cookie.js
modernizr.mq.js

And referencing them the following way in application.js -

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require joyride/joyride-2.0.3
//= require joyride/modernizr.mq.js
//= require joyride/jquery.cookie
//= require_tree .

And the appropriate css in vendor/assets/stylesheets -

joyride-2.0.3.css

And Referenced in application.css -

 *= require_self
 *= require bootstrap
 *= require joyride-2.0.3

Now in my index view-

<h1 id="pageTitle">Title of the page</h1>

<ol id="list_index_tour">
 <li data-id="pageTitle">Here is where the title of your page goes!</li>
</ol>

<script>
  $(window).load(function() {
    $("#list_index_tour").joyride({
    });
  });
</script>

The tour is not initiated, instead I have an ordered list displayed. There is an application layout. What am I missing here?

回答1:

You could try to make a manifest file for this plugin. Create an index.js inside your subfolder and reference your assets.

In your application.js you can have just:

//= require joyride

You can also try to drop the .js part in //= require joyride/modernizr.mq.js

回答2:

Tmacram,

I answered a similar question Here

The original answer was correct about better organization of included files within Rails, but that wasn't causing your issue. The real reason this wasn't working is that Zurb's own instructions for setup are misleading. They say you can use whatever ID you want for your <ol> list that holds the steps of your guided tour, but you actually can't out of the box.

Zurb's code for joyride is dependent upon a specific ID between the CSS/Javascript. This ID and the relevant code is located within the included joyride.css file. The ID used there is "joyRideTipContent." I've pasted the relevant couple lines of code from the joyride.css file (they're near the very top):

#joyRideTipContent { display: none; }
.joyRideTipContent { display: none; }

If you would prefer to use a different ID, simply change the above code in the css file as follows and then it will work (I've included the name from your code snippet above):

#list_index_tour{ display: none; }
.list_index_tour{ display: none; }

Alternatively, you could just change the ID and selector of your <ol> to be "joyRideTipContent" and it would work right out of the box.

回答3:

i have been having the same issue with joyride, i just got it working , just to complete what already said in my case

first step : in the vendor/assets/javascripts i remove the js at the end of the file name and also in the application.js place the require file in the same order from the demo. and also require the css file

second step : i create a partial that contain the code for the joyride place it in the folder that will contain the joyride views and render it in the layout/application.html.erb place after my footer

3rd step: i convert the javascript in coffeescript with js2coffee.org exemple from the demo

$(window).load(function() {
    $('#joyRideTipContent').joyride({
      autoStart : true,
      postStepCallback : function (index, tip) {
      if (index == 2) {
        $(this).joyride('set_li', false, 1);
      }
    },
    modal:true,
    expose: true
    });
  });

to coffeescript:

 $(window).load ->
  $("#joyRideTipContent").joyride
    autoStart: true
    postStepCallback: (index, tip) ->
      $(this).joyride "set_li", false, 1  if index is 2

    modal: true
    expose: true

so basically this is the step that i did and it works for me .

P.s try not to put the file in another folder inside vendor/assets/javascripts , they are going to be compiled anyway.