Javascript 在Rails应用程序中使用jQuery插件_Javascript_Jquery_Ruby On Rails

Javascript 在Rails应用程序中使用jQuery插件

javascript jquery ruby-on-rails

Javascript 在Rails应用程序中使用jQuery插件,javascript,jquery,ruby-on-rails,Javascript,Jquery,Ruby On Rails,我目前正在尝试为Rails应用程序中的登录设置一个非常基本的lightbox效果。我正在使用Lightbox Evolution插件。使用说明如下：确保它是有效的DOCTYPE 将jQuery库lightbox CSS和lightbox js文件包含在要使用lightbox的页面头部初始化插件：会话路径（资源名称））do | f |%> 正确%> 所以问题是我做错了什么，当我点击app/views/welcome/new.html.erb中的“Login”链接时，它会将我带到登录页

我目前正在尝试为Rails应用程序中的登录设置一个非常基本的lightbox效果。我正在使用Lightbox Evolution插件。使用说明如下：

确保它是有效的DOCTYPE
将jQuery库lightbox CSS和lightbox js文件包含在要使用lightbox的页面头部

初始化插件：

会话路径（资源名称））do | f |%>


正确%>

所以问题是我做错了什么，当我点击app/views/welcome/new.html.erb中的“Login”链接时，它会将我带到登录页面，而不是使用lightbox jQuery弹出它？

尝试将

href=“users/sign_in”

更改为

href=“#”

。因为如果你只想点击链接，让lightbox弹出登录表单，链接其实并不重要

<!DOCTYPE html>
<html>
<head>
   <title>Test App</title>
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= stylesheet_link_tag    "jquery.lightbox.css", :media => "all" %>   
   <%= javascript_include_tag "application" %>
   <%= javascript_include_tag "jquery.lightbox.min" %>   
   <%= csrf_meta_tags %>
</head>
<body>
   <p class="notice"><%= notice %></p>
   <p class="alert"><%= alert %></p>
   <%= yield %>

   <script type="text/javascript">
 jQuery(document).ready(function($){
    $('.lightbox').lightbox();
  });
   </script>

</body>
</html>

<h1>Landing Page</h1>
<a href="users/sign_in" class="lightbox">Login</a>

<!DOCTYPE html>
<html>
<head>
   <title>MetaLinx Material Management</title>
   <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/containers.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scales.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/welcome.css?body=1" media="all" rel="stylesheet" type="text/css" />
   <link href="/assets/jquery.lightbox.css?body=1" media="all" rel="stylesheet" type="text/css" />   
   <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/containers.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.ui.timepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.datetimepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.colorpicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filter-box.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-multiselect.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-select.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.remote-form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.pjax.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_nested_form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.nested-form-hooks.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.widgets.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/custom/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/rails_admin.js?body=1" type="text/javascript"></script>
<script src="/assets/scales.js?body=1" type="text/javascript"></script>
<script src="/assets/welcome.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.lightbox.min.js?body=1" type="text/javascript"></script>   
    <meta content="authenticity_token" name="csrf-param" />
 <meta content="NGWSCp8qKAwi52ViQNfSP+2WG4teWxwOzCDCFfqQaLc=" name="csrf-token" />
 </head>
 <body>
   <p class="notice"></p>
   <p class="alert"></p>
   <h1>Landing Page</h1>
 <p>Find me in app/views/welcome/index.html.erb</p>

<a href="users/sign_in" class="lightbox">Login</a>


    <script type="text/javascript">
      jQuery(document).ready(function($){
      $('.lightbox').lightbox();
    });
    </script>
</body>

<h2>Sign in</h2>

    <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
  <div><%= f.label :email %><br />
  <%= f.email_field :email, :autofocus => true %></div>

  <div><%= f.label :password %><br />
  <%= f.password_field :password %></div>

  <% if devise_mapping.rememberable? -%>
    <div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
  <% end -%>

  <div><%= f.submit "Sign in" %></div>
<% end %>

<%= render "devise/shared/links" %>