Materialize 開(kāi)關(guān)輸入
2018-01-05 15:30 更新
例子
以下示例介紹不同類型的交換機(jī)。復(fù)選框通過(guò)在其父div容器上應(yīng)用類切換來(lái)設(shè)置為開(kāi)關(guān)。
materialize_switches.html
<html> <head> <title>The Materialize Switches Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <div class="row"> <form class="col s12"> <div class="row"> <label>Materialize Switch</label> <div class="switch"><label>Off<input type="checkbox" checked><span class="lever"></span>On</label></div> </div> <div class="row"> <label>Materialize Disabled Switch</label> <div class="switch"><label>Off<input disabled type="checkbox"><span class="lever"></span>On</label></div> </div> </form> </div> </body> </html>
結(jié)果
驗(yàn)證結(jié)果，如下圖所示。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：