しがないプログラマーの備忘録: Materialize

ラベル Materialize の投稿を表示しています。すべての投稿を表示

2017年4月25日火曜日

Modal

【目的】
MaterializeでModalを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <a class="btn" href="#modal1">呼び出し</a>

        <div id="modal1" class="modal">
            <div class="modal-content">
                <h4>モーダルのヘッダー</h4>
                <p>モーダルの中身<br />
                2行目<br />
                3行目<br />
                </p>
            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-action modal-close btn-flat">閉じる</a>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.modal').modal();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2017年4月20日木曜日

Tab

【目的】
MaterializeでTabを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <div class="col s12">
                <ul class="tabs">
                    <li class="tab col s3"><a href="#tab1">タブ1</a></li>
                    <li class="tab col s3"><a class="active" href="#tab2">タブ2</a></li>
                    <li class="tab col s3 disabled"><a href="#tab3">タブ3</a></li>
                    <li class="tab col s3"><a href="#tab4">タブ4</a></li>
                </ul>
            </div>
            <div id="tab1" class="col s12">タブ1の中身</div>
            <div id="tab2" class="col s12">タブ2の中身</div>
            <div id="tab3" class="col s12">タブ3の中身</div>
            <div id="tab4" class="col s12">タブ4の中身</div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Dropdown

【目的】
MaterializeでDropdownを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <a class="dropdown-button btn" href="#" data-activates="dropdown1">ドロップダウン呼び出し</a>

        <ul id="dropdown1" class="dropdown-content">
        <li><a href="#">リンク１</a></li>
        <li><a href="#">リンク２</a></li>
        <li class="divider"></li>
        <li><a href="#">リンク３</a></li>
        <li><a href="#"><i class="material-icons">mail</i>リンク４</a></li>
        <li><a href="#"><i class="material-icons">web</i>リンク５</a></li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Tooltip

【目的】
MaterializeでTooltipを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
           <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="ツールチップ">上</a>
           <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="ツールチップ">下</a>
           <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="ツールチップ">右</a>
           <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="ツールチップ">左</a>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Toast

【目的】
MaterializeでToastを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
          <a class="btn" onclick="Materialize.toast('トーストです。', 2000)">呼び出し</a>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Collapsible

【目的】
MaterializeでCollapsible(アコーディオン)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="collapsible" data-collapsible="accordion">
            <li>
                <div class="collapsible-header"><i class="material-icons">mail</i>メール</div>
                <div class="collapsible-body"><span>メールの中身</span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">web</i>Web</div>
                <div class="collapsible-body"><span>Webの中身</span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">shop</i>ショップ</div>
                <div class="collapsible-body"><span>ショップの中身</span></div>
            </li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('.collapsible').collapsible();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Carousel

【目的】
MaterializeでCarousel(カルーセル)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="carousel">
            <a class="carousel-item" href="#"><img src="image1.png"></a>
            <a class="carousel-item" href="#"><img src="image2.png"></a>
            <a class="carousel-item" href="#"><img src="image3.png"></a>
            <a class="carousel-item" href="#"><img src="image4.png"></a>
            <a class="carousel-item" href="#"><img src="image5.png"></a>
        </div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('.carousel').carousel();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Navbarタブ

