zoukankan      html  css  js  c++  java
  • 【代码笔记】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>
    复制代码

     

    参考资料:《菜鸟教程》

  • 相关阅读:
    android四大组件之contentprovider
    android自定义控件及自定义组合控件
    android四大组件之activity
    监听鼠标滚动事件,如滚动鼠标出现返回顶部按钮
    滚动鼠标出现某一元素
    checked 选择框选中
    原生JS一些操作
    闭合浮动的方法css
    合理提升WEB前端性能
    JS数组操作
  • 原文地址:https://www.cnblogs.com/yang-guang-girl/p/9375594.html
Copyright © 2011-2022 走看看