标签: materialize

我正在尝试在Meteor上使用Materialise Forms.在Materialise的页面上,它说我应该初始化"select"输入字段,如下所示:

$(document).ready(function() {
  $('select').material_select();
});

我试过在Meteor.startup,Template.body.created上调用它 - 没有任何效果.我收到以下错误:

undefined不是一个函数(评估'$('select').material_select()')

我应该在哪里初始化它？

我有一个可折叠的(实体化),其元素是从a创建的for each,但"下拉列表"不起作用.一切都没有在for each工作中.

我该如何解决这个问题？

jobList.html

<template name="jobList">
<ul class="collapsible" data-collapsible="accordion">
    {{#each jobs}}
        <li>
            <div class="collapsible-header">{{title}}</div>
            <div class="collapsible-body"><p>{{description}}</p></div>
        </li>
    {{/each}}
</ul>

jobList.js

Template.jobList.rendered = function () {
    $('.collapsible').collapsible({
        accordion: false
    });
};

Template.jobList.helpers({
    jobs: function() {
        return Jobs.find();
    }
});

该模板jobList位于另一个模板中,该模板无需任何操作{{> jobList}}.

我们正在使用物化卡在我们的网站上显示图像。图片是用户上传的，因此它们的大小各不相同（尽管它们必须大于250px）。

我们能够保持图像的长宽比，这很棒，但是我们不知道如何在使每行卡片的高度相同的同时做到这一点。这是我们的目标-在保持卡片内部图像的纵横比的同时，使卡片具有相同的高度（以响应方式）。

我们整天都在混乱，没有走得太远。任何帮助深表感谢。

HTML：

<div class="row text-center">
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"interior"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Interior</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Drivetrain</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"performance"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque …

我在rails应用程序中使用materialize作为UI框架,除了'material-icons''菜单'选项无法正常工作外,一切正常.

完整的代码在下面,但这是不合适的部分:

  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

当我缩小浏览器以触发响应时,它不会变成汉堡包图标,而只是显示文本节点"菜单".我无法弄清楚我做错了什么.其他一切都在发挥作用.

这是整个导航/下拉结构:

  <!-- Dropdown Structure -->
  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">My Profile</a></li>
    <li><a href="#!">My Courses</a></li>
    <li class="divider"></li>
    <li><a href="#!">Logout</a></li>
  </ul>

  <!-- Dropdown Structure -->
  <ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">My Profile</a></li>
    <li><a href="#!">My Courses</a></li>
    <li class="divider"></li>
    <li><a href="#!">Logout</a></li>
  </ul>

  <header>
    <nav class="z-depth-2">
      <div class="container">
        <div class="nav-wrapper">
          <a href="#!" class="brand-logo">OppSim</a>
          <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
          <ul class="right hide-on-med-and-down">
          <!-- web view -->
            <li><a href="#">Courses</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Login</a></li>
            <!-- Dropdown Trigger -->
            <li><a class="dropdown-button" href="#!" …

我想Materialize CSS在我的项目中使用Framework.我设置了一个项目Angular CLI使用ng new BLABLA

之后我按照本指南中的步骤操作.

但是,如果我ng serve用来启动项目,我会在浏览器中收到此错误:

TypeError: undefined is not an object (evaluating 'jQuery.easing.swing') 

我的angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.15",
    "name": "blabla"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/materialize-css/dist/js/materialize.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": …

在materializecss文档页面中,没有关于switch元素的api.我使用onclick事件,但有两次触发

HTML

<div class="switch">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>  

jQuery的

$(".switch").on("click",function() {

    var status = $(this).find("input[type=checkbox]").prop('checked');
    console.log(status)

     $.ajax({
        url : url,
        type : "post",
        data : { status : status}
    })

});

// console.log output : false true or true false

当我改变开关位置时,该事件被触发两次.控制台日志显示交换机当前状态和更改状态.我想只改变状态.因为ajax调用被触发两次并且它在我的后端发生数据库问题.我该如何处理这个问题？

我想在materialize _variables.scss中更改变量,例如

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
/*...*/

在我的Vue 2中,main.js我包括这样的物化风格

require('materialize-css/sass/materialize.scss');

因为!默认我想我需要包括我_variables.scss之前包括物化,但我不知道如何.

那么设置我自己的变量的正确方法是什么$primary-color: color("blue", "lighten-2")(例如我想使用materialize _colors.scss中的预定义调色板)？

编辑1:我用vue-cli安装了vue2

编辑2:

文件夹结构:

??? build/
??? config/
??? dist/
??? node_modules/
?    ??? materialize-css
??? src/
?    ??? components
?    ??? router
?    ??? main.js
??? package.json
??? index.html

在引导程序中，它很简单：

<ul class="list-inline">
  <li>...</li>
</ul>

我想知道如何在不使用的情况下实现物化<nav>？

我尝试使文本框的边框底部(输入文本)消失.

它正在使用border-bottom: none,但当我写东西时,边框再次出现.我想让绿线消失(当我在输入中写入时,图像显示页面).

任何的想法？

我试图在materialize css版本0.99.0实际中更改datepicker的语言,但不起作用.我尝试更改*日期选择器defaults.in materialize.js上的语言,但没有奏效.有人知道怎么做吗？谢谢.

HTML:

 <div class="input-field col s6">
                    <input type="date" class="datepicker" id="pickdate">
                    <label for="pickdate">DATA</label>
                </div>

JavaScript的:

    $( document ).ready(function() {
    $('.datepicker').pickadate({
        format: 'dd/mm/yyyy',
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year



});