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>
输出如下:
文章图片
推荐阅读
- CSS如何使用url()函数(用法代码示例)
- Linux中的chroot命令用法和示例
- PHP如何使用ImagickDraw bezier()函数(代码示例)
- pcos装机大师,本文教您如何迅速安装系统
- u盘pe打开盘制作,本文教您如何在20分钟内完成打开盘制作
- 如何设置开机打开项,本文教您电脑如何设置win7开机打开项
- usb打开怎样设置,本文教您惠普笔记本怎样设置usb打开
- 卡片u盘,本文教您如何运用以及需要注意啥
- 电脑店u盘打开盘制作工具,本文教您如何制作PE系统