垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 开关 ​

Foundation 开关（Switch）是一种美观的切换控件，用于替代传统的复选框。本章将介绍开关的各种用法。

基本开关 ​

html
<div class="switch">
    <input class="switch-input" id="switch1" type="checkbox" name="switch1">
    <label class="switch-paddle" for="switch1">
        <span class="show-for-sr">开关</span>
    </label>
</div>

开关尺寸 ​

html
<!-- Tiny 尺寸 -->
<div class="switch tiny">
    <input class="switch-input" id="tinySwitch" type="checkbox">
    <label class="switch-paddle" for="tinySwitch"></label>
</div>

<!-- Small 尺寸 -->
<div class="switch small">
    <input class="switch-input" id="smallSwitch" type="checkbox">
    <label class="switch-paddle" for="smallSwitch"></label>
</div>

<!-- 默认尺寸 -->
<div class="switch">
    <input class="switch-input" id="defaultSwitch" type="checkbox">
    <label class="switch-paddle" for="defaultSwitch"></label>
</div>

<!-- Large 尺寸 -->
<div class="switch large">
    <input class="switch-input" id="largeSwitch" type="checkbox">
    <label class="switch-paddle" for="largeSwitch"></label>
</div>

带文字的开关 ​

html
<div class="switch">
    <input class="switch-input" id="textSwitch" type="checkbox">
    <label class="switch-paddle" for="textSwitch">
        <span class="switch-active" aria-hidden="true">开</span>
        <span class="switch-inactive" aria-hidden="true">关</span>
    </label>
</div>

默认选中 ​

html
<div class="switch">
    <input class="switch-input" id="checkedSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="checkedSwitch"></label>
</div>

禁用状态 ​

html
<div class="switch">
    <input class="switch-input" id="disabledSwitch" type="checkbox" disabled>
    <label class="switch-paddle" for="disabledSwitch"></label>
</div>

<div class="switch">
    <input class="switch-input" id="disabledChecked" type="checkbox" disabled checked>
    <label class="switch-paddle" for="disabledChecked"></label>
</div>

自定义颜色 ​

html
<style>
    .switch.success .switch-paddle::after {
        background: #3adb76;
    }
    .switch.success input:checked ~ .switch-paddle {
        background: #3adb76;
    }

    .switch.warning .switch-paddle::after {
        background: #ffae00;
    }
    .switch.warning input:checked ~ .switch-paddle {
        background: #ffae00;
    }

    .switch.alert .switch-paddle::after {
        background: #cc4b37;
    }
    .switch.alert input:checked ~ .switch-paddle {
        background: #cc4b37;
    }
</style>

<div class="switch success">
    <input class="switch-input" id="successSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="successSwitch"></label>
</div>

<div class="switch warning">
    <input class="switch-input" id="warningSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="warningSwitch"></label>
</div>

<div class="switch alert">
    <input class="switch-input" id="alertSwitch" type="checkbox" checked>
    <label class="switch-paddle" for="alertSwitch"></label>
</div>

带标签的开关 ​

html
<div class="grid-x align-middle">
    <div class="cell shrink">
        <div class="switch">
            <input class="switch-input" id="labelSwitch" type="checkbox">
            <label class="switch-paddle" for="labelSwitch"></label>
        </div>
    </div>
    <div class="cell auto">
        <label for="labelSwitch" style="margin-left: 10px;">启用通知</label>
    </div>
</div>

设置面板示例 ​

html
<div class="card">
    <div class="card-divider">
        <h4>通知设置</h4>
    </div>
    <div class="card-section">
        <div class="grid-x align-middle" style="padding: 10px 0; border-bottom: 1px solid #eee;">
            <div class="cell auto">
                <strong>邮件通知</strong>
                <p class="text-muted" style="margin: 0; font-size: 14px;">接收邮件推送通知</p>
            </div>
            <div class="cell shrink">
                <div class="switch">
                    <input class="switch-input" id="emailNotif" type="checkbox" checked>
                    <label class="switch-paddle" for="emailNotif"></label>
                </div>
            </div>
        </div>
        <div class="grid-x align-middle" style="padding: 10px 0; border-bottom: 1px solid #eee;">
            <div class="cell auto">
                <strong>短信通知</strong>
                <p class="text-muted" style="margin: 0; font-size: 14px;">接收短信推送通知</p>
            </div>
            <div class="cell shrink">
                <div class="switch">
                    <input class="switch-input" id="smsNotif" type="checkbox">
                    <label class="switch-paddle" for="smsNotif"></label>
                </div>
            </div>
        </div>
        <div class="grid-x align-middle" style="padding: 10px 0;">
            <div class="cell auto">
                <strong>推送通知</strong>
                <p class="text-muted" style="margin: 0; font-size: 14px;">接收 APP 推送通知</p>
            </div>
            <div class="cell shrink">
                <div class="switch">
                    <input class="switch-input" id="pushNotif" type="checkbox" checked>
                    <label class="switch-paddle" for="pushNotif"></label>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript 控制 ​

javascript
// 获取开关状态
var isChecked = $('#mySwitch').prop('checked');

// 设置开关状态
$('#mySwitch').prop('checked', true);
$('#mySwitch').prop('checked', false);

// 切换状态
$('#mySwitch').prop('checked', !$('#mySwitch').prop('checked'));

