2016-01-09 5 views
1

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

JS:

MaterializeModal.form({ 
title: "Enter some Data!", 
bodyTemplate: "my-form", 
callback: function(error, response) { 
    if (response.submit) { 
    // Iterate over form results & display. 
    for (var field in response.form) { 
    Materialize.toast(field + ": " + response.form[field], 5000, "green"); 
    } 
    } else { 
    Materialize.toast("Cancelled by user!", 5000, "red"); 
    } 
} 
}); 

MaterializeModal.display({ 
    bodyTemplate: "my-form" 
}); 

И шаблон:

<template name="my-form"> 
    <div class="row"> 
    <div class="input-field col s6"> 
     <input id="first_name" type="text" name="first-name" class="validate"> 
     <label for="first_name">First Name</label> 
    </div> 
    <div class="input-field col s6"> 
     <input id="last_name" type="text" name="last-name" class="validate"> 
     <label for="last_name">Last Name</label> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="input-field col s12"> 
     <input disabled id="disabled" type="text" name="disabled-input" class="validate"> 
     <label for="disabled">Disabled</label> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="input-field col s12"> 
     <input id="password" type="password" name="password" class="validate"> 
     <label for="password">Password</label> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="input-field col s12"> 
     <input id="email" type="email" name="email" class="validate"> 
     <label for="email">Email</label> 
    </div> 
    </div> 
</template> 

Если у меня есть кнопка, сказать:

<button id="client-search" class="someClass">Search</button> 

Как модальный срабатывать от кнопки нажмите? Извинения за тупой вопрос.

ответ

1

В соответствии с документами: укажите Модальный идентификатор в объекте данных объекта, добавьте кулак модальный триггер к кнопке и зарегистрируйте триггер. Смотрите документацию на http://materializecss.com/modals.html

HTML

<button id="client-search" class="modal-trigger">Search</button> 

код JavaScript

Template.my-form.onRendered({ 
    $('.modal-trigger').leanModal(); 
}); 

Есть некоторые предостережения, хотя: модальности и выпадающие не работают в последней версии материализуются на Метеоре, потому что Meteor использует сумасшедший старой устаревшей версии jQuery (кажется, невозможно изменить версию jquery от Meteor без разветвления и перекомпоновки вашего собственного Meteor distro), а Materialize полагается на новые функции jquery. Я работал над этим, используя более старую версию Materialize, в частности, poetic: [email protected] (SASS-версия Materialize).

+0

Спасибо. Я это выяснил некоторое время назад. Как вы упомянули, мне пришлось указать шаблон «onRendered». После этого он отлично справился. –

Смежные вопросы