私は現在、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 ディレクトリにあります。
サイトの他の場所でライトボックス効果を使用する予定なので、ライトボックス スクリプトを 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>
指示に従ってクラス「ライトボックス」を使用します。
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>
認証にdeviseを使用しているので、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 の「ログイン」リンクをクリックすると、ライトボックス jQuery を使用してポップアップするのではなく、ログイン ページに移動するように、何が間違っているのでしょうか。