Materialize의 Mobile Collapse Button 배포 절차 정보
4138 단어 초보자용MaterializejQueryRails5
외형
상당히 재미있기 때문에 시험해 보는 것은 어떻습니까.
기본 상태
사이트를 축소했을 때
위 그림의 왼쪽 햄버거를 클릭하면
Materialize 공식에서 그대로 도입
application.html.erb
<body>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</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">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</body>
JS 파일에서 Initialization
application.js
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
만약 잘 표시되지 않는 경우
버젼 등으로 jQuery 함수가 잘 동작하지 않는 경우도 있기 때문에, 이하의 추가를 시험해 보는 것도 좋다
참고원: h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 32486967 / 마테리 아 〇 〇 s ㅇ 모비 ぇ ぇ p セ メ ー ー t 쇼 ぃ ぃ g ぇ ぃ c ぃ c 케 d
application.html.erb
<head>
<title>Portfolio</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
Reference
이 문제에 관하여(Materialize의 Mobile Collapse Button 배포 절차 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YANG_LIU/items/08c995b095f09bc1ba35텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
