【代码笔记】Web-ionic-Range

一，效果图。

二，代码。

复制代码
<!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>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <div class="range">
        <i class="icon ion-volume-low"></i>
        <input type="range" name="volume">
        <i class="icon ion-volume-high"></i>
    </div>
    <div class="list" style="margin-top:13px">
        <div class="ltem item-divider">
            Range In A List.
        </div>
        <div class="item range range-positive">
            <i class="icon ion-ios-sunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="12">
            <i class="icon ion-ios-sunny"></i>
        </div>
        <div class="item range range-calm">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="25">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
        <div class="item range range-balanced">
            <i class="icon ion-ios-bolt-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="38">
            <i class="icon ion-ios-bolt"></i>
        </div>
        <div class="item range range-energized">
            <i class="icon ion-ios-moon-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="50">
            <i class="icon ion-ios-moon"></i>
        </div>
        <div class="item range range-assertive">
            <i class="icon ion-ios-partlysunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="63">
            <i class="icon ion-ios-partlysunny"></i>
        </div>
        <div class="item range range-royal">
            <i class="icon ion-ios-rainy-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="75">
            <i class="icon ion-ios-rainy"></i>
        </div>
        <div class="item range range-dark">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="88">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
    </div>
</body>

</html>
复制代码

 

参考资料：《菜鸟教程》

posted @ 2018-07-26 09:31  花儿迎风笑  阅读(406)  评论(0)  编辑  收藏  举报