// 监听变化
$('#mySwitch').on('change', function() {
    if ($(this).prop('checked')) {
        console.log('开关已打开');
    } else {
        console.log('开关已关闭');
    }
});

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 开关示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }
        .switch { margin-right: 20px; }

        .switch.success input:checked ~ .switch-paddle { background: #3adb76; }
        .switch.warning input:checked ~ .switch-paddle { background: #ffae00; }
        .switch.alert input:checked ~ .switch-paddle { background: #cc4b37; }

        .setting-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        .setting-item:last-child { border-bottom: none; }
        .setting-item .description {
            margin: 0;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 开关展示</h1>

        <div class="demo-section">
            <h3>基本开关</h3>
            <div class="switch">
                <input class="switch-input" id="basic1" type="checkbox">
                <label class="switch-paddle" for="basic1"></label>
            </div>
            <div class="switch">
                <input class="switch-input" id="basic2" type="checkbox" checked>
                <label class="switch-paddle" for="basic2"></label>
            </div>
        </div>

        <div class="demo-section">
            <h3>开关尺寸</h3>
            <div class="switch tiny">
                <input class="switch-input" id="tiny" type="checkbox" checked>
                <label class="switch-paddle" for="tiny"></label>
            </div>
            <span>Tiny</span>
            &nbsp;&nbsp;
            <div class="switch small">
                <input class="switch-input" id="small" type="checkbox" checked>
                <label class="switch-paddle" for="small"></label>
            </div>
            <span>Small</span>
            &nbsp;&nbsp;
            <div class="switch">
                <input class="switch-input" id="default" type="checkbox" checked>
                <label class="switch-paddle" for="default"></label>
            </div>
            <span>Default</span>
            &nbsp;&nbsp;
            <div class="switch large">
                <input class="switch-input" id="large" type="checkbox" checked>
                <label class="switch-paddle" for="large"></label>
            </div>
            <span>Large</span>
        </div>

        <div class="demo-section">
            <h3>带文字的开关</h3>
            <div class="switch large">
                <input class="switch-input" id="textSwitch" type="checkbox">
                <label class="switch-paddle" for="textSwitch">
                    <span class="switch-active" aria-hidden="true">ON</span>
                    <span class="switch-inactive" aria-hidden="true">OFF</span>
                </label>
            </div>
        </div>

        <div class="demo-section">
            <h3>自定义颜色</h3>
            <div class="switch success">
                <input class="switch-input" id="success" type="checkbox" checked>
                <label class="switch-paddle" for="success"></label>
            </div>
            <span>Success</span>
            &nbsp;&nbsp;
            <div class="switch warning">
                <input class="switch-input" id="warning" type="checkbox" checked>
                <label class="switch-paddle" for="warning"></label>
            </div>
            <span>Warning</span>
            &nbsp;&nbsp;
            <div class="switch alert">
                <input class="switch-input" id="alert" type="checkbox" checked>
                <label class="switch-paddle" for="alert"></label>
            </div>
            <span>Alert</span>
        </div>

        <div class="demo-section">
            <h3>禁用状态</h3>
            <div class="switch">
                <input class="switch-input" id="disabled1" type="checkbox" disabled>
                <label class="switch-paddle" for="disabled1"></label>
            </div>
            <span>禁用（关）</span>
            &nbsp;&nbsp;
            <div class="switch">
                <input class="switch-input" id="disabled2" type="checkbox" disabled checked>
                <label class="switch-paddle" for="disabled2"></label>
            </div>
            <span>禁用（开）</span>
        </div>

        <div class="demo-section">
            <h3>设置面板示例</h3>
            <div class="card" style="max-width: 500px;">
                <div class="card-divider">
                    <h4 style="margin: 0;">通知设置</h4>
                </div>
                <div class="card-section">
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>邮件通知</strong>
                            <p class="description">接收邮件推送通知</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="emailNotif" type="checkbox" checked>
                                <label class="switch-paddle" for="emailNotif"></label>
                            </div>
                        </div>
                    </div>
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>短信通知</strong>
                            <p class="description">接收短信推送通知</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="smsNotif" type="checkbox">
                                <label class="switch-paddle" for="smsNotif"></label>
                            </div>
                        </div>
                    </div>
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>推送通知</strong>
                            <p class="description">接收 APP 推送通知</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="pushNotif" type="checkbox" checked>
                                <label class="switch-paddle" for="pushNotif"></label>
                            </div>
                        </div>
                    </div>
                    <div class="grid-x align-middle setting-item">
                        <div class="cell auto">
                            <strong>静音模式</strong>
                            <p class="description">关闭所有声音提醒</p>
                        </div>
                        <div class="cell shrink">
                            <div class="switch">
                                <input class="switch-input" id="muteNotif" type="checkbox">
                                <label class="switch-paddle" for="muteNotif"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>交互演示</h3>
            <div class="grid-x align-middle">
                <div class="cell shrink">
                    <div class="switch large">
                        <input class="switch-input" id="interactiveSwitch" type="checkbox">
                        <label class="switch-paddle" for="interactiveSwitch"></label>
                    </div>
                </div>
                <div class="cell auto" style="padding-left: 15px;">
                    <span id="switchStatus">当前状态：关闭</span>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();

        $('#interactiveSwitch').on('change', function() {
            var status = $(this).prop('checked') ? '开启' : '关闭';
            $('#switchStatus').text('当前状态：' + status);
        });
    </script>
</body>
</html>

开关最佳实践 ​

  1. 即时生效：开关通常表示即时生效的设置
  2. 清晰标签：明确说明开关的作用
  3. 合适尺寸：移动端使用较大尺寸便于触摸
  4. 状态反馈：考虑添加文字说明当前状态

总结 ​

本章我们学习了：

  • 基本开关的创建
  • 开关尺寸
  • 带文字的开关
  • 自定义颜色
  • 设置面板示例
  • JavaScript 控制

下一章，我们将学习 Foundation 滑块。