Как переключить темы Bootswatch в Meteor?

Question 1

Я впервые создаю приложение с помощью Meteor. Из-за проблемы с доступностью мы хотели бы предложить пользователям две разные темы Bootswatch. Я нашел здесь очень полезное объяснение того, как переключать темы Bootswatch:

Как динамически менять темы после нажатия раскрывающегося меню тем

(который ссылается на удобную скрипку в принятом ответе: http://jsfiddle.net/82AsF/)

Я попытался разместить предоставленный javascript внутри myapp.html в теге <head>. Я также попытался поместить его в файл myapp.js. (Затем я попытался разместить во многих разных местах, чтобы посмотреть, что произойдет ;-))

Ничего из того, что я пробовал, не работает, и кажется, что это фреймворк Meteor, который, по понятным причинам, «мешает». Есть ли подход, который будет работать для переключения тем Bootswatch в приложении Meteor?

meteor bootswatch

0

user3469344 27 Мар 2014 в 20:08

Я могу использовать любую из тем для bootwatch по умолчанию - работает должным образом. Это переключение тем, которое не приводит к изменению темы (без изменения ссылки в заголовке).

–

user3469344

27 Мар 2014 в 20:38

Итак, когда вы меняете theme-name в такой ссылке: <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/theme-name/bootstrap.min.css"> ничего не происходит?

–

JohnAllen

27 Мар 2014 в 20:42

У вас установлен bootstrap3? Мы не используем это, просто bootstrap-accounts-ui, который, как я полагаю, вероятно, включает bootstrap. Я бы попытался удалить пакеты начальной загрузки, кроме bootstrap-accounts-ui, затем смените тему и посмотрите, что произойдет.

–

JohnAllen

27 Мар 2014 в 20:44

Для исходной темы, да, я могу изменить ее на любую тему, которую я хочу, и она работает, как ожидалось, однако, когда я пытаюсь воспользоваться преимуществом, если динамическое переключение темы с использованием подхода, описанного в упомянутом вопрос, никакого динамического переключения не происходит.

–

user3469344

27 Мар 2014 в 20:48

Этот вопрос: stackoverflow.com/questions/10646570 заставил меня изменить функцию jquery следующим образом:

$(function(){   var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');   themesheet.appendTo('head');   $('body').on('click', '.theme-link', function (e) {     var themeurl = themes[$(this).attr('data-theme')];      themesheet.attr('href',themeurl);   }); });

Теперь она динамически переключает темы bootswatch в моем приложении Meteor с помощью раскрывающегося списка - очень похоже на сайт bootswatch.

–

user3469344

27 Мар 2014 в 23:50

Answer

Динамическое переключение тем bootwatch выполняется легко, как показано в исходном вопросе: Как динамически изменять темы после нажатия раскрывающегося меню тем

Meteor (плюс iron-router в моем случае) немного усложняет это за счет карт событий и того простого факта, что динамическое изменение происходит в <head>.

Другой ответ на вопрос объясняет, как обрабатывать событие в jQuery напрямую (минуя карты событий Meteor): Как обрабатывать пользовательские события jQuery в Meteor?

В приведенном ниже фрагменте кода показано, как я объединил эти две идеи. Все работает как положено.

var themes = {
  "default": "bootstrap311/css/bootstrap.default.min.css",
  "readable" : "bootstrap311/css/bootstrap.readable.min.css",
  "slate" : "bootstrap311/css/bootstrap.slate.min.css"
}

$(function(){
  var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
  themesheet.appendTo('head');
  $('body').on('click', '.theme-link', function (e) {
    var themeurl = themes[$(this).attr('data-theme')]; 
    themesheet.attr('href',themeurl);
  });
});

2

Community 23 Май 2017 в 15:20

Question 2

Динамическое переключение тем bootwatch выполняется легко, как показано в исходном вопросе: Как динамически изменять темы после нажатия раскрывающегося меню тем

Meteor (плюс iron-router в моем случае) немного усложняет это за счет карт событий и того простого факта, что динамическое изменение происходит в <head>.

Другой ответ на вопрос объясняет, как обрабатывать событие в jQuery напрямую (минуя карты событий Meteor): Как обрабатывать пользовательские события jQuery в Meteor?

В приведенном ниже фрагменте кода показано, как я объединил эти две идеи. Все работает как положено.

var themes = {
  "default": "bootstrap311/css/bootstrap.default.min.css",
  "readable" : "bootstrap311/css/bootstrap.readable.min.css",
  "slate" : "bootstrap311/css/bootstrap.slate.min.css"
}

$(function(){
  var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
  themesheet.appendTo('head');
  $('body').on('click', '.theme-link', function (e) {
    var themeurl = themes[$(this).attr('data-theme')]; 
    themesheet.attr('href',themeurl);
  });
});

2

Community 23 Май 2017 в 15:20

Как переключить темы Bootswatch в Meteor?

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

meteor