锐客网

  1. 首页 > 生活百科 > it技术 > >

Materialize CSS实现switch开关控件

前端开发IT知识开关控件

Materialize提供了一些开关, 以允许查看者在两个可用选项之间进行选择。通常, 开关是用于二进制状态(例如开/关或是/否或同意/不同意)的特殊复选框。
可以使用"开关"包装div内的类, 输入类型="复选框"。另一个必需的类是"杠杆"在< span> 标记中使用。通过添加CSS元素, 可以根据选择修改开关。这是交换机的基本视图。
【Materialize CSS实现switch开关控件】例子：

< !DOCTYPE html> < html> < head> < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" /> < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/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> < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < /head> < body class = "container"> < div class = "center"> < h3> Switches in materialize< /h3> < /div> < div class = "card-panel green-text"> < h4 class = "center"> Switch< /h4> < !-- Switch --> < div class = "switch"> < label> Off < input type = "checkbox" /> < span class = "lever"> < /span> On < /label> < /div> < br /> < div class = "switch"> < label> No < input type = "checkbox" /> < span class = "lever"> < /span> Yes < /label> < /div> < br /> < div class = "switch"> < label> Disagree < input type = "checkbox" /> < span class = "lever"> < /span> Agree < /label> < /div> < /div> < div class = "card-panel green-text"> < h4 class = "center"> Disabled Switch< /h4> < div class = "switch"> < label> Off < input disabled type = "checkbox" /> < span class = "lever"> < /span> On < /label> < /div> < br /> < div class = "switch"> < label> No < input disabled type = "checkbox" /> < span class = "lever"> < /span> Yes < /label> < /div> < br /> < div class = "switch"> < label> Disagree < input disabled type = "checkbox" /> < span class = "lever"> < /span> Agree < /label> < /div> < /div> < !-- Disabled Switch --> < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> < /script> < /body> < /html>

输出如下：
Materialize CSS实现switch开关控件

文章图片

    推荐阅读


    上一篇：Linux中的chroot命令用法和示例

    下一篇：CSS如何使用url()函数（用法代码示例）