1
私のレールアプリケーションは、ビューページ内のスクリプトタグ内に置かれた場合にのみJsコードを使用し、アセットjsフォルダのjsファイルには入れません。ここでJavascriptはビューページに配置されている場合のみ動作します
コードは次のとおりです。
<script type="text/javascript">
var menu = document.querySelectorAll(".side-menu")[0],
closedPosition = menu.offsetWidth - 15; //make sure there are 15 pixels showing
Draggable.create(menu, {
type:"x",
throwProps:true, //enables the momentum-based flicking (requires ThrowPropsPlugin)
edgeResistance: 0.9, //you can set this to 1 if you don't want the user to be able to drag past the snap point. This controls how much resistance there is after it hits the max/min.
maxDuration:0.3, //don't let the animation duration exceed 0.3 second (you can tweak this too of course)
bounds: {maxX:closedPosition, minX:0},
onClick: function() { //when the user clicks/taps on the menu without dragging, we'll toggle it...
if (this.target._gsTransform.x === closedPosition) {
TweenLite.to(this.target, 0.3, {x:0});
} else {
TweenLite.to(this.target, 0.3, {x:closedPosition});
}
},
snap: {
x: [0, closedPosition]
}
});
</script>
これは、レイアウトフォルダ内のapplication.html.erb
<!DOCTYPE html>
<html>
<head>
<title>CityScape</title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js'%>
<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/utils/Draggable.min.js'%>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
ある質問は：それは資産から働くようにする方法？あなたのapplication.html.erbファイルで
<script src="/assets/js/jquery/1.7.1/jquery.min.js"></script>