标签: materialize

我有一个使用FTS4模块生成的SQLite表.每个条目至少列出两次使用不同的语言,但仍然共享一个唯一的ID(int列,未编入索引).这是我想要做的:我想用首选语言查找一个术语.我想将结果与使用其他语言查找同一个术语结合起来.但是对于第二次查找,我想忽略我在第一次查找期间找到的所有条目(由它们的ID标识).所以基本上我想这样做:

WITH term_search1 AS (
    SELECT *
    FROM myFts
    WHERE myFts MATCH 'term'
    AND languageId = 1)
SELECT *
FROM term_search1
UNION
SELECT *
FROM myFts
WHERE myFts MATCH 'term'
AND languageId = 2
AND id NOT IN (SELECT id FROM term_search1)

这里的问题是,term_seach1查询将被执行两次.有没有办法实现我的结果呢？将其限制为2个查询(而不是3个)的任何解决方案都会很棒.

我也尝试过使用递归查询,例如:

WITH RECURSIVE term_search1 AS (
    SELECT *
    FROM myFts
    WHERE myFts MATCH 'term'
    AND languageId = 1
UNION ALL
    SELECT m.*
    FROM myFts m LEFT OUTER JOIN term_search1 t ON (m.id = t.id)
    WHERE myFts MATCH …

我正在寻找一些可折叠的帮助我试图在它们处于活动状态时更改标题上的图标但是似乎无法解决问题,如果我点击另一个标题而不关闭第一个显示正确图标的标题.

这是一个包含我的问题示例的codepen. http://codepen.io/FPC/pen/xZEWVY

这是我的代码:

<div class="container">
  <div class="row">
    <div class="col s6">
      <ul class="collapsible popout" data-collapsible="accordion">
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit        
            </p>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit
            </p>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div …

我目前正在使用Materialize框架,并且想知道是否可以更改填充复选框的颜色,因为它默认为绿色.

<input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
<label for="filled-in-box">Filled in</label>

任何想法,将不胜感激.谢谢

添加Materialize提供的以下模板代码无法立即在React组件中运行：

<div class="input-field col s12">
  <select>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

如何解决此问题，以便选择下拉列表起作用？

我正在使用MaterialiseCSS表单,我遇到一个问题,当我单击Reset按钮时,select选项会恢复为禁用"Choose your option"值.

我能够清除所有内容,甚至是我现在所拥有的选择选项,但无法弄清楚如何清除它的禁用值.

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input id="last_name" type="text" class="validate">
                <label for="last_name">Last Name</label>
            </div>
        </div>

        <div class="row">
            <div class="input-field col s12">
                <select class="icons" id="platform" name="platform">
                    <option value="None" class="grey-text text-darken-3" disabled selected>Choose your option</option>
                    <option value="PS4" data-icon="images/ps4.jpg" class="left circle">Playstation 4</option>
                    <option value="PC" data-icon="images/steam.ico" class="left circle">PC</option>
                    <option value="XBOX" data-icon="images/xbox.ico" class="left circle">XBox One</option>
                </select>
                <label>Platform:</label>
            </div>
        </div>

        <a class="waves-effect waves-light btn">Reset</a>
    </form>
</div>

这是JS

$(".btn").click(function(){
    $("form input").val("");
});

$('select').material_select();

Codepen

我正在尝试使用Materialize.css自动完成我的Polymer项目.

控制台日志:

Uncaught TypeError: $(...).autocomplete is not a function

我的代码:

<div class="input-field">
    <input type="text" id="assemp" class="autocomplete" value="{{emps::input}}">
    <label for="assemp">Assigned Employee(s)</label>
</div>

脚本:

attached : function() {
            $('input.autocomplete').autocomplete({
                data: {
                    "Apple": null,
                    "Microsoft": null,
                    "Google": 'http://placehold.it/250x250'
                }
            });
        }

我试图在我的项目中添加具有默认行为的可折叠样式的手风琴。标头似乎可以进入用户界面，但不会扩展以显示可折叠主体部分。有人知道我该如何做吗？还是看看为什么不是呢？

这是我的html：

<div class="section">
<div ng-repeat="diary in diaries | orderBy:'date' ">
<div class="row">
    <div class="col s2 push-s11">
        <a class="btn-floating btn-large waves-effect waves-light red right-align" ng-click="deleteDiary(diary.id)"><i class="material-icons">delete_forever</i></a>
    </div>
</div>
<div class="row">
    <h5 class="center-align"><b>{{diary.category}}</b></h5> 
    <h6 class="center-align">{{diary.date}}</h6>
</div>

<div class="row">
    <div class="foodContainer">
    </div>
    <div class="row center-align">
        <ul class="collapsible popout" data-collapsible="accordion" watch>
            <li ng-repeat="food in diary.foods">
                <div class="collapsible-header">{{food.title}}</div>
                <div class="collapsible-body">
                        <label><b>Calories: </b><p>{{food.calories}}</p></label>
                        <label><b>Fat: </b><p>{{food.fat}}</p></label>
                        <label><b>Protein: </b><p>{{food.protein}}</p></label>
                        <label><b>Sodium: </b><p>{{food.sodium}}</p></label>
                        <label><b>Sugars: </b><p>{{food.sugars}}</p></label>
                </div>
            </li>
        </ul>
    </div>
</div>
</div>
</div>

这是初始化可折叠对象的控制器：

"use strict";

app.controller("DiaryCtrl", function($scope, $rootScope, $location, …

我正在尝试创建一个具有固定页眉和页脚的模态对话框,并且模态对话框内的内容(在本例中为用户列表)是可滚动的...

到目前为止,我最好的尝试给了我图像的结果:

我认为在看到图像后我不必描述问题是什么......我还假设你会知道解决方案看起来像什么...... :)

但只是为了确保我还要写它...模态对话框需要有一个固定的标题(标题为"编辑板","板名"和"板类型"所在的区域)和页脚(区域所在的区域) "保存"按钮位于)必须固定/不可拆卸...唯一必须滚动的是用户列表......

码:

HTML:

<div id="addBoardModal" class="modal modal-fixed-footer">
    <form class="Boards_new" autocomplete="off">
      <div class="modal-header">
        <h5>{{title}}</h5>
        <div class="input-field">
           <!--INPUT FORM-->
        <div class="BoadType">
           <!--RADIAL BUTTON THING--> 
      <div class="modal-content">
            <div class="shareMembers" style="margin-top:18px;">
                <div class="row">
                    <h5 class="left">Share</h5>
                      <!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!-->
                </div>
            </div>
      <div class="modal-footer">
        <!--JSUT THIS SAVE BUTTON-->
      </div>

CSS:

.modal {
  @extend .z-depth-4;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  //overflow-y: auto;
  border-radius: 2px; …

在这个网站中,我想为问题的列定义一个相等的高度.

我使用Materialise CSS作为框架.

这可能吗？

这是我的实际HTML:

<div class="container">
<div class="section">

  <!--   Icon Section   -->
  <div class="row">
    <div class="col s12 m6 question-one">
      <div class="icon-block">
        <h2 class="center light-blue-text"></h2>
        <h5 class="center">How can I buy simple products fast and easy?</h5>
      </div>
    </div>

    <div class="col s12 m6 question-two">
      <div class="icon-block">
        <h2 class="center light-blue-text"></i></h2>
        <h5 class="center">How can I buy my ongoing demand in some minutes?</h5>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col s12 m6 question-three">
      <div class="icon-block">
        <h2 class="center light-blue-text"></h2>
        <h5 class="center">How can I get …

我浏览了materializecss和materialUI的主页。第一个提到基于Material Design的现代响应式前端框架，第二个提到实现Google的Material Design的React组件。他们两个都实现了材料设计，并且都给了我使用的组件。两者之间的区别到底在哪里？