Я пытаюсь внедрить замечательную тему в приложение для рельсов 4 для учебных целей. Тема, расположенная здесь: http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/Как инициализировать переменную с javascript в ruby on rails?
Я распределил .css и .js в своих соответствующих каталогах.
vendor/assets/stylesheets/
vendor/assets/javascripts/
Я добавил новые файлы в трубопроводе средств для приложения, чтобы загрузить их
CSS
app/assets/stylesheets/application.css
*= require style
*= require normalize
*= require demo
*= require_tree .
*= require_self
файлы Javascript загружаются, я могу видеть его на заголовок исходного кода страницы ,
Вот Javascript Файл:
var Menu = (function() {
var $container = $('#rm-container'),
$cover = $container.find('div.rm-cover'),
$middle = $container.find('div.rm-middle'),
$right = $container.find('div.rm-right'),
$open = $cover.find('a.rm-button-open'),
$close = $right.find('span.rm-close'),
$details = $container.find('a.rm-viewdetails'),
init = function() {
initEvents();
},
initEvents = function() {
$open.on('click', function(event) {
openMenu();
return false;
});
$close.on('click', function(event) {
closeMenu();
return false;
});
$details.on('click', function(event) {
$container.removeClass('rm-in').children('div.rm-modal').remove();
viewDetails($(this));
return false;
});
},
openMenu = function() {
$container.addClass('rm-open');
},
closeMenu = function() {
$container.removeClass('rm-open rm-nodelay rm-in');
},
viewDetails = function(recipe) {
var title = recipe.text(),
img = recipe.data('thumb'),
description = recipe.parent().next().text(),
url = recipe.attr('href');
var $modal = $('<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>');
$modal.appendTo($container);
var h = $modal.outerHeight(true);
$modal.css('margin-top', -h/2);
setTimeout(function() {
$container.addClass('rm-in rm-nodelay');
$modal.find('span.rm-close-modal').on('click', function() {
$container.removeClass('rm-in');
});
}, 0);
};
return { init : init };
})();
Существует скрипт в HTML файл, мне нужно работать, но я не смог реализовать его на рельсы 4.2.
<script type="text/javascript">
$(function() {
Menu.init();
});
</script>
Я пробовал оставить сценарий в .html.erb файла, но он не работает, я также пытался добавить сценарий к файлу JavaScript в приложений/активы/JavaScripts/controller.js но тоже не работает.
Это работает, если я нажимаю на html-файл шаблона на своем компьютере, но как его реализовать на рельсах?
@the_call_me_joe, пожалуйста, проверьте файл application.js, я думаю, что ваш js не включен в это. – Arvind
@Arv Мне жаль, что я забыл включить его в вопрос. Все файлы .js добавлены в application.js. Спасибо. –
@the_call_me_joe Я только что включил тему, я обнаружил, что мы должны добавить js внизу, а не сверху, поскольку мы получили дефолт. Вы можете найти здесь код https://github.com/arvindvyas/3dtheme – Arvind