一，效果图。

二，代码。

<!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. 696. Count Binary Substrings

    Give a string s, count the number of non-empty (contiguous) substrings that have the same number of ...

  2. box-sizing:border-box的作用

    其实一直没仔细研究过CSS3新增的这个属性box-sizing,只是经常会看到其它网页和公司项目里面有用到这个属性,然后就百度找到了一篇不错的介绍 https://www.jianshu.com/p/ ...

  3. LabVIEW（十二）：VI本地化-控件标题内容的修改

    一.对于一般LabVIEW的学习,很少遇到本地化的问题但是我们经常会遇到界面控件标题的显示问题.由于各个技术领域的专业性,往往用户对VI界面的显示有自己的要求,其中就包括控件的标题问题,这可以理解成本 ...

  4. 精通Linux

    1, linux 启动流程,详细 2,grub , grub2 3, 文件系统,不同文件系统的特性 ext3 , ext 4 ,xfs 4, 不同目录的作用, 分区 5,用户管理 6,文件权限,目录挂 ...

  5. Java的面向对象（初涉）

    Java的面向对象(初涉) 面向对象的分析根据抽象关键的问题域来分解系统.面向对象的设计是一种提供符号设计系统的面向对象的实现过程,它用非常接近实际领域术语的方法把系统构造成"现实世界&qu ...

  6. Tools - UML

    ProcessOn - 在线绘图工具 ProcessOn 支持流程图.思维导图.原型图.UML.网络拓扑图等: 主流的UML图列都支持,可以作为方便快捷的UML工具: PlantUML - 多系统多编 ...

  7. 使用JDBC连接各种数据库

    项目需要连多钟数据库,把链接的关键部分在这里记录下来. 1.Oracle8/8i/9i数据库(thin模式) Class.forName("oracle.jdbc.driver.Oracle ...

  8. Maven项目报错:Missing artifact****和ArtifactDescriptorException: Failed to read artifact descriptor for***和Cannot change version of project facet Dynamic web module to 2.5

    一.关于Cannot change version of project facet Dynamic web module to 2.5 具体查看博客:http://blog.csdn.net/ste ...

  9. Oracle Database 12c Release 2安装过程实录

    前言----------公司数据库用的是oracle,由于oracle数据库没有做监控,所有搭个环境用于测试zabbix通过orabbix插件监控oracle数据库,下面先搭建oracle数据库. 简 ...

  10. Spring Cloud 微服务分布式链路跟踪 Sleuth 与 Zipkin

    Zipkin 是一个开放源代码分布式的跟踪系统,由 Twitter 公司开源,它致力于收集服务的定时数据,以解决微服务架构中的延迟问题,包括数据的收集.存储.查找和展现.它的理论模型来自于Google ...