一，效果图。

二，代码。

<!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. Python脱产8期 Day014 2019/4/28

    一 带参装饰器 1.通常,装饰器为被装饰的函数添加新功能,需要外界的参数 # -- outer参数固定一个,就是func # -- inner参数固定同被装饰的函数,也不能添加新参数 # -- 可以借 ...

  2. u-boot中debug的一些总结

    研究u-boot,首要搞清楚的是代码的流程,运行流程是什么样子的呢?不知道,就看log.这就要把log信息 打开.研究u-boot的文件,发现里面是很多DEBUG宏定义的打印,这个打印着怎么打开呢? ...

  3. jsp-EL表达式简介

    表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的显示! 使用EL表达 ...

  4. [POC]SuiteCRM 7.10.7 - 'record' SQL Injection

    #################################################################### # Exploit Title: SuiteCRM - 're ...

  5. 《JavaScript高级教程》学习笔记一、变量和数据类型

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...

  6. Java开发技术大揭底——让你认知自己技术上的缺陷，成为架构师

    一.分布式架构体系 分布式怎么来的.传统的电信.银行业,当业务量大了之后,普通服务器CPU/IO/网络到了100%,请求太慢怎么办?最直接的做法,升级硬件,反正也不缺钱,IBM小型机,大型机,采购了堆 ...

  7. 大牛是怎么思考设计MySQL优化方案

    在进行MySQL的优化之前,必须要了解的就是MySQL的查询过程,很多查询优化工作实际上就是遵循一些原则,让MySQL的优化器能够按照预想的合理方式运行而已. 1.优化的哲学 注:优化有风险,涉足需谨 ...

  8. Spring Boot + Spring Cloud 构建微服务系统（六）：熔断监控集群（Turbine）

    Spring Cloud Turbine 上一章我们集成了Hystrix Dashboard,使用Hystrix Dashboard可以看到单个应用内的服务信息,显然这是不够的,我们还需要一个工具能让 ...

  9. linux装tomcat遇到的坑

    最开始通过apt-get安装,各种毛病 然后下载tar.gz压缩包解压使用,运行startup.sh可以启动,但是看日志发现 Tomcat启动时卡在 INFO HostConfig.deployDir ...

  10. Android中不能在子线程中更新View视图的原因

    这是一条规律,很多coder知道,但原因是什么呢? 如下: When a process is created for your application, its main thread is ded ...