Question

我正在关注youtube上的Materialise CSS教程，并正在按照说明创建FAB。但是，当我滚动到该按钮时，这些图标不会出现。我不确定为什么会这样。

我环顾了互联网，却没有找到解决方案。 jQuery可能有问题，但我确实从Materialize网站复制并粘贴了HTML设置代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="fixed-action-btn">
  <a ref="#" class="btn-floating red btn-large">
    <i class="large material-icons">mode_edit</i>
  </a>
   <ul>
        <li><a ref="#" class="btn-floating blue btn-large"><i 
         class="large material-icons">insert_chart</i></a></li>
        <li><a ref="#" class="btn-floating green btn-large"><i 
         class="large material-icons">format_quotes</i></a></li>
        <li><a ref="#" class="btn-floating yellow btn-large"><i 
         class="large material-icons">publish</i></a></li>
        <li><a ref="#" class="btn-floating orange btn-large"><i 
         class="large material-icons">attach_file</i></a></li>
    </ul>
</div>

Answer 1

您需要包括具体化的CSS和js两者都尝试以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<script type="text/javascript">
    $(document).ready(function(){
    $('.fixed-action-btn').floatingActionButton();
  });
</script>

Answer 2

您需要添加Jquery来调用实现js，还需要添加实现css以进行正确的布局和设计，并为FAB操作添加调用功能。

$(document).ready(function(){
    $('.fixed-action-btn').floatingActionButton();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="fixed-action-btn">
  <a ref="#" class="btn-floating red btn-large">
    <i class="large material-icons">mode_edit</i>
  </a>
   <ul>
        <li><a ref="#" class="btn-floating blue btn-large"><i 
         class="large material-icons">insert_chart</i></a></li>
        <li><a ref="#" class="btn-floating green btn-large"><i 
         class="large material-icons">format_quotes</i></a></li>
        <li><a ref="#" class="btn-floating yellow btn-large"><i 
         class="large material-icons">publish</i></a></li>
        <li><a ref="#" class="btn-floating orange btn-large"><i 
         class="large material-icons">attach_file</i></a></li>
    </ul>
</div>

Answer 3

Materialize 不再依赖于 JQuery，并且您使用的是 1.0.0，因此您需要添加以下 js 函数。见https://materializecss.com/floating-action-button.html

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.fixed-action-btn');
  var instances = M.FloatingActionButton.init(elems, {
    direction: 'top'
  });
});

无法获取固定操作按钮以在Materialize CSS中工作

3 个答案: