Question

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

确保它是有效的DOCTYPE。
在您要使用灯箱的页面的头部包含jQuery库灯箱CSS和灯箱js文件
初始化插件：

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

jquery.lightbox.min.js和jquery.lightbox.css分别位于vendor / assets / javascripts和vendor / assets / stylesheets目录中。

我已将lightbox脚本包含在application.html.erb文件中，因为我打算在网站上的其他位置使用灯箱效果。

我的application.html.erb文件如下所示：

<!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>

我的目标网页是app / views / welcome / index.html.erb：

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

我根据说明使用“lightbox”类。

当我转到localhost：3000时，html在开发环境中构建如下：

<!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>

我正在使用设计进行身份验证，因此它为users / sign_in设置路由。当我点击上面的链接时，它会将我带到页面users / new，但它不会在灯箱中弹出。生成的html看起来像：

应用程序/视图/会话/ new.html.erb：

<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" %>

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

Answer 1

尝试将href="users/sign_in"更改为href="#"。如果您只想点击它并让灯箱弹出登录表单，链接真的无所谓。

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

1 个答案: