• 【代码笔记】Web-ionic-select


    一,效果图。

     

     

    二,代码。

     

    复制代码
    <!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="list">
            <div class="item item-input item-select">
                <div class="input-label">
                    Lightsaber
                </div>
                <select>
                    <option>Blue</option>
                    <option selected="">Green</option>
                    <option>Red</option>
                </select>
            </div>
            <div class="item item-input item-select">
                <div class="input-label">
                    Fighter
                </div>
                <select>
                    <option>ARC-170</option>
                    <option>A-wing</option>
                    <option>Delta-7</option>
                    <option>Naboo N-1</option>
                    <option>TIE</option>
                    <option selected="">X-wing</option>
                    <option>Y-wing</option>
                </select>
            </div>
            <div class="item item-input item-select">
                <div class="input-label">
                    Droid
                </div>
                <select>
                    <option>2-1B</option>
                    <option>B1</option>
                    <option>C-3PO</option>
                    <option>IG-88</option>
                    <option>IT-O</option>
                    <option selected="">R2-D2</option>
                </select>
            </div>
            <div class="item item-input item-select">
                <div class="input-label">
                    Planet
                </div>
                <select>
                    <option>Alderaan</option>
                    <option selected="">Dagobah</option>
                    <option>Felucia</option>
                    <option>Geonosis </option>
                    <option>Hoth</option>
                    <option>Kamino</option>
                    <option>Mygeeto</option>
                    <option>Naboo</option>
                    <option>Tataouine</option>
                    <option>Utapau</option>
                    <option>Yavin</option>
                </select>
            </div>
        </div>
    </body>
    
    </html>
    复制代码

     

    参考资料:《菜鸟教程》

  • 相关阅读:
    【学习笔记】一:JavaScript简介
    【学习笔记】Sass入门指南
    【学习笔记】前端开发面试锦集
    庆祝我的博客园正式开张
    python解析AMF协议
    C语言setjmp函数使用
    CONTAINING_RECORD 宏
    samba的安装及其使用
    confluence的安装
    查看mysql字符集及修改表结构--表字符集,字段字符集
  • 原文地址:https://www.cnblogs.com/yang-guang-girl/p/9375594.html
Copyright © 2020-2023  润新知