zoukankan      html  css  js  c++  java
  • Framework7——最简单的Demo

    Framework7  很强

    Framework7中文API

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <!-- framework7 -->
        <link rel="stylesheet" href="framework7/dist/css/framework7.min.css">
        <link rel="stylesheet" href="framework7/dist/css/framework7.md.min.css">
    </head>
    <body>
    <div id="container" class='main-table' id="as-main-table" style="overflow: hidden">
        <div class="list accordion-list">
            <ul>
                <li class="accordion-item ">
                    <div class="item-content item-link">
                        1
                    </div>
                    <div class="accordion-item-content">
                        1
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    <br>
    
    <div id="container2" class="list links-list">
        <ul>
            <li><a href="#">
                <div style="text-indent: 10px;">aaaa</div>
                <div>2</div>
            </a></li>
            <li><a href="#">
                <div style="text-indent: 10px;">bbbb</div>
                <div>5</div>
            </a></li>
            <li><a href="#">
                <div style="text-indent: 10px;">cccc</div>
                <div>9</div>
            </a></li>
            <li><a href="#">
                <div style="text-indent: 10px;">dddd</div>
                <div>1</div>
            </a></li>
        </ul>
    </div>
    
    </body>
    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="framework7/dist/js/framework7.min.js"></script>
    <script>
        var app = new Framework7({
            root: '#app',
            name: 'My App',
            id: 'main_app',
            panel: {
                swipe: 'left'
            },
            touch: {
                tapHold: true //enable tap hold events
            },
            dialog: {
                // set default title for all dialog shortcuts
                title: '提示框',
                // change default "OK" button text
                buttonOk: '确定',
                buttonCancel: '关闭'
            },
            // Add default routes
            routes: [
                {
                    path: '/about/',
                    url: 'about.html',
                }
            ]
        });
    </script>
    </html>
  • 相关阅读:
    vue.js 系列教程
    vue.js 生命周期
    MVVM代码例子
    vue.js windows下开发环境搭建
    Vue.js 之修饰符详解
    elementUi——适合于Vue的UI框架
    Vue.js——60分钟快速入门
    Keil sct分散加载文件
    Keil ARM-CM3 printf输出调试信息到Debug (printf) Viewer
    Cortex-M3(NXP LPC 1788) 启动代码
  • 原文地址:https://www.cnblogs.com/chenss15060100790/p/11199291.html
Copyright © 2011-2022 走看看