セレクトボックスで画像を選べるようにする
セレクトボックスで画像が選べるようにします。
セレクトボックスとは、コレ
今回はセレクト時に画像が表示されるようにします。
こちらに、CSS,JavaScriptをまとめてあります。
GitHub - nakajimakenta/ImageSelect
CSS,JavaScriptを習得し、
index.htmlのheadの部分に以下を追加。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="imageselect.js"></script>
<link href="imageselect.css" media="screen" rel="stylesheet" type="text/css" />
その後、body内で以下を記述します。
<body>
<select name="logo">
<option value="1">画像パス</option>
<option value="2">画像パス</option>
<option value="3">画像パス</option>
<option value="4">画像パス</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('select[name=logo]').ImageSelect({dropdownWidth:425});
});
</script>
</body>
画像のパスは適当に入れてください。
これで完成です。
こんな感じになります。
パンくずリストって知ってる？
そもそも、パンくずリストとは？
ホーム>ユーザー一覧
↑こういうやつです。
Railsには、パンくずリストが簡単に作れるgemがあります
Gemfileに以下を記述
gem "breadcrumbs_on_rails"
bundle install を実行
パンくずリストを追加したいページのコントローラに
add_breadcrumb '名前', :パス
という感じに記述します。
例
add_breadcrumb "User", :users_path
あとは、表示したいページのview側に以下を記述するだけです
<%= render_breadcrumbs separator: ' > ' %>
