【代碼筆記】Web-ionic-Range_ZenDei技術網路在線

【代碼筆記】Web-ionic-Range

-Advertisement-

一，效果圖。二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, ...

一，效果圖。

二，代碼。

<!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>

參考資料：《菜鳥教程》

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

2018年8月中級前端開發推薦書籍

1. 這些書籍適合中級前端開發者閱讀，初級前端開發人員買來除了自我安慰和墊高顯示器以外可能沒什麼用處。 2. 說是推薦書單，實際上是筆者自己的讀書計劃。歡迎你在閱讀中與我交流。 1.《企業IT架構轉型之道阿裡巴巴中台戰略思想與架構實踐》推薦理由：曾經有一個前端大神說過，如果你想成為前端架構 ...
JavaScript---BOM對象

1、BOM簡介 BOM（瀏覽器對象模型），可以對瀏覽器視窗進行訪問和操作。使用 BOM，開發者可以移動視窗、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。使 JavaScript 有能力與瀏覽器“對話”。 2、window 對象 window 對象方法：交互方法： 1 方法講解: 2 ...
JavaScript如何判斷數組類型Array

作為一個進入中年的程式員，是時候展示真正的技術了。做了好幾年技術發現自己的水平也就那麼回事，與時俱進的同時，發現基礎知識是如此的薄弱。 1. typeof typeof 能否判斷數組？上代碼！ ...
網站活動秒殺倒計時

今天做移動端商城時候得，需要哥秒殺計時器，從後臺獲取了時間以後，前臺做相應的判斷。需要的可以直接拿去用，本人只精確到了x天x小時x分鐘x秒。其他需要可以自行添加。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta na ...
JQuery實現全選、全不選和反選功能

看重點就行了，最後面給一個網頁完整的代碼代碼實例：全選：反選：全選操作案例：數據遍歷出來：點擊全選：反選操作案例：首先選中幾個然後點擊反選：附上完整網頁的代碼： ...
css把容器級別（div...）標簽固定在一個位置（在頁面最右邊）

沒有滾動條時候：有滾動條時候： ...
函數式編程簡介-附入門方法

函數式編程是一種解決問題的思路。我們熟悉的命令式編程把程式看作”一系列改變狀態的指令“；而函數式編程把程式看作”一系列數學函數映射的組合“。 ...
electron調用C#應用程式實現串口通信

最近轉入零售行業開發了一系列產品，包含便利店收銀軟體、會員系統、供應鏈系統。為了追趕潮流，收銀軟體使用了electron平臺開發，界面效果、開發效率確實不錯；但是涉及到串口通訊時遇到了麻煩，electron不能直接使用node.js的串口模塊。網上有一些文章推薦編譯electron源碼來實現串口模塊 ...