一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

</head>

<body>

    <ul class="list">

        <li class="item item-toggle">

            HTML5

            <label class="toggle toggle-positive">

                <input type="checkbox" checked="">

                <div class="track">

                    <div class="handle"></div>

                </div>

            </label>

        </li>

        <li class="item item-toggle">

            CSS3

            <label class="toggle toggle-calm">

                <input type="checkbox" checked="">

                <div class="track">

                    <div class="handle"></div>

                </div>

            </label>

        </li>

        <li class="item item-toggle">

            Flashplayer

            <label class="toggle toggle-balanced">

                <input type="checkbox">

                <div class="track">

                    <div class="handle"></div>

                </div>

            </label>

        </li>

        <li class="item item-toggle">

            Java Applets

            <label class="toggle toggle-energized">

                <input type="checkbox">

                <div class="track">

                    <div class="handle"></div>

                </div>

            </label>

        </li>

        <li class="item item-toggle">

            JavaScript

            <label class="toggle toggle-assertive">

                <input type="checkbox" checked="">

                <div class="track">

                    <div class="handle"></div>

                </div>

            </label>

        </li>

        <li class="item item-toggle">

            Silverlight

            <label class="toggle toggle-royal">

                <input type="checkbox">

                <div class="track">

                    <div class="handle"></div>

                </div>

            </label>

        </li>

        <li class="item item-toggle">

            Web Components

            <label class="toggle toggle-dark">

                <input type="checkbox" checked="">

                <div class="track">

                    <div class="handle"></div>

                </div>

            </label>

        </li>

    </ul>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-toggle（切换开关）的更多相关文章

  1. ionic-CSS：ionic Toggle(切换开关)

    ylbtech-ionic-CSS:ionic Toggle(切换开关) 1.返回顶部 1. ionic Toggle(切换开关) 切换开关类似与 HTML 的 checkbox 标签,但它更易于在移 ...

  2. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  3. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  4. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  5. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  6. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  7. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

  8. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  9. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

随机推荐

  1. Learning WCF：Life Cycle of Service instance

    示例代码下载地址:WCFDemo1Day 概述 客户端向WCF服务发出请求后,服务端会实例化一个Service对象(实现了契约接口的对象)用来处理请求,实例化Service对象以及维护其生命周期的方式 ...

  2. 【牛客网71E】 组一组（差分约束，拆位）

    传送门 NowCoder Solution 考虑一下看到这种区间或与区间与的关系,拆一下位. 令\(s_i\)表示前缀和,则: 那么如果现在考虑到了第\(i\)为,有如下4种可能: \(opt=1\) ...

  3. php使用curl模拟登录带验证码的网站[开发篇]

    需求是这样的,需要登录带验证码的网站,获取数据,但是不可能人为一直去记录数据,想通过自动采集的方式进行,如下是试验出来的结果代码!有需要的可以参考下! <?php namespace Home\ ...

  4. “大话架构”阿里架构师分享Java程序员需要突破的技术要点

    一.源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 我认为是阅读源码的最核心 ...

  5. ubuntu下 远程连接windows服务器工具Remmina

    工具不错 https://blog.csdn.net/skykingf/article/details/71539237

  6. Django--自定义 Command 命令

    Django 对于命令的添加有一套规范,你可以为每个app 指定命令.通俗一点讲,比如在使用manage.py文件执行命令的时候,可以自定制自己的命令,来实现命令的扩充. commands的创建 1. ...

  7. IDA远程调试 在内存中dump Dex文件

    1. 首先使用调试JNI_OnLoad函数的方法,先将apk以调试状态挂起,使用IDA附加上去. 2. 然后在libdvm.so中的dvmDexFileOpenPartial函数上下一个断点 3. 然 ...

  8. LeetCode刷题指南（字符串）

    作者:CYC2018 文章链接:https://github.com/CyC2018/CS-Notes/blob/master/docs/notes/Leetcode+%E9%A2%98%E8%A7% ...

  9. jq的ajax交互封装

    jq封装的ajax,然后 在此前和此后都是很多要考虑的  ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...

  10. vs2015+qt5.9.7配置跨平台的工程

    环境:vs2015 update 3 + qt 5.9.7 问题:代码中存在中文无法编译 附加目的:支持跨平台 问题分析:代码的编码格式导致中文编译错误,windows默认gb2312编码,qt默认u ...