【目的】
Materializeでタブ付きのNabvarを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <nav class="nav-extended">
            <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 id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">リンク１</a></li>
                    <li><a href="#">リンク２</a></li>
                    <li><a href="#">リンク３</a></li>
                </ul>
                <ul class="side-nav" id="mobile-demo">
                    <li><a href="#">リンク１</a></li>
                    <li><a href="#">リンク２</a></li>
                    <li><a href="#">リンク３</a></li>
                </ul>
                </div>
                <div class="nav-content">
                <ul class="tabs tabs-transparent">
                    <li class="tab"><a href="#tab1">タブ１</a></li>
                    <li class="tab"><a class="active" href="#tab2">タブ２</a></li>
                    <li class="tab disabled"><a href="#tab3">タブ３</a></li>
                    <li class="tab"><a href="#tab4">タブ４</a></li>
                </ul>
            </div>
        </nav>
        <div id="tab1" class="col s12">タブ１の中身</div>
        <div id="tab2" class="col s12">タブ２の中身</div>
        <div id="tab3" class="col s12">タブ３の中身</div>
        <div id="tab4" class="col s12">タブ４の中身</div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        
        <script>
            $(document).ready(function() {
                $(".button-collapse").sideNav();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Navbar

【目的】
MaterializeでNabvarを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <nav>
            <div class="nav-wrapper">
                <a href="#" class="brand-logo">ロゴ</a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">リンク１</a></li>
                    <li class="active"><a href="#">リンク２</a></li>
                    <li><a href="#">リンク３</a></li>
                </ul>
            </div>
        </nav>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2017年4月19日水曜日

Preloader円

【目的】
MaterializeでPreloader(進捗表示)を円で表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="preloader-wrapper small active">
            <div class="spinner-layer spinner-green-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Preloader

【目的】
MaterializeでPreloader(進捗表示)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="progress">
            <div class="determinate" style="width: 30%"></div>
        </div>
        <br /><br /><br /><br /><br />
        <div class="progress">
            <div class="indeterminate"></div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ページャー

【目的】
Materializeでページャーを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="pagination">
            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
            <li class="waves-effect"><a href="#!">1</a></li>
            <li class="waves-effect"><a href="#!">2</a></li>
            <li class="active"><a href="#!">3</a></li>
            <li class="waves-effect"><a href="#!">4</a></li>
            <li class="waves-effect"><a href="#!">5</a></li>
            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(text)文字数

【目的】
Materializeでフォームのテキストの文字数を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="name" type="text" data-length="10">
                        <label for="name">氏名</label>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(switch)

【目的】
Materializeでフォームのスイッチを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="switch">
            <label>
                オフ
                <input type="checkbox">
                <span class="lever"></span>
                オン
            </label>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(file)

【目的】
Materializeでフォームのファイルアップロードを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="file-field input-field col s6">
                        <div class="btn">
                            <span>アップロード</span>
                            <input type="file">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(checkbox)不確定

【目的】
Materializeでフォームの不確定チェックボックスを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

        <input type="checkbox" id="checkbox1" />
        <label for="checkbox1">不確定チェックボックス</label>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#checkbox1').prop("indeterminate", true);
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(checkbox)

【目的】
Materializeでフォームのチェックボックスを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

        <input type="checkbox" id="checkbox1" />
        <label for="checkbox1">選択１</label>

        <input type="checkbox" id="checkbox2" checked="checked" />
        <label for="checkbox2">選択２</label>

        <input type="checkbox" class="filled-in" id="checkbox3" checked="checked" />
        <label for="checkbox3">選択３</label>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(radio)

【目的】
Materializeでフォームのラジオボタンを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <input name="group1" type="radio" id="radio1" />
        <label for="radio1">選択１</label>

        <input class="with-gap" name="group1" type="radio" id="radio2"  />
        <label for="radio2">選択２</label>

        <input name="group1" type="radio" id="radio3" />
        <label for="radio3">選択３</label>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(select)画像

【目的】
Materializeでフォームのセレクトに画像を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <div class="input-field col s6">
                <select>
                    <option value=""></option>
                    <option value="1" data-icon="image1.png" class="circle">選択1</option>
                    <option value="2" data-icon="image2.png" class="circle">選択2</option>
                    <option value="3" data-icon="image3.png" class="circle">選択3</option>
                </select>
                <label>選択肢</label>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(select)

【目的】
Materializeでフォームのセレクトを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <div class="input-field col s6">
                <select>
                    <option value=""></option>
                    <option value="1">選択1</option>
                    <option value="2">選択2</option>
                    <option value="3">選択3</option>
                </select>
                <label>選択肢</label>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

登録: 投稿 (Atom)

しがないプログラマーの備忘録

ページ

最近の更新

2017年4月25日火曜日

Modal

2017年4月20日木曜日

Tab

Dropdown

Tooltip

Toast

Collapsible

Carousel

Navbarタブ

Navbar

2017年4月19日水曜日

Preloader円

Preloader

ページャー

フォーム(text)文字数

フォーム(switch)

フォーム(file)

フォーム(checkbox)不確定

フォーム(checkbox)

フォーム(radio)

フォーム(select)画像

フォーム(select)

関連